window.addEventListener("keydown", moveSnake, false);
var game_over = false;
var snake = new Array(4);
var snakeLen = 4;
var dir = "right";
var food = "";
var level = new Array();
var total_height = 640;
var total_width = 640;
var lvl_width = 20;
var lvl_height = 20;
var speed = 16;
snakeHeadImage = new Image();
snakeHeadImage.src = "resources/head.png";
snakeBodyImage = new Image();
snakeBodyImage.src = "resources/body.png";
snakeTailImage = new Image();
snakeTailImage.src = "resources/tail.png";
//food
foodImage = new Image();
foodImage.src = "resources/food.png";
create_snake();
create_food();
for (i = 0; i < lvl_width; i++) {
level[i] = new Array(lvl_height);
for (var ii = 0; ii < lvl_height; ii++) {
level[i][ii] = -1;
}
}
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000);
};
})();
var the_date = new Date();
var test1 = the_date.getTime();
var stamp = the_date.getTime() + 250;
function animate() {
the_date = new Date();
test1 = the_date.getTime();
if (stamp <= test1) {
move_snake();
the_date = new Date();
stamp = the_date.getTime() + 250;
}
if (game_over == false) {
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
displayText("Score: " + (snakeLen - 4));
display();
} else {
displayText("You so Sux.. Game Over homie");
}
//context.drawImage(aniblock, aniblock_x, aniblock_y);
// request new frame
requestAnimFrame(function() {
animate();
});
}
function displayText(what) {
context.font = "30px Arial";
context.fillText(what, 50, 50);
}
function checkSnakeCollide() {
if (snake[0].xx == food.xx && snake[0].yy == food.yy) {
create_food();
return true;
} else {
//if head moving right
if (dir == "right") {
if (snake[0].xx > lvl_width - 1) {
game_over = true;
}
} else if (dir == "left") {
if (snake[0].xx < 0) {
game_over = true;
}
} else if (dir == "up") {
if (snake[0].yy <= -1) {
game_over = true;
}
} else if (dir = "down") {
if (snake[0].yy >= lvl_height) {
game_over = true;
}
}
for (i = 2; i < snakeLen; i++) {
if ((snake[0].xx == snake[i].xx) && (snake[0].yy == snake[i].yy)) {
game_over = true;
break;
}
}
return false;
}
}
setTimeout(function() {
animate();
}, 1000);
function moveSnake(e) {
switch (e.keyCode) {
case 37:
if (dir != "right") {
dir = "left";
}
break;
case 38:
if (dir != "down") {
dir = "up";
}
break;
case 39:
if (dir != "left") {
dir = "right";
}
break;
case 40:
if (dir != "up") {
dir = "down";
}
break;
}
}
function checkAllowMove(x, y) {
if (x < 32) {
var x_index = 0;
} else {
var x_index = Math.round(x / 32);
}
if (y < 32) {
var y_index = 19;
} else {
var y_index = (total_height / 32) - Math.round(y / 32);
}
if (level[x_index][y_index] == -1) {
return true;
} else {
return false;
}
}
function create_food() {
var x = 0;
var y = 0;
var recreate = false;
do {
recreate = false;
x = Math.floor((Math.random() * (lvl_width - 1)));
y = Math.floor((Math.random() * (lvl_height - 1)));
for (i = 0; i < snakeLen; i++) {
if ((snake[i].xx == x) && (snake[i].yy == y)) {
recreate = true;
break;
}
}
} while (recreate == true);
food = {
xx: x,
yy: y
};
}
function create_snake() {
//var x = Math.floor((Math.random() * (lvl_width-1)));
//var y = Math.floor((Math.random() * (lvl_height-1)));
snake[0] = {
xx: 4,
yy: 1
};
snake[1] = {
xx: 3,
yy: 1
};
snake[2] = {
xx: 2,
yy: 1
};
snake[3] = {
xx: 1,
yy: 1
};
dir = "right";
}
function move_snake() {
var temp_x = 0;
var temp_y = 0;
var temp_xx = 0;
var temp_yy = 0;
var swap = true;
//move snake forward
for (var ii = 0; ii < snakeLen; ii++) {
if (ii == 0) {
temp_x = snake[ii].xx;
temp_y = snake[ii].yy;
//if head moving right
if (dir == "right") {
snake[0] = {
xx: (snake[0].xx + 1),
yy: snake[0].yy
};
} else if (dir == "left") {
snake[0] = {
xx: (snake[0].xx - 1),
yy: snake[0].yy
};
} else if (dir == "up") {
snake[0] = {
xx: snake[0].xx,
yy: (snake[0].yy - 1)
};
} else if (dir = "down") {
snake[0] = {
xx: snake[0].xx,
yy: (snake[0].yy + 1)
};
}
if (checkSnakeCollide()) {
snake.push({
xx: snake[(snake.length - 1)].xx,
yy: snake[(snake.length - 1)].yy
});
snakeLen++;
}
} else {
if (swap == true) {
temp_xx = snake[ii].xx;
temp_yy = snake[ii].yy;
snake[ii] = {
xx: temp_x,
yy: temp_y
};
swap = false;
} else {
temp_x = snake[ii].xx;
temp_y = snake[ii].yy;
snake[ii] = {
xx: temp_xx,
yy: temp_yy
};
swap = true;
}
}
}
}
function display() {
for (var i = 0; i < snakeLen; i++) {
if (i == 0) {
switch (dir) {
case "left":
context.drawImage(snakeHeadImage, (snake[i].xx * 32), (snake[i].yy * 32));
break;
case "right":
drawRotatedImage(snakeHeadImage, (snake[i].xx * 32), (snake[i].yy * 32), 180);
break;
case "up":
drawRotatedImage(snakeHeadImage, (snake[i].xx * 32), (snake[i].yy * 32), 90);
break;
case "down":
drawRotatedImage(snakeHeadImage, (snake[i].xx * 32), (snake[i].yy * 32), 270);
break;
}
} else if (i == (snakeLen - 1)) {
//following left
if (snake[i].xx > snake[i - 1].xx) {
context.drawImage(snakeTailImage, (snake[i].xx * 32), (snake[i].yy * 32));
}
//following right
else if (snake[i].xx < snake[i - 1].xx) {
drawRotatedImage(snakeTailImage, (snake[i].xx * 32), (snake[i].yy * 32), 180);
}
//following up
else if (snake[i].yy > snake[i - 1].yy) {
drawRotatedImage(snakeTailImage, (snake[i].xx * 32), (snake[i].yy * 32), 90);
}
//following down
else if (snake[i].yy < snake[i - 1].yy) {
drawRotatedImage(snakeTailImage, (snake[i].xx * 32), (snake[i].yy * 32), 270);
}
} else {
context.drawImage(snakeBodyImage, (snake[i].xx * 32), (snake[i].yy * 32));
}
}
context.drawImage(foodImage, (food.xx * 32), (food.yy * 32));
}
function drawRotatedImage(image, x, y, angle) {
var TO_RADIANS = Math.PI / 180;
// save the current co-ordinate system
// before we screw with it
context.save();
// move to the middle of where we want to draw our image
context.translate(x, y);
// rotate around that point, converting our
// angle from degrees to radians
context.rotate(angle * TO_RADIANS);
// draw it up and to the left by half the width
// and height of the image
context.drawImage(image, -(image.width / 2), -(image.height / 2));
// and restore the co-ords to how they were when we began
context.restore();
}
LEGAL: Code sample from http://www.javascriptsource.com/games/html5-snake-by-william-hughes-150123105516.html, by William Hughes.
Reproduced with permission.
Copyright 1999-2017 QuinStreet, Inc. All rights reserved.