forked from shivanshuag/codelab-snake
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (100 loc) · 3.8 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
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
109
110
<body>
<canvas id="myCanvas" width="450" height="450"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var w = canvas.width
var h = canvas.height
context.fillStyle= "white";
context.fillRect(0 , 0, w, h);
context.strokeStyle = "black";
context.strokeRect(0, 0, w, h);
snake_array = []; //Empty array to start with
var d = "right"; //initial direction of the snake
var food;
var cw = 10;//cell width
var game_loop = null;
function paint_cell(x,y) {
context.fillStyle = "blue";
context.fillRect(x*cw, y*cw, cw, cw);
context.strokeStyle = "white";
context.strokeRect(x*cw, y*cw, cw, cw);
}
function create_food() {
food = {
x: Math.floor(Math.random()*(w-cw)/cw),
y: Math.floor(Math.random()*(h-cw)/cw),
};
//This will create a cell with x and y between 0-44
//Because there are 45(450/10) positions accross the rows and columns
}
function create_snake() {
snake_array = [];
var length = 5; //Length of the snake
for(var i = length-1; i>=0; i--) {
//This will create a horizontal snake starting from the top left
snake_array.push({x: i, y:0});
}
}
function paint() {
context.fillStyle= "white";
context.fillRect(0 , 0, w, h);
context.strokeStyle = "black";
context.strokeRect(0, 0, w, h);
for(var i = 0; i < snake_array.length; i++) {
var c = snake_array[i];
paint_cell(c.x,c.y)
}
paint_cell(food.x, food.y);
//Pop out the tail cell and place it infront of the head cell
var nx = snake_array[0].x;
var ny = snake_array[0].y;
//These were the position of the head cell.
// Check if a collision has occured
if(nx==-1 || nx==w/cw || ny==-1 || ny==h/cw || check_collision(nx, ny, snake_array)) {
// clear the game loop
clearInterval(game_loop);
init();
return;
}
//We will increment it to get the new head position
if(d == "right") nx++;
else if(d == "left") nx--;
else if(d == "up") ny--;
else if(d == "down") ny++;
if(nx == food.x && ny == food.y) {
var tail = {x: nx, y: ny};
//Create new food
create_food();
}
else {
var tail = snake_array.pop(); //pops out the last cell
tail.x = nx; tail.y = ny;
}
snake_array.unshift(tail); //puts back the tail as the first cell
}
function check_collision(x, y, array) {
//This function will check if the provided x/y coordinates exist
//in an array of cells or not, excluding the head
for(var i = 1; i < array.length; i++) {
if(array[i].x == x && array[i].y == y)
return true;
}
return false;
}
document.onkeydown = function(e) {
var key = e.which;
if(key == "37" && d != "right") d = "left";
else if(key == "38" && d != "down") d= "up";
else if(key == "39" && d != "left") d= "right";
else if(key == "40" && d != "up") d= "down";
};
function init() {
d = "right"; //default direction
create_snake();
create_food();
game_loop = setInterval(paint, 60);
}
init();
</script>
</body>