贪吃蛇

思路：

蛇

食物

食物被吃掉之后随机位置出现

食物不能随机在蛇身上

蛇头碰到蛇身就结束了，碰到墙也结束了。

碰到食物变长

蛇能动

蛇不能180度转头

蛇可以加速

1.神说：要有蛇画蛇

1.1蛇头

1.2蛇身

2.让蛇动起来

2.1默认的开启游戏的时候有一个方向

2.2键盘控制方向

2.3animate定时器

3.有食物随机投放

3.1产生随机的位置

3.2判断位置是否在蛇头或者蛇身上，如果在重新产生位置，如果不在画食物

4.吃食物

4.1判断迟到食物碰撞检测

4.2迟到食物添加蛇身

5.判断游戏结束

5.1蛇头碰到蛇身

5.2蛇头碰到墙壁

<!DOCTYPE html>

<html>

<head>

</head>

/* 设置canvas画布的阴影颜色为黑色居中并且向下移动20px*/

canvas{

box-shadow: 0 0 10px 10px #000;

display: block;

margin: 20px auto;

}

</style>

<body>

</body>

$(function(){

/**

[Draw description]canvas 绘图的构造函数

@param{[type]} canvas [description]

**/

function Draw(canvas){

this.canvas = canvas;// 这里通过Canvas获取canvas对象

/**

[check description]检测浏览器是否支持canvas

@return bool fals支持e 表示不支持 true表示

**/

this.check = function(){

//检测浏览器是否支持canvas

if(!this.canvas.getContext){

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

return false;//返回false

}else{

return true;//否则返回true

}

/**

[main description]canvas 绘图的主函数

@return{[type]} [description]

**/

this.main = function(){

//检测兼容

if(!this.check()){

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

return false;//返回false

}

//获取canvas绘图的上下文:画笔

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

// var _this=this;

//绘制蛇的初始图像

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);

}

},80);

}

/**

*[Rect description]

* @param number x 矩形起始点x坐标

* @param number y 矩形起始点y坐标

* @param number width 矩形的宽度

* @param number height 矩形的高度

* @param string color 矩形的填充颜色

* @param object xt 画笔上下文

**/

//添加蛇默认的移动方向，右,公有的属性，任何地方能够修改访问，并且和实例共享

Snake.prototype.direction=1;

//定义一个是否吃到食物的标记

Snake.prototype.isEatFood=false;

//画蛇的方法

Snake.prototype.draw=function(){

//画蛇头

this.head.draw();

//画蛇身

for(var i=0;i<this.body.length;i++){

this.body[i].draw(); //判断当前尾部方向

}

//让蛇动起来

Snake.prototype.move=function(){

//检测蛇头与蛇身

for(var i=0;i<this.body.length;i++){

console.log(this.body[i])

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

return false;

}

//检测碰撞到墙壁

if(this.head.x<40||this.head.y<40||

this.head.x>$('#canvas')[0].width-40-40||

this.head.y>$('#canvas')[0].height-40-40){

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,'gray');//这个蛇头长40px，宽40Px，颜色为红色

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

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

//去掉一个尾巴

if(Snake.prototype.isEatFood){

Snake.prototype.isEatFood=false;

// 如果吃到食物了就重新给位置，即末尾添加一节，即蛇变长

// 重新随机产生食物

}else{

this.body.pop();//如果没吃到末尾就砍掉一节，即蛇长度不变

}

switch(this.direction){

case 0:

this.head.y-=40//向上

break;

case 1:

this.head.x+=40;//向下

break;

case 2:

this.head.y+=40//向右

break;

case 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 Rect(x,y,width,height,color){

this.x = x;//定义Rect的x坐标

this.y = y;//定义Rect的y坐标

this.width = width; //，宽

this.height = height;//，高

this.color = color;//颜色

}

/**

* [draw description] 画矩形

* @return

**/

//画方块的方法

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,obj.canvas.height/2,40,40,'red');

//蛇身

this.body=[];//表示多个身体

var x=this.head.x-40;//表示这个蛇身的x坐标=蛇头的x-40

var y=this.head.y;//表示这个蛇身=蛇头的y坐标

//循环创建身体

for(var i=0;i<3;i++){//画出3个方块，设置成灰色

var rect=new Rect(x,y,40,40,'gray');//创建新的身体，定义了x,y宽高颜色为灰色

this.body.push(rect);//将该函数添加到数组里面

x-=40;//x=x-40

}

//随机产生食物

function randFood(snake){

//是否在蛇身上

isInSnake = true;

while(isInSnake){

//产生两个位置 x,y

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

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

//创建食物矩形

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

isInSnake = false;

//判断这个位置是否在蛇上.

//是否是蛇头

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

isInSnake = true;

continue;

}

//是否是蛇身

for(var i=0;i<snake.body.length;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;

var R2_min_x = rect2.x;

var R1_min_y = rect1.y;

var R2_min_y = rect2.y;

var R1_max_x = rect1.x+40;

var R2_max_x = rect2.x+40;

var R1_max_y = rect1.y+40;

var R2_max_y = rect2.y+40;

var min_x = Math.max(R1_min_x,R2_min_x);

var max_x = Math.min(R1_max_x,R2_max_x);

var min_y = Math.max(R1_min_y,R2_min_y);

var max_y = Math.min(R1_max_y,R2_max_y);

if(min_x<max_x && min_y<max_y){

return true;

}else{

return false;

}

var draw = new Draw($('#canvas')[0]);//创建一个绘图的实例对象

draw.main();//调用main绘制图像

})

</script>

</body>

</html>

推荐阅读更多精彩内容