-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
65 lines (64 loc) · 2.53 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
<!DOCTYPE html>
<html>
<head>
<link href="SnakeGame.css" rel="stylesheet">
</head>
<body>
<main>
</main>
<div class="templates">
<section class="homepageLayout">
<h1>Snake</h1>
<article class="rules">
<h2>Rules</h2>
<p>You are the snake!<br /><br />Direct yourself toward the apples (large white dots). As you eat apples, you grow longer. If you hit the edge of the window or yourself you die and the game starts over.<br /><br />See how long you can grow before you die!</p>
</article>
<article class="controls"><!--
--><h2>Controls</h2><!--
--><aside class="arrows"><!--
-->Move snake<!--
--></aside><!--
--><section class="arrows"><!--
--><img class="up arrow" src="assets/up_arrow.svg" alt="Up arrow" /><br /><!--
--><img class="left arrow" src="assets/up_arrow.svg" alt="Left arrow" /><!--
--><img class="down arrow" src="assets/up_arrow.svg" alt="Down arrow" /><!--
--><img class="right arrow" src="assets/up_arrow.svg" alt="Right arrow" /><!--
--></section><br /><br /><!--
--><aside class="spacebar"><!--
-->Play/Pause<!--
--></aside><!--
--><span class="spacebar">Spacebar</span><br /><br /><!--
--><aside class="escape"><!--
-->Return home<!--
--></aside><!--
--><span class="escape">Esc</span><!--
--></article><br />
<article class="difficulty"><!--
--><h2>Difficulty</h2><!--
--><fieldset class="setting"><!--
--><label for="easy" class="easy level">Easy</label><input name="difficultySetting" type="radio" id="easy" value="40" /><!--
--><label for="medium" class="medium level">Medium</label><input name="difficultySetting" type="radio" id="medium" value="20" /><!--
--><label for="hard" class="hard level">Hard</label><input name="difficultySetting" type="radio" id="hard" checked="true" value="10" /><!--
--><span class="selector"></span><!--
--></fieldset><!--
--></article><br />
<button class="start">Start</button>
</section>
<canvas id="snake"></canvas>
</div>
<script type='text/javascript'>
(function() {
var script = document.createElement('script');
script.setAttribute('src', 'SnakeGame.js');
script.setAttribute('type', 'text/javascript');
script.setAttribute('async', 'true');
document.getElementsByTagName('head')[0].appendChild(script);
script = document.createElement('script');
script.setAttribute('src', 'SnakeGameHomepage.js');
script.setAttribute('type', 'text/javascript');
script.setAttribute('async', 'true');
document.getElementsByTagName('head')[0].appendChild(script);
}());
</script>
</body>
</html>