$(document).ready(function(){
//Canvas stuff
var canvas = $("#canvas")[0];
var ctx = canvas.getContext("2d");
var w = $("#canvas").width();
var h = $("#canvas").height();
//Lets save the cell width in a variable for easy control
var cw = 10;
var d;
var food;
var score;
//Lets create the snake now
var snake_array; //an array of cells to make up the snake
var isgameover;
function init()
{
d = "right"; //default direction
create_snake();
create_food(); //Now we can see the food particle
//finally lets display the score
score = 0;
//Lets move the snake now using a timer which will trigger the paint function
//every 60ms
if(typeof game_loop != "undefined") clearInterval(game_loop);
game_loop = setInterval(paint, 60);
isgameover = false;
}
init();
function create_snake()
{
var length = 5; //Length of the snake
snake_array = []; //Empty array to start with
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});
}
}
//Lets create the food now
function create_food()
{
food = {
x: Math.round(Math.random()*(w-cw)/cw),
y: Math.round(Math.random()*(h-cw)/cw),
};
//This will create a cell with x/y between 0-44
//Because there are 45(450/10) positions accross the rows and columns
}
function paint_gameover(){
ctx.fillStyle = 'red';
//ctx.fillText("Game Over",50,h-200);
ctx.font="bold 50px sans-serif";
ctx.strokeText("Game Over",w/2-70,h/2);
ctx.font="bold 20px sans-serif";
ctx.fillText("replay",w/2,h/2+20);
isgameover=true;
}
//Lets paint the snake now
function paint()
{
//To avoid the snake trail we need to paint the BG on every frame
//Lets paint the canvas now
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = "black";
ctx.strokeRect(0, 0, w, h);
isgameover=false;
//The movement code for the snake to come here.
//The logic is simple
//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.
//We will increment it to get the new head position
//Lets add proper direction based movement now
if(d == "right") nx++;
else if(d == "left") nx--;
else if(d == "up") ny--;
else if(d == "down") ny++;
//Lets add the game over clauses now
//This will restart the game if the snake hits the wall
//Lets add the code for body collision
//Now if the head of the snake bumps into its body, the game will restart
if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
{
paint_gameover();
//restart game
//Lets organize the code a bit now.
return;
}
//Lets write the code to make the snake eat the food
//The logic is simple
//If the new head position matches with that of the food,
//Create a new head instead of moving the tail
if(nx == food.x && ny == food.y)
{
var tail = {x: nx, y: ny};
score++;
//Create new food
create_food();
}
else
{
var tail = snake_array.pop(); //pops out the last cell
tail.x = nx; tail.y = ny;
}
//The snake can now eat the food.
snake_array.unshift(tail); //puts back the tail as the first cell
for(var i = 0; i < snake_array.length; i++)
{
var c = snake_array[i];
//Lets paint 10px wide cells
paint_cell(c.x, c.y);
}
//Lets paint the food
paint_cell(food.x, food.y);
//Lets paint the score
var score_text = "Score: " + score;
ctx.fillText(score_text, 5, h-5);
}
//Lets first create a generic function to paint cells
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)
{
//This function will check if the provided x/y coordinates exist
//in an array of cells or not
for(var i = 0; i < array.length; i++)
{
if(array[i].x == x && array[i].y == y)
return true;
}
return false;
}
//Lets add the keyboard controls now
$(document).keydown(function(e){
if (isgameover) return;
var key = e.which;
//We will add another clause to prevent reverse gear
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";
//The snake is now keyboard controllable
})
$("#canvas").click(function(){
if(isgameover){
init();
}
})
})
分享到:
相关推荐
javaScript贪吃蛇源代码,详细的javaScript贪吃蛇代码,里面都写了注释
JavaScript贪吃蛇小游戏
js贪吃蛇源码下载
原生Javascript贪吃蛇代码
原生JavaScript贪吃蛇完美实现 思路绝对让你眼前一亮!
js贪吃蛇特效是一款用原生js写的一个简单的贪吃蛇游戏代码。 js贪吃蛇特效演示图:
纯js 贪吃蛇 游戏源码。用了canvas。没有做手机滑屏功能。有3种难度选择。
JS贪吃蛇闯关卡小游戏,贪吃蛇网页游戏,可选择关卡(1-5),调整游戏速度。
javascript贪吃蛇网页小游戏
Phaser的伟大的开源游戏开发框架,使用HTML5创建游戏。这是一款利用Phaser.js制作仿Nokia经典的贪吃蛇游戏。
用 JS方法做得贪吃蛇,采用了JQuary技术和ExTjs技术,娱乐还能练习编程能力,本人测试成功
javascript贪吃蛇游戏,欢迎下载!
瞎写的,很多功能没实现,比如暂停开始,本来想整合到一起
使用canvas 和js实现的不到100行的代码。 学习js时候个人做的贪吃蛇的小游戏,可以供大家参考。 。。。。。。。。。。。。。。
自己编写,大家举一反三,共同学习!我的邮箱 lizhilimaster@163.com,可以访问我的仓库码云仓库 https://github.com/lizhilicctv/ github仓库 https://gitee.com/lizhiliwo
一 款 超 好 玩 的 纯 手 工 版 的 贪 吃 蛇 游 戏 感 觉 还 行,可 以 下 载 参 考
html+js+css写的贪吃蛇程序 注释详细
精美javascript贪吃蛇代码。下载即玩。可以调节速度,启动,暂停等功能
javascript贪吃蛇(面向对象)
纯 javascript网页贪吃蛇源码下载 几百行 源码不多,有注释,浏览器打开可运行