snake/index.html at master · godisdeadLOL/snake · GitHub

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
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vite App</title>

		<style>
			/* @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap"); */

			@font-face {
				font-family: "Miracode";
				src: url("/Miracode.ttf");
			}

			html {
				overflow: hidden-x;
			}
			body {
				background-color: #1f253d;
				padding: 0px;
				margin: 0px;

				overflow: hidden-x;

				font-family: "Miracode";
				color: #fff;
				font-size: 16px;
			}

			canvas {
				max-width: 100%;
				border-radius: 16px;
				max-height: 512px;
			}

			#play_button:hover {
				cursor: pointer;
				user-select: none;
				color: yellow;
			}

			#canvas_wrapper {
				padding-top: 64px;
				padding-bottom: 64px;
				min-height: 100dvh;
				box-sizing: border-box;

				padding-left: 16px;
				padding-right: 16px;
			}

			#joystick_body {
				pointer-events: none;

				position: absolute;
				left: 0px;
				top: 0px;
				width: 128px;
				height: 128px;
				border-radius: 100%;
				border: solid #ffffff 2px;
				transform: translate(-50%, -50%);
				display: none;
			}

			#joystick_handle_wrapper {
				/* pointer-events: none; */

				position: relative;
				left: 50%;
				top: 50%;
			}

			#joystick_handle {
				/* pointer-events: none; */

				position: relative;
				width: 32px;
				height: 32px;
				border-radius: 100%;
				border: solid #ffffff 2px;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<script type="module" src="src/main.ts"></script>

		<div style="z-index: 10; position: absolute; left: 0; right: 0; padding: 16px; display: flex; gap: 16px">
			<div id="play_button">Press to Start</div>
			<div style="margin-left: auto">Score: <span id="score_value"> 0 </span></div>
			<div>Highscore: <span id="highscore_value">0</span></div>
		</div>

		<div style="overflow: hidden; position: relative">
			<div id="joystick_body">
				<div id="joystick_handle_wrapper"><div id="joystick_handle"></div></div>
			</div>

			<div id="canvas_wrapper" style="display: flex; justify-content: center; align-items: center; touch-action: none">
				<div id="content"></div>
			</div>
		</div>
	</body>
</html>