-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
127 lines (126 loc) · 7.48 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
<link rel="icon" type="image/png" href="/static/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/static/images/favicon-16x16.png" sizes="16x16" />
<title>Plants and Spiders</title>
</head>
<body>
<body style="background: black;">
<div id="overlay" class="game">
<button id="settings-button" class="button">Settings</button>
<button id="level" class="level-display hidden"></button>
<div id="score-counter" class="score-counter">
<span id="score" class="score">0</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.02095 56.48039">
<defs></defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_2-2" data-name="Layer 2">
<path class="cls-1" d="M1,16.98039v32H66.9a22,22,0,1,0,0-32Z" />
<g id="Layer_2-3" data-name="Layer 2">
<g id="Layer_3" data-name="Layer 3">
<polygon
class="cls-2"
points="83.159 55.98 83.158 42.786 91.875 48.886 98.848 49.758 94.49 45.4 88.388 41.914 99.719 41.042 108.435 34.939 97.104 34.94 89.259 36.684 101.461 26.224 104.947 16.636 93.617 22.738 84.901 34.07 87.515 20.124 82.285 1.82 77.056 20.124 79.672 34.07 70.955 22.74 59.624 16.639 63.11 26.226 75.314 36.685 67.469 34.942 56.138 34.943 64.854 41.043 76.185 41.914 70.085 45.401 65.727 49.759 72.7 48.888 81.415 42.786 81.416 55.98 83.159 55.98"
/>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="streak-container hidden" id="streak-container">
<span id="streak" class="streak"></span>
</div>
</div>
<div id="gameOverScreen" class="screen hidden">
<div class="win hidden">
<div class="score-container">
<span id="score">0</span>
<img src="/static/images/final-score.svg" class="image" alt="" />
</div>
<table id="stats" class="score-stats">
<tr class="score-spiders">
<td class="key">Points from spiders:</td><td class="value" id="score-spiders">34120</td>
</tr>
<tr class="score-plants">
<td class="key">Points from plants:</td><td class="value" id="score-plants">312310</td>
</tr>
<tr class="score-streak">
<td class="key">Longest killstreak:</td><td class="value" id="score-streak">20</td>
</tr>
<tr class="score-difficulty">
<td class="key">Difficulty:</td><td class="value" id="score-difficulty" data-diff="NORMAL">Normal</td>
</tr>
</table>
</div>
<div class="lost hidden">
<img src="/static/images/gameover.svg" class="image" alt="">
</div>
<button id="restart-button" class="button">Try again</button>
<span class="promo">Thanks for playing! You can see the code <a href="https://github.com/adamgiebl/PlantsAndSpiders/" target="_blank">here</a>.</span>
</div>
<div id="loadingScreen" class="screen">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.17236 61.32012">
<defs></defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_3" data-name="Layer 3">
<polygon
class="cls-1"
points="30.585 60.82 30.586 48.82 20.585 55.819 12.585 56.819 17.585 51.819 24.586 47.82 11.586 46.819 1.586 39.818 14.586 39.819 23.586 41.82 9.587 29.819 5.587 18.818 18.587 25.819 28.586 38.82 25.587 22.82 31.588 1.82 37.587 22.82 34.586 38.82 44.587 25.821 57.587 18.822 53.587 29.821 39.586 41.821 48.586 39.821 61.586 39.822 51.586 46.821 38.586 47.82 45.585 51.821 50.585 56.821 42.585 55.821 32.586 48.82 32.585 60.82 30.585 60.82"
/>
</g>
</g>
</svg>
</div>
<div id="titleScreen" class="screen">
<div class="background"></div>
<img src="/static/images/SVG/logo.svg" class="logo" />
<div class="menu">
<button class="button" id="continue-1">Continue</button>
</div>
</div>
<div id="settings" class="settings-modal hidden">
<button class="button close-button" id="close-modal">✖</button>
<label for="music">Music volume</label>
<input type="range" name="music" id="music-slider" min="0.0" max="1.0" value="0.5" step="0.01" />
<label for="fx">FX volume</label>
<input type="range" name="fx" id="fx-slider" min="0.0" max="1.0" value="0.5" step="0.01" />
<label for="diff" class="difficulty-label">Difficulty <small>(will restart the game)</small></label>
<div class="difficulty" id="difficulty-setting">
<input type="radio" name="diff" id="easy" class="radio" value="EASY" />
<label for="easy" class="button">Easy</label>
<input type="radio" name="diff" id="normal" class="radio" value="NORMAL" checked />
<label for="normal" class="button">Normal</label>
<input type="radio" name="diff" id="hard" class="radio" value="HARD" />
<label for="hard" class="button">Hard</label>
</div>
</div>
<div id="tutorialScreen" class="screen">
<div class="background"></div>
<span class="controls-heading">Controls</span>
<div class="controls">
<img src="/static/images/tutorial/Controls.svg" alt="" />
</div>
<div class="tutorial">
<div class="tutorial__box tutorial__box--1">
<img src="/static/images/tutorial/tut1.svg" alt="" />
</div>
<div class="tutorial__box tutorial__box--2">
<img src="/static/images/tutorial/tut2.svg" alt="" />
</div>
<div class="tutorial__box tutorial__box--3">
<img src="/static/images/tutorial/tut3.svg" alt="" />
</div>
</div>
<button id="continue-2" class="button">Play</button>
</div>
<canvas></canvas>
</body>
<script async src="./src/main.js"></script>
</body>
</html>