-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsnake.html
More file actions
79 lines (74 loc) · 2.07 KB
/
snake.html
File metadata and controls
79 lines (74 loc) · 2.07 KB
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
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas"
width="400"
height="400"
style="border:1px solid #d3d3d3;"
>
Your browser does not support the HTML5 canvas tag.</canvas
>
<script>
let x1 = 20,
y1 = 20,
x1_change = 0,
y1_change = 0,
width = 400,
height = 400,
foodx = 200,
foody = 200,
draw_food = true,
score = 0;
let snake = [];
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
// Fill with gradient
ctx.fillRect(x1, y1, 10, 10);
document.querySelector('body').addEventListener('keydown', myFunction);
setInterval(function() {
x1 += x1_change;
y1 += y1_change;
if (x1 < 10) x1 = width - 10;
if (x1 > width - 10) x1 = 10;
if (y1 < 10) y1 = height - 10;
if (y1 > height - 10) y1 = 10;
if (draw_food==true) {
foodx =(Math.floor(Math.random(5)*((width-100)/10))+5)*10;
foody = (Math.floor(Math.random(5)*((height-100)/10))+5)*10;
draw_food = false;
}
if (x1 == foodx & y1 == foody) {
score += 1;
console.log(score);
draw_food = true;
}
if(score<snake.length){
snake.shift();
snake.pop();
}
snake.push([x1,y1]);
ctx.clearRect(0, 0, width, height);
ctx.fillStyle= 'green';
for (let i=0;i<snake.length;i++)
ctx.fillRect(snake[i][0], snake[i][1], 10, 10);
ctx.fillStyle= 'red';
ctx.fillRect(foodx, foody, 10, 10);
}, 100);
function myFunction(e) {
if (e['key'] == 'ArrowUp') {
(y1_change = -10), (x1_change = 0);
}
if (e['key'] == 'ArrowDown') {
(y1_change = 10), (x1_change = 0);
}
if (e['key'] == 'ArrowLeft') {
(x1_change = -10), (y1_change = 0);
}
if (e['key'] == 'ArrowRight') {
(x1_change = 10), (y1_change = 0);
}
}
</script>
</body>
</html>