-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathgame.html
49 lines (41 loc) · 1.42 KB
/
game.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
<html>
<head>
<title>Snake Game</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<style>
@import url('https://rsms.me/inter/inter.css');
html {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'Inter var', sans-serif;
}
}
canvas {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239cac92' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
</style>
</head>
<body class="bg-gray-200 h-screen">
<div class="container mx-auto h-full flex justify-center items-center">
<div class="w-1/1">
<h3 class="mb-2 text-left text-sm text-gray-600">
<span id="score" class="text-2xl font-extrabold text-gray-800"> </span>
Treats
</h3>
<h2 class="mb-2 text-center font-bold text-red-600" id="error" class="text-red-600"></h2>
<canvas id="snake" width="475" height="475" class="shadow-lg bg-green-700 border border-green-800"></canvas>
</div>
</div>
</body>
<script src="src/playing-field.js"></script>
<script src="src/coordinate.js"></script>
<script src="src/direction.js"></script>
<script src="src/snake.js"></script>
<script src="src/game.js"></script>
<script>
const game = new Game()
game.start()
</script>
</html>