-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (75 loc) · 3.49 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
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="scoreboard">
<div class="score">Score: 0</div>
<div class="highestScore">Highest Score: 0</div>
<div class="info">1st Stage</div>
</div>
<div class="container">
<div class="gameName">🐍 The Snake Game</div>
<div id="sketch-div"></div>
<div class="button-list noselect">
<button onclick="newGame()" id="replay">
<i class="material-icons noselect">replay</i>
</button>
<button onclick="startGame()" id="play_arrow">
<i class="material-icons noselect">play_arrow</i>
</button>
<button onclick="pauseGame()" id="pause">
<i class="material-icons noselect">pause</i>
</button>
<button onclick="showRules()" id="info">
<i class="material-icons noselect">info</i>
</button>
</div>
<!-- modal -->
<div class="modal">
<div class="modal-content">
<button class="close" onclick="closeModal()">×</button>
<p>Welcome to 🐍 the Snake Game!</p>
<p> Your goal is to let the snake eat as many food as possible. <br>
The snake can loop through the canvas, meaning if it went out of border,
it will reappear at the opposite side.
Start the game by pressing <i class="material-icons noselect">play_arrow</i>.
</p>
<p>
Each step the snake takes counts for <b>1</b> point. <br>
Each food <i class="material-icons noselect" id="food">fiber_manual_record</i>
the snake eats counts for <b>100</b> points.
</p>
<p>
Once you have reached <b>2000</b> points, you will enter the 2nd stage.
Special food <i class="material-icons noselect" id="special_food">fiber_manual_record</i>
will start to appear and change its position every <u><i>5 seconds</i></u>.
Each special food <i class="material-icons noselect" id="special_food">fiber_manual_record</i>
counts for <b>300</b> points instead!
</p>
<p>
The game will end if the snake eats itself. <br>
To restart the game, press <i class="material-icons noselect">replay</i>.
You can pause <i class="material-icons noselect">pause</i> the game at any time,
and simply press <i class="material-icons noselect">play_arrow</i> again to resume.
</p>
<p>
Please note that your highest score will be lost after you refresh or close this browser.
</p>
<p>
Enjoy! :)
</p>
</div>
</div>
<div class="love">
Made with ❤️ by <a href="https://github.com/karen-poon/snake-game" target="_blank"> @karen-poon</a>
</div>
</div>
<script src="sketch.js"></script>
<script src="snake.js"></script>
<script src="food.js"></script>
<script src="script.js"></script>
</body>
</html>