arcade_snake/index.html at master · sameer-manek/arcade_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
107
108
<html>
	<head>
		<title>Snake</title>

		<style>
			* {
                margin: 0;
                padding: 0;
                font-family: monospace;
                box-sizing: border-box;
                font-size: 16px;
            }
            body, html {
                background-color: #002C2B;
                color: white;
            }
			.container {
				width: 960px;
				margin:  2rem auto;
				text-align: center;
			}

			.container .grid {
				display: inline-block;
				margin: 1rem auto;
				border: 5px solid black;
				background-color: whitesmoke;
			}

			.container .grid .row {
				display: flex;
			}

			.container .grid .cell {
				background-color: transparent;
				display: inline-block;
				height: 1rem;
				width: 1rem;
				border: 1px solid silver;
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div class="hud">
				<h1>Snake</h1>
				Score: <span id="score"></span>
			</div>

			<div class="grid" id="grid"></div>

			<div id="message">
				<img src="./keys.png" alt="" height="100px">
				<br>
				<b>Use arrow keys to move</b>
			</div>


		</div>

		<script>
			// utils
			function random(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			}

			function toggle_cell (pos, color) {
				let row = document.getElementById('grid').children[pos[0]];
				let cell = row.children[pos[1]];
				cell.style.backgroundColor = color;
				cell.style.border = "1px solid " + color;
				if (color === "transparent")
					cell.style.border = "1px solid silver";

			}

			function add_matx(m1, m2) {
				if (m1.length === m2.length) {
					for(let i = 0; i < m1.length; i++) {
						m1[i] += m2[i];
					}
				}

				return m1;
			}

			function compare_matx(m1, m2) {
				let flag = true
				if (m1.length === m2.length) {
					for(let i = 0; i < m1.length; i++) {
						if (m1[i] != m2[i]) {
							flag = false;
							break;
						}
					}
				}
				else {
					flag = false;
				}

				return flag;
			}
		</script>
		<script src="./script.js"></script>
	</body>
</html>