-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsnake.html
102 lines (93 loc) · 2.94 KB
/
snake.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Javascript Snake Game</title>
<link href="https://img.icons8.com/color/48/000000/javascript.png" rel="icon">
<link href="https://img.icons8.com/color/48/000000/javascript.png" rel="apple-touch-icon">
</head>
<body>
<div style="text-align: center">
<canvas id="gc" width="600" height="500" style="border:1px solid #000000;margin-left:auto;
margin-right:auto;"></canvas>
</div>
<script>
window.onload = function() {
canv = document.getElementById("gc");
ctx = canv.getContext("2d");
document.addEventListener("keydown", keyPush);
setInterval(game, 1000 / 15);
}
px = py = 10;
gs = tc = 20;
ax = ay = 15;
xv = yv = 0;
trail = [];
tail = 5;
function game() {
px += xv;
py += yv;
if (px < 0) {
px = tc - 1;
}
if (px > tc - 1) {
px = 0;
}
if (py < 0) {
py = tc - 1;
}
if (py > tc - 1) {
py = 0;
}
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canv.width, canv.height);
ctx.fillStyle = "lime";
for (var i = 0; i < trail.length; i++) {
ctx.fillRect(trail[i].x * gs, trail[i].y * gs, gs - 2, gs - 2);
if (trail[i].x == px && trail[i].y == py) {
tail = 5;
}
}
trail.push({
x: px,
y: py
});
while (trail.length > tail) {
trail.shift();
}
if (ax == px && ay == py) {
tail++;
ax = Math.floor(Math.random() * tc);
ay = Math.floor(Math.random() * tc);
}
ctx.fillStyle = "red";
ctx.fillRect(ax * gs, ay * gs, gs - 2, gs - 2);
}
function keyPush(evt) {
switch (evt.keyCode) {
case 37:
xv = -1;
yv = 0;
break;
case 38:
xv = 0;
yv = -1;
break;
case 39:
xv = 1;
yv = 0;
break;
case 40:
xv = 0;
yv = 1;
break;
}
}
</script>
</body>
<div style="text-align: center;">
<h3 style="color:blue"><b> Made with ♥ From Plain browser JavaScript </b></h3>
<p style="font-weight: bolder;text-decoration-color: firebrick;font-size: large;">© Copyright 2020 | Coded by <strong> Devanshu Vashishtha </strong> | All Rights Reserved.</p>
</div>
</html>