用html画布创建贪吃蛇,利用HTML5 canvas和jQuery制作的贪吃蛇网页小游戏：

Document

#canvas{

box-shadow: 0 0 10px #000;

margin: 20px auto;

display: block;

}

$(function(){

//canvas绘图的构造函数

function Draw(canvas){

this.canvas = canvas;//Draw私有属性传入dom获取canvas；

//检测兼容

this.check = function(){

if(!this.canvas.getContext){//如果this.canvas.getContext不存在就返回false如果存在就返回true

return false;

}else{

return true;

}

}

//绘图的主函数

this.main = function(){

//判断私有方法check()返回来的是什么如果是true就跳过

if(!this.check()){

console.log('浏览器不支持canvas')

}

//开整获取画笔

Draw.prototype.xt = this.canvas.getContext('2d')

//创建蛇

var snake = new Snake(this)

//画蛇

snake.draw();

//产生食物

var food = randFood(snake);

food.draw();

//动画定时器

Draw.prototype.timer = setInterval(function(){

//清除旧的图像

Draw.prototype.xt.clearRect(0,0,this.canvas.width,this.canvas.height)

//改变社的位置

if(!snake.move()){

clearInterval(Draw.prototype.timer)

alert('游戏结束')

}

//重新绘制蛇

snake.draw();

food.draw()

if(isRectHit(food,snake.head)){

Snake.prototype.isEatFood = true;

food = randFood(snake);

}

},100)

}

}

//创建矩形构造函数

function Rect(x,y,width,height,color){

this.x= x;//创建私有属性

this.y = y;

this.width = width;

this.height = height;

this.color = color;

}

//画矩形的方法

Rect.prototype.draw = function(){

Draw.prototype.xt.beginPath();//开始绘画

Draw.prototype.xt.fillStyle = this.color;//画笔颜色

Draw.prototype.xt.fillRect(this.x,this.y,this.width,this.height);//创建填充矩形

Draw.prototype.xt.strokeRect(this.x,this.y,this.width,this.height)//创建描边矩形

}

//创建蛇

function Snake(obj){

this.head = new Rect(obj.canvas.width/2-20,obj.canvas.height/2,40,40,'red')//蛇头，根据Rect构造函数创建的实例对象

this.body = []//蛇身

var x = this.head.x - 40; //定义变量

var y = this.head.y;//定义变量

//循环创建身体

for(var i=0;i<3;i++){

var rect = new Rect(x,y,40,40,'green');

this.body.push(rect);//通过数组方法添加蛇身

x -= 40;//蛇身位置的调整

}

}

//默认的移动方向

Snake.prototype.direction = 1;

//是否吃到十五

Snake.prototype.isEatFood = false;

//画蛇

Snake.prototype.draw = function(){

//画舌头

this.head.draw();

//画蛇身

for(var i=0;i

this.body[i].draw()

}

}

//动

Snake.prototype.move = function(){

if(this.head.x<40 || this.head.y<40 || this.head.x>$('#canvas')[0].width-80 ||this.head.y>$('#canvas')[0].height-80){

return false;

}

for(item in this.body){

if(isRectHit(this.head,this.body[item])){

return false;

}

}

//加一个头

var rect = new Rect(this.head.x,this.head.y,40,40,'green');

//添加到身体开始的地方

this.body.splice(0,0,rect)

//去掉尾巴

if(this.isEatFood){

Snake.prototype.isEatFood = false;

//产生食物

}else{

this.body.pop()//去除一个身体

}

//

//改变方向

switch(this.direction){

case 0://方向为0蛇向上走

this.head.y -=40;

break;

case 1://方向为1蛇向右走

this.head.x += 40;

break;

case 2://方向为2蛇向下走

this.head.y +=40;

break;

case 3://方向为3蛇向左走

this.head.x -=40;

break;

}

return true;

}

//添加键盘事件

$(window).keydown(function(e){

switch(e.keyCode){

case 37://键盘按左方向如果是右直接返回，如果不是方向变为左

if(Snake.prototype.direction == 1){

return;

}

Snake.prototype.direction = 3;

break;

case 38://键盘按左方向如果是下直接返回如，果不是方向变为上

if(Snake.prototype.direction == 2){

return;

}

Snake.prototype.direction = 0;

break;

case 39://键盘按左方向如果是左直接返回，如果不是方向变为右

if(Snake.prototype.direction == 3){

return;

}

Snake.prototype.direction = 1;

break;

case 40://键盘按左方向如果是上直接返回，如果不是方向变为下

if(Snake.prototype.direction == 0){

return;

}

Snake.prototype.direction = 2;

break;

}

})

//随机产生食物

function randFood(snake){

var isInSnake = true;//定义默认食物在蛇身上

//判断食物是否在蛇身上

while(isInSnake){

//产生两个位置

var x = getRandPosition(0,($('#canvas')[0].width-40)/40)*40;//x轴的位置

var y = getRandPosition(0,($('#canvas')[0].height-40)/40)*40;//y轴的位置

var food = new Rect(x,y,40,40,'green')//食物

isInSnake = false;

//判断位置是否在蛇头上

if(isRectHit(food,snake.head)){

isInSnake = true;

continue;

}

//判断位置是否在蛇身上

for(var i=0;i

if(isRectHit(food,snake.body[i])){

isInSnake = true;

break;

}

}

}

return food; //返回一个食物矩形

}

//创建随机坐标函数

function getRandPosition(min,max){

return Math.round(Math.random()*(max-min)+min)//返回一个随机的整数值

}

//碰撞检测参数为两个矩形

function isRectHit(rect1,rect2){

var R1_min_x = rect1.x;  //矩形1的x轴起始点

var R2_min_x = rect2.x; //矩形2的x轴起始点

var R1_min_y = rect1.y; //矩形1的y轴起始点

var R2_min_y = rect2.y; //矩形2的y轴起始点

var R1_max_x = rect1.x+40;//矩形1的x周的结束点

var R2_max_x = rect2.x+40;//矩形2的x周的结束点

var R1_max_y = rect1.y+40;//矩形1的y周的结束点

var R2_max_y = rect2.y+40;//矩形2的y周的结束点

var min_x = Math.max(R1_min_x,R2_min_x)//矩形1矩形2两个中最大的x轴起始点

var max_x = Math.min(R1_max_x,R2_max_x)//矩形1矩形2两个中最小的x轴结束点

var min_y = Math.max(R1_min_y,R2_min_y)//矩形1矩形2两个中最大的y轴起始点

var max_y = Math.min(R1_max_y,R2_max_y)//矩形1矩形2两个中最小的y轴结束点

//如果条件成立返回布尔值

if(min_x

return true;

}else{

return false;

}

}

//创建一个实例对象

var draw  = new Draw($('#canvas')[0])

//调用主函数

draw.main();

})