-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
39 lines (39 loc) · 2.87 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
<!Doctype html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="utf-8"/>
<script src="https://cdn.tailwindcss.com"></script>
<title>Snake</title>
</head>
<body class="flex flex-row-reverse justify-between">
<script src="food.js"></script>
<script src="snake.js"></script>
<script src="main.js"></script>
<div class="p-4 bg-blue-700 text-white w-full">
<h1 class="text-2xl mb-10">Scoreboard</h1>
<section>
<div class="flex justify-between">
<div class="text-lg">Points: </div><div id="points" class="text-lg">0</div>
</div>
<div class="flex justify-between">
<div class="text-lg">Level: </div><div id="level" class="text-lg">1</div>
</div>
<div id="gameoverContainer" class="hidden mt-5">
<button class="py-2 px-4 bg-red-500 rounded-full text-lg flex items-center" id="restartBtn">
<svg class="mt-1" viewBox="0 0 512 512" width="20" height="20"> <path fill="currentColor" d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"> </path> </svg>
<span class="block pl-4">Game over</span>
</button>
</div>
</section>
<section class="my-8 max-w-max">
<h1 class="text-xl mb-5">Modes</h1>
<div class="flex justify-between flex-col w-48" id="modes">
<button id="easy" class="my-3 px-4 py-2 text-white rounded-3xl bg-green-400 hover:bg-green-600">Easy</button>
<button id="medium" class="my-3 px-4 py-2 text-white rounded-3xl bg-yellow-400 hover:bg-yellow-600">Medium</button>
<button id="hard" class="my-3 px-4 py-2 text-white rounded-3xl bg-red-500 hover:bg-red-700">Hard</button>
</div>
</section>
</div>
</body>
</html>