-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (137 loc) · 6.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Snake Game
</title>
<meta charset="utf-8">
<meta name="author" content="PotatoMindPopper">
<meta name="description" content="Snake Game">
<meta name="keywords" content="Snake Game">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0c2577">
<link rel="shortcut icon" type="image/png" href="/assets/img/png/snake.png">
<!-- <meta property="og:url" content="https://opdrachten.pages.dev/"> -->
<meta property="og:type" content="website">
<meta property="og:title" content="Snake Game">
<meta property="og:description" content="Snake Game">
<meta property="og:image" content="assets/img/png/snake.png">
<meta property="twitter:domain" content="">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:site" content="@GamingVonk">
<meta property="twitter:creator" content="@GamingVonk">
<meta property="twitter:title" content="Snake Game">
<!-- <meta property="twitter:url" content="https://opdrachten.pages.dev/"> -->
<meta property="twitter:image" content="assets/img/png/snake.png">
<meta property="twitter:description" content="Snake Game">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header>
<div id="logo" style="display: none;">
<a href="index.html"><img src="assets/img/ico/favicon.ico" alt="logo"></a>
</div>
<div id="title">
<h1>Snake Game<span id="beta-title">(Beta)</span></h1>
</div>
<!-- TODO: Add url pages (about etc.) at the top -->
<div class="dropdown" id="settings-dropdown">
<button class="dropbtn">Settings</button>
<div class="dropdown-content">
<button id="darkMode">Dark Mode</button>
<button id="lightMode">Light Mode</button>
<button id="reset">Reset</button>
</div>
</div>
</header>
<main>
<section id="snake-game">
<h2>Snake Game</h2>
<p>Snake is the common name for a video game concept where the player maneuvers a line which grows in length, with the line itself being a primary obstacle. The concept originated in the 1976 arcade game Blockade, and the ease of implementing Snake has led to hundreds of versions (some of which have the word snake or worm in the title) for many platforms. After a variant was preloaded on Nokia mobile phones in 1998, there was a resurgence of interest in the snake concept as it found a larger audience.</p>
</section>
<section id="content">
<section id="game-container">
<div id="game-canvas-container">
<canvas id="game-canvas"></canvas>
</div>
</section>
<section id="controls-container">
<div id="game-start-container">
<h3>Start</h3>
<p>Start the game by pressing the start button.</p>
<button id="game-start">Start</button>
</div>
<div id="game-pause-container">
<h3>Pause</h3>
<p>Pause the game by pressing the pause button.</p>
<button id="game-pause">Pause</button>
</div>
<div id="game-resume-container">
<h3>Resume</h3>
<p>Resume the game by pressing the resume button.</p>
<button id="game-resume">Resume</button>
</div>
<div id="game-stop-container">
<h3>Stop</h3>
<p>Stop the game by pressing the stop button.</p>
<button id="game-stop">Stop</button>
</div>
<div id="game-over-container">
<h2>Game Over</h2>
<p id="game-over-score">Score: 0</p>
<p id="game-over-high-score">Highscore: 0</p>
<button id="game-restart">Restart</button>
</div>
</section>
</section>
<section id="settings-info">
<div id="log-messaging">
<!-- TODO: Maybe move underneath the canvas -->
<p id="log-message"></p>
</div>
<div id="info-container">
<div id="info-title-container">
<h2>Info</h2>
<p>Here you can find information about the game.</p>
</div>
<div id="info-content-container">
<div id="game-score-container">
<h3>Score</h3>
<p>
See your score by looking at the score counter.<br>
Score is calculated by the amount of food you eat.<br>
Every food you eat is worth 1 point.
</p>
<p id="game-score">Score: 0</p>
<p id="game-high-score">Highscore: 0</p>
</div>
<div id="game-controls-container">
<h3>Controls</h3>
<p>
Use the arrow keys or WASD to move the snake.<br>
Use the shift key to change the speed of the snake.<br>
Use the spacebar to pause the game.<br>
Use the enter key to resume the game.<br>
Use the escape key to stop the game.<br>
Use the r key to restart the game.
</p>
</div>
</div>
</div>
<div id="settings-info-seperator"></div>
<div id="settings-container">
<div id="settings-title-container">
<h2>Settings</h2>
<p>Here you can change the settings of the game.</p>
</div>
<div id="settings-content-container"></div>
</div>
</section>
</main>
<footer>
<p><a href="https://github.com/PotatoMindPopper">PotatoMindPopper</a></p>
</footer>
<script src="assets/js/style.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>