-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (148 loc) · 4.59 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<head>
<title>Untitled RPG</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="mainParent">
<div id="mainMap">
<div id="grid"></div>
<div id="lower">
<div id="playerInfo">
<div id="name">Name: Azel</div>
<div id="hp">30/30</div>
<div id="atk">5</div>
<div id="exp">0</div>
<div id="next">20</div>
<div id="lvl">1</div>
<div id="gold">1</div>
</div>
<div id="controls">
<div id="buttonUp">
<img class="arrow" src="img/up.png" />
</div>
<div id="buttonDown">
<img class="arrow" src="img/down.png" />
</div>
<div id="buttonLeft">
<img class="arrow" src="img/left.png" />
</div>
<div id="buttonRight">
<img class="arrow" src="img/right.png" />
</div>
<div id="center">
<img class="arrow" src="img/center.png" />
</div>
</div>
<div id="mapPotion"></div>
<div id="mapPotionText"></div>
</div>
</div>
<div id="priest">
<div id="priestImg"><img id="priestPNG" src="./img/priest.png" /></div>
<div id="priestLower">
<p id="priestText"></p>
<button id="priestPower">UnHoly Power 100G</button>
<button id="priestHeal">Heal 10G</button>
</div>
<button id="priestBtn">Continue...</button>
</div>
<div id="battle">
<div id="battleBg">
<img id="battleIMG" />
</div>
<div id="battleLower">
<div id="battleText">Battle!</div>
<div id="battleStats">
<div id="battlePlayerStats">
<div id="battleName">sdf</div>
<div id="battleHp">3</div>
<div id="battleAtk">5</div>
</div>
<div id="battleEnemyStats">
<div id="enemyName">enemy</div>
<div id="enemyHp">10</div>
<div id="enemyAtk">2</div>
</div>
</div>
</div>
<div id="battleBtns">
<div id="attack">Attack</div>
<div id="powerAttack">Power Attack</div>
<div id="potion">Use Potion</div>
</div>
</div>
<div id="story">
<div id="storyBg"><img id="storyPNG" src="./img/entrance.png" /></div>
<div id="storyLower">
<div id="storyText">
Are you prepared? The Dark Lord is through this entrance.
</div>
<div id="storyContinue">Continue to the fight.</div>
<div id="storyLeave">I need to prepare.</div>
</div>
</div>
<div id="item">
<div id="itemBg"><img id="itemPNG" src="./img/potion.png" /></div>
<div id="itemLower">
<div id="itemText">
You come across an ancient battlefield. You find a potion amongst the
rubble.
</div>
<div id="itemBtn">Leave...</div>
</div>
</div>
<div id="gameOver">
<div id="gameOverText">
<div class="gameOver" id="gameOverTitle">GAME OVER</div>
<div class="gameOver" id="gameOverBtn">Try Again?</div>
</div>
</div>
<div id="intro">
<div id="introTextParent">
<div id="introText">
After being falsely accused of a crime you have been banished to the
under world of the undead for all of eternity. Impossible as it may
seem, your only way out is to defeat the Dark Lord...
</div>
<div id="introBtn">Continue...</div>
</div>
</div>
<div id="end">
<div id="endTextParent">
<div id="endText">
The Dark Lord is defeated. With his power you can finally return home.
Will you use your newfound power to banish those who wronged you? Or
live a quiet life? The choice is yours.
</div>
<div id="endBtn">The End.</div>
</div>
</div>
<div id="title">
<div id="titleText">UNDER WORLD</div>
<div id="titleLower">
<div id="titleInput">
Name:
<input
type="text"
id="nameInput"
placeholder="Name"
minlength="3"
maxlength="6"
pattern="[a-zA-Z]+"
autocomplete="off"
required
/>
</div>
<div id="startGame">Start Game</div>
<div id="formValidate"></div>
</div>
</div>
</div>
</body>
<script src="src/index.js" type="module"></script>