-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
61 lines (60 loc) · 4.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Snake Game</title>
<link rel="stylesheet" type="text/css" href="app.css">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="icon" href="./images/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div class="content">
<div class="row">
<div class="col">
<h1>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<circle fill="#6bd82b" style="background-color: transparent;" cx="278.261" cy="83.478" r="16.696"/>
</g>
</g>
<g>
<g>
<path fill="#6bd82b" style="background-color: transparent;" d="M444.02,346.508c11.192-14.206,17.893-32.105,17.893-51.552c0-46.03-37.448-83.478-83.478-83.478v-128
C378.435,37.448,340.986,0,294.957,0H194.783c-34.161,0-63.579,20.635-76.487,50.087H84.828L56.327,21.586
c-6.519-6.519-17.091-6.519-23.611,0s-6.52,17.091,0,23.611l21.586,21.585L32.717,88.369c-6.52,6.519-6.52,17.091,0,23.611
s17.091,6.52,23.611,0l28.501-28.502h26.476c0,46.03,37.448,83.478,83.478,83.478h16.696v44.522h-77.913
c-45.9,0-83.478,37.324-83.478,83.478c0,19.447,6.702,37.346,17.893,51.552C29.333,353.798,0,387.788,0,428.522
C0,474.552,37.448,512,83.478,512h345.043c46.03,0,83.478-37.448,83.478-83.478C512,387.788,482.667,353.798,444.02,346.508z
M194.783,133.565c-27.618,0-50.087-22.469-50.087-50.087c0-27.618,22.469-50.087,50.087-50.087h100.174
c27.618,0,50.087,22.469,50.087,50.087v62.897c-32.661,6.656-58.446,32.442-65.103,65.103H244.87v-61.217
c0-9.22-7.475-16.696-16.696-16.696H194.783z M345.043,180.959v30.52h-30.52C319.563,197.271,330.837,185.997,345.043,180.959z
M230.867,244.87c-6.892,19.433-25.45,33.391-47.215,33.391c-21.926,0-40.442-13.815-47.27-33.391
C146.699,244.87,221.904,244.87,230.867,244.87z M104.342,254.316c4.161,12.66,11.344,24.214,21.149,33.74
c15.664,15.216,36.32,23.596,58.161,23.596c40.314,0,74.042-28.725,81.799-66.783c13.779,0,100.429,0,112.984,0
c27.618,0,50.087,22.469,50.087,50.087c0,27.618-22.469,50.087-50.087,50.087h-244.87c-27.618,0-50.087-22.469-50.087-50.087
C83.478,278.239,91.718,263.42,104.342,254.316z M408.954,378.435c-6.892,19.433-25.45,33.391-47.215,33.391
c-21.766,0-40.323-13.959-47.215-33.391h63.911H408.954z M103.046,478.609c6.892-19.433,25.45-33.391,47.215-33.391
s40.323,13.959,47.215,33.391H103.046z M428.522,478.609H232.06c-7.756-38.057-41.484-66.783-81.799-66.783
c-39.546,0-72.734,27.65-81.306,64.628c-20.557-6.24-35.564-25.363-35.564-47.932c0-27.618,22.469-50.087,50.087-50.087h50.087
H279.94c7.756,38.057,41.484,66.783,81.799,66.783c39.546,0,72.734-27.65,81.306-64.628c20.557,6.24,35.564,25.363,35.564,47.932
C478.609,456.14,456.14,478.609,428.522,478.609z"/>
</g>
</g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
</svg>
Snake Game!
</h1>
<canvas id="snake" width="512" height="512"></canvas>
</div>
<div class="config">
<button onClick="start()" class="start" id="start">Start</button>
<button onClick="pause()" class="pause hide" id="pause">Pause</button>
</div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>