Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
158 lines (132 sloc) 5.22 KB
<!DOCTYPE html>
<html>
<head>
<title>Learning the basics of canvas</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<center>
<h1 style="font-family: Helvetica">Snake - Gaurav </h1>
<canvas id="canvas" width="500" height="500">
</canvas>
<script type="text/javascript">
$(document).ready(function() {
//Canvas
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
//Cell width for easy control
var cw = 10;
var d;
var food;
//Create snake
var snake_array; //An array of cells to make up the snake
function init()
{
d = "right"; //Default Direction
create_snake();
create_food();
score = 0;
//Set up game loop
if(typeof game_loop != "undefined")
clearInterval(game_loop);
game_loop = setInterval(paint, 60);
}
init();
function create_snake()
{
var length = 5; //Length of the snake
snake_array = [];
for (var i = length - 1; i >= 0; i--)
{
snake_array.push({
x: i,
y: 0
});
}
}
function create_food()
{
food = {
x: Math.round(Math.random()*(w-cw)/cw),
y: Math.round(Math.random()*(h-cw)/cw),
}
}
//Paint Snake
function paint()
{
//Repaint background everytime
//Paint canvas
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
//Move snake here
var nx = snake_array[0].x;
var ny = snake_array[0].y;
if (d == "right")
nx++;
else if (d == "left")
nx--;
else if (d == "up")
ny--;
else if (d == "down")
ny++;
if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
{
//Restart
init();
return;
}
if (nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
create_food();
}
else
{
var tail = snake_array.pop();
tail.x = nx;
tail.y = ny;
}
snake_array.unshift(tail);
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);
var score_text = "Score: " + score;
ctx.font = "20px sans-serif";
ctx.fillText(score_text, 5, h-5);
}
function paint_cell(x, y)
{
ctx.fillStyle = "blue";
ctx.fillRect(x*cw, y*cw, cw, cw);
ctx.strokeStyle = "white";
ctx.strokeRect(x*cw, y*cw, cw, cw);
}
function check_collision(x, y, array)
{
for(var i = 0; i < array.length; i++)
{
if(array[i].x == x && array[i].y == y)
return true;
}
return false;
}
$(document).keydown(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";
})
});
</script>
</center>
</body>
</html>