-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (116 loc) · 5.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mystic Realm Duels!</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<section id="select-character">
<div id="title">
<h1 class="title">Mystic Realm Duels</h1>
<h2 class="caption">Choose your character:</h2>
</div>
<div id="cards">
<ul id="container-cards" class="mired-card"></ul>
</div>
<div id="buttons">
<button id="button-character">SELECT</button>
<div id="buttons-feedback">
<div id="button-audio">
<button id="button-music-background">
MUSIC BACKGROUND
</button>
</div>
<div id="feedback">
<button id="button-stats">CHARACTER STATS</button>
<button id="button-element-table">ELEMENT TABLE</button>
</div>
</div>
</div>
<div id="modal">
<span class="close">×</span>
<div id="modal-content">
<div id="modal-header">
<h2>Basic scheme of weaknesses and strengths</h2>
</div>
<div id="modal-body">
<p>
In the image just below you can see a simple summary
of the bonuses or damage reductions. Each column
shows how much damage the item in the top row
(yellow row) does to the rest of the items. Any type
not listed in that column means it deals 100%
damage, with no bonus or reduction.
</p>
<img src="assets/table-mired.png" alt="Table" />
<p>
This is the meaning of the multipliers on each row:
</p>
<ul>
<li>
<strong>X2:</strong> The item on the top row
<strong>deals double damage</strong>
to the items indicated on the green (second)
row.
</li>
<li>
<strong> X1.5:</strong> The element on the top
row <strong>one-fifth normal damage</strong> to
the indicated elements on the orange (third)
row.
</li>
<li>
<strong>X:</strong> The item on the top row
<strong>deals 0 damage</strong> to the item
indicated on the red (last) row.
</li>
</ul>
</div>
<div id="modal-footer">
<h3>Note:</h3>
<p>
In addition to normal attacks, some characters have
access to two types of special attacks. The first
type is a melee attack, which deals half base damage
to enemies. The second type is a defensive shield
that multiplies the character's defense by 2 for 2
consecutive turns.
</p>
</div>
</div>
</div>
</section>
<section id="see-map">
<h1 class="title">Walk the map with your character</h1>
<canvas id="map"></canvas>
<div id="move-buttons">
<button id="button-move-up"></button>
<button id="button-move-left"></button>
<button id="button-move-down"></button>
<button id="button-move-right"></button>
</div>
<p>
Tip: When entering battle, we recommend rotating your device
horizontally for a better gaming experience.
</p>
</section>
<section id="select-power">
<div id="character-info">
<button id="button-restart">Restart</button>
</div>
<div id="character-display">
<p id="information-damage-player"></p>
<p id="information-damage-enemy"></p>
</div>
<div id="powers-container" class="button-powers"></div>
</section>
<audio id="music-background" src="assets/Background music.mp3" onvolumechange="1" autoplay loop></audio>
<audio id="pop-in" src="assets/UI Popup In.mp3"></audio>
<script type="module" src="js/mired.js"></script>
<script type="module" src="js/character.js"></script>
<script type="module" src="js/elements.js"></script>
</body>
</html>