-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
100 lines (84 loc) · 2.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="The Snake Game">
<meta name="author" content="github.com/blunket">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<title>Snake Game</title>
<style type="text/css">
*{
box-sizing:border-box;
}
#game{
border:1px solid #000;
display:block;
position:absolute;
left:260px;
top:10px;
outline:none;
}
#options{
position:absolute;
width:250px;
top:0px;
left:0px;
bottom:0px;
background-color:#4D3A34;
font-family:Monospace;
font-size:20px;
color:#AAA;
padding:10px;
}
span{
display:block;
margin:30px auto;
}
input[type=button]{
width:100%;
height:40px;
}
input[type=color]{
width:0px;
height:0px;
visibility:hidden;
}
#snakecolor, #bgcolor{
width:20px;
height:20px;
display:inline-block;
}
#snakecolor{
background-color:#d4c4a3;
}
#bgcolor{
background-color:#bb7754;
}
body{
background-color:#3c2923;
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div id="options">
<span> Speed: <input type="range" value=7 min=1 max=20 id="speed" /></span>
<span> Width: <input type="range" value=30 min=10 max=70 id="width" /></span>
<span>Height: <input type="range" value=20 min=10 max=50 id="height" /></span>
<span><label><input type="checkbox" id="special" /> Special food</label></span>
<span><input type="button" id="apply" value="Apply" /></span>
<span>Controls: arrow keys</span>
<span>Spacebar to pause</span>
<span>Snake: <label id="snakecolor"><input type="color" value="#d4c4a3" id="snake" /></label></span>
<span>Background: <label id="bgcolor"><input type="color" value="#bb7754" id="bg" /></label></span>
</div>
<canvas id="game" tabindex=0>
Your browser does not support the HTML5 Canvas element. Try a modern browser.
</canvas>
<script src="setup.js"></script>
<script src="game.js" defer></script>
</body>
</html>