思路：
* 1、分别构造方块、蛇、食物三个对象
* 2、蛇由一个一个小方块组成，食物随机生成
* 3、将蛇身的每一个方块排列放在数组中
* 4、始终是蛇头在移动方向，添加的新的方块放在蛇头的后面，然后去掉蛇尾（既最后一个小方块）
* 如果整体移动的话在拐弯的时候就麻烦了，这个方法正好
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#canvasOne{
background: #cccccc;
}
</style>
</head>
<body>
<canvas id="canvasOne" width="800" height="600"></canvas>
<script>
var oC = document.getElementById("canvasOne");
var gd = oC.getContext("2d");
/*构造一个方块*/
function Rect(x,y,w,h,cl){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = cl;
}
/*添加画方块的方法*/
Rect.prototype.draw = function (){
gd.beginPath();
gd.fillStyle = this.color;
gd.fillRect(this.x,this.y,this.w,this.h);
};
/*构造一个蛇的对象*/
function Snake(){
var snakeArr = [];
for(var i = 0; i < 5; i++){
var rect = new Rect(i*20,0,20,20,'green');
snakeArr.splice(0,0,rect);
}
var head = snakeArr[0];
head.color = 'yellow';
this.head = head;
this.snakeArr = snakeArr;
this.direction = 39;
}
/*添加画蛇的方法*/
Snake.prototype.draw = function(){
for(var i = 0;i < this.snakeArr.length; i++){
this.snakeArr[i].draw();
}
};
/*添加蛇移动的方法*/
Snake.prototype.move = function(){
//添加一个方块，和蛇的头部重合，然后将头部根据点击方向向前移动
var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,'green');
this.snakeArr.splice(1,0,rect);
//判断蛇的头部和食物是否产生碰撞，是就重新生成一个食物，否者就删除最后一个方块
if(Eat()){
food = new Food();
}else{
this.snakeArr.pop();
}
//判断键盘点击的方向，改变蛇头的位置
switch (this.direction){
case 38:
this.head.y -= this.head.h;break;
case 40:
this.head.y += this.head.h;break;
case 37:
this.head.x -= this.head.w;break;
case 39:
this.head.x += this.head.w;break;
default:
break;
}
//如果蛇的头部超出画布边界，就清除定时器，结束游戏
if(snake.head.x > oC.width || snake.head.y > oC.height || snake.head.x < 0 || snake.head.y < 0){
clearInterval(timer);
}
//如果蛇头与蛇身相撞，清除定时器，结束游戏
for(var i = 1; i < snake.snakeArr.length; i++){
if(snake.head.x === snake.snakeArr[i].x && snake.head.y === snake.snakeArr[i].y){
clearInterval(timer);
}
}
};
//实例化一条蛇，初始状态
var snake = new Snake();
snake.draw();
//随机生成一个食物
var food = new Food();
//添加定时器，让蛇移动
var timer = setInterval(function(){
gd.clearRect(0,0,oC.width,oC.height);
food.draw();
snake.move();
snake.draw();
},1000);
//上右下左 38,39,40,37，为了避免蛇直接反向，在case里面需要加一个判断
document.onkeydown = function(event){
var ev = event || window.event;
switch (ev.keyCode){
case 38:
if(snake.direction !== 40){
snake.direction = 38;
break;
}
case 40:
if(snake.direction !== 38){
snake.direction = 40;
break;
}
case 37:
if(snake.direction !== 39){
snake.direction = 37;
break;
}
case 39:
if(snake.direction !== 37){
snake.direction = 39;
break;
}
default:
break;
}
ev.preventDefault();
};
//随机数函数
function random(m,n){
return parseInt(Math.random()*(n-m)+m);
}
//生成食物函数
function Food(){
var food_bool = true;
while(food_bool){
food_bool = false;
var foodX = random(0,oC.width/20-1);
var foodY = random(0,oC.height/20-1);
var rect = new Rect(foodX*20, foodY*20, 20, 20, 'green');
for(var i = 0;i < snake.snakeArr.length; i++){
if(snake.snakeArr[i].x === foodX && snake.snakeArr[i].y === foodY){
food_bool = true;
break;
}
}
}
return rect;
}
//判断食物与蛇头碰撞函数
function Eat(){
if(snake.head.x === food.x && snake.head.y === food.y){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
效果图：
image.png
感谢小pxu
