-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
311 lines (271 loc) · 10.1 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="fr_FR">
<head>
<title>Terror Defense</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=0.86, shrink-to-fit=no" />
<link href="./images/favicon.png?v1" rel="icon shortcut" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<jsglib-game width="480" height="380" zoom="2">
<section id="tutoContainer">
<button id="skipButton" class="tuto-button">Skip tutorial</button>
<aside class="tuto step1">
<p>
Welcome to your graveyard! Your goal is to make it as scary as possible. The scary-o-meter <span class="tile scaryometer"></span>,
on the bottom right of the screen, is currently negative...
<button class="tuto-button" data-step="2">▶</button>
</p>
</aside>
<aside class="tuto step2">
<p>
It's because your graveyard is not very spooky for now. These white flowers <span class="tile flower"></span> are too pretty,
remove <b>3</b> of them! Beware, it'll cost you soulstones <span class="tile soulstone"></span>.
</p>
</aside>
<aside class="tuto step3">
<p>
Good! You can increase the scary-o-meter of your graveyard by removing flowers, even if they regrow over time.
Note that blue ones are soulflower <span class="tile soulflower"></span>. They generate soulstones, so you may want to keep or buy them...
Let's plant <b>5</b> soulflowers.
</p>
</aside>
<aside class="tuto step4">
<p>
Well done! But with all these flowers, your graveyard is definitively not scary... Add <b>3</b>
dead trees <span class="tile tree"></span> to make it gloomier!
</p>
</aside>
<aside class="tuto step5">
<p>
The scary-o-meter is still negative, so you must continue!<br />You can now build tomb stones
<span class="tile tombstone"></span> and graves <span class="tile grave"></span>, I let you discover them...<br />Try to put the scary-o-meter at <b>0 or above</b>!
<button class="tuto-button">▶</button>
</p>
</aside>
<aside class="tuto step6 success">
<p>
Very well done! Do you know that tomb stones and graves can be upgraded? Keep an eye on them: if they're glowing <span class="tile tombstone upgradable"></span>, they can upgrade!
<br />But wait, somebody is coming... If your graveyard is spooky enough, he'll run away!
<button class="tuto-button">▶</button>
</p>
</aside>
<aside class="tuto step6 failure">
<p>
Hey, what are you doing? You're supposed to make your graveyard scarier! To help you on this task,
do you know that tomb stones and graves can be upgraded? Keep an eye on them: if they're glowing <span class="tile tombstone upgradable"></span>, they can upgrade!
<br />But wait, somebody is coming... If your graveyard is spooky enough, he'll run away!
<button class="tuto-button">▶</button>
</p>
</aside>
<aside class="tuto step7 success">
<p>
Did you see how he ran away? You earn soulstones every time someone is scared to death like that. Some humans are braver than others,
and the more humans there are in the graveyard, the more reassured they feel.
<button class="tuto-button" data-step="8">▶</button>
</p>
</aside>
<aside class="tuto step7 failure">
<p>
Oh, he managed to leave your graveyard without running away... You earn soulstones every time someone is scared to death. Some humans are braver than others,
and the more humans there are in the graveyard, the more reassured they feel.
<button class="tuto-button" data-step="8">▶</button>
</p>
</aside>
<aside class="tuto step8">
<p>
From now on, everytime an human leaves your graveyard without running away, you'll lose a life.
So make your graveyard as spooky as possible!<br />
Good luck, have fun, and don't be afraid!
<button class="tuto-button">▶</button>
</p>
</aside>
<aside class="tuto stepEnd">
<p>
Game over! Your scary-o-meter value is
<span class="tile scaryometer"></span>x
<span id="scaryometerEndDOM">0</span><br />
Click <a id="pictureLink" download="terror-defense-graveyard.png">on this link</a> to get a picture of your graveyard and share it to everyone!<br />
<button class="tuto-button">Replay ▶</button>
</p>
</aside>
</section>
<main id="board"></main>
<footer id="shopWrapper">
<div id="shopInner">
<div>
<span class="tile soulstone" title="Soulstone"></span>x
<span id="soulstoneCountDOM">0</span>
</div>
<menu>
<li>
<button class="tile soulflower buildable" aria-label="Buy soulflower"></button>
</li>
<li>
<button class="tile tree buildable" aria-label="Buy tree"></button>
</li>
<li>
<button class="tile tombstone lvl1 buildable" aria-label="Buy tomb stone"></button>
</li>
<li>
<button class="tile grave lvl1 buildable" aria-label="Buy grave"></button>
</li>
<li>
<button class="tile bat buildable" aria-label="Buy bat"></button>
</li>
<li>
<button class="tile ghost buildable" aria-label="Buy ghost"></button>
</li>
<li>
<button data-mode="remove" class="tile none buildable" aria-label="Buy 'remove item'"></button>
</li>
<li>
<button class="tile thunder" aria-label="Cast thunder"></button>
</li>
<li id="lifeContainer">
<span class="tile heart"></span>
<span class="tile heart"></span>
<span class="tile heart"></span>
</li>
<li>
<button id="soundButton" class="tile sound" aria-label="Toggle sound"></button>
</li>
</menu>
<div class="scaryometerContainer">
<span class="tile scaryometer" title="Scary-o-meter"></span>x
<span id="scaryometerDOM">0</span>
</div>
</div>
<div>
<aside class="item-description soulflower">
<p>
Soulflower: 5 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="negative">-1</b>
</p>
<p>A beautiful and reassuring flower, but it generates 1 soulstone for your graveyard every 4 seconds.</p>
</aside>
<aside class="item-description none">
<p>
Remove item: 3 <span class="tile soulstone"></span>
</p>
<p>Flowers are too pretty for your spooky graveyard!</p>
</aside>
<aside class="item-description tree">
<p>
Dead tree: 10 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+2</b>
</p>
<p>
A dead tree adds a nice touch to your graveyard.
</p>
</aside>
<aside class="item-description tombstone lvl1">
<p>
Tomb stone: 20 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+1</b>
</p>
<p>
A classic and not so scary tomb stone. Can be upgraded.
</p>
</aside>
<aside class="item-description tombstone lvl2">
<p>
Old tomb stone: 30 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+2</b>
</p>
<p>
A scarier tomb stone, made with creepy wood. Can be upgraded.
</p>
</aside>
<aside class="item-description tombstone lvl3">
<p>
Evil tomb stone: 40 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+3</b>
</p>
<p>
This tomb stone seems to be tied to hell itself. So spooky!
</p>
</aside>
<aside class="item-description grave lvl1">
<p>
Marble grave: 15 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+2</b>
</p>
<p>
A classic grave, not very spooky. Must be placed just below a tomb stone. Can be upgraded.
</p>
</aside>
<aside class="item-description grave lvl2">
<p>
Fresh grave: 25 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+3</b>
</p>
<p>
It looks like it has just been dug, you can almost feel the corpse underneath... Can be upgraded.
</p>
</aside>
<aside class="item-description grave lvl3">
<p>
Cracked grave: 35 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+4</b>
</p>
<p>
The occupant of this grave seems to want to get out...
</p>
</aside>
<aside class="item-description bat">
<p>
Bat: 30 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+5</b>
<span id="batLock">
| <span class="locked"><b>Locked:</b> get 12 trees to unlock <i>(<span id="treeLeftCount">12</span> left!)</i></span>
</span>
</p>
<p>
People don't like bats, so let's put some! Must be placed just above a dead tree.
</p>
</aside>
<aside class="item-description ghost">
<p>
Ghost: 75 <span class="tile soulstone"></span>
|
Scary-o-meter: <b class="positive">+10</b>
<span id="ghostLock">
| <span class="locked"><b>Locked:</b> get 4 upgraded graves to unlock <i>(<span id="graveLeftCount">4</span> left!)</i></span>
</span>
</p>
<p>
What's scarier than a ghost? Must be placed on the right of a tomb stone linked to a grave.
</p>
</aside>
<aside class="item-description thunder">
<p>
Cast a thunder: <span id="thunderItemCost">100</span> <span class="tile soulstone"></span>
</p>
<p>A one-shot thunder, scaring everyone. Cost increase after each use.</p>
</aside>
<aside class="item-description sound">
<p>
Toggle sound: 0 <span class="tile soulstone"></span>
</p>
<p>
At first, I thought about increasing the scary-o-meter while the spooky soundscape is enabled but... it seems to be a terrible game design idea.
</p>
</aside>
</div>
</footer>
</jsglib-game>
<script type="module" src="index.js"></script>
</body>
</html>