思路：
* 1制肮、分別構(gòu)造方塊、蛇递沪、食物三個對象
* 2豺鼻、蛇由一個一個小方塊組成，食物隨機生成
* 3款慨、將蛇身的每一個方塊排列放在數(shù)組中
* 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");
/*構(gòu)造一個方塊*/
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);
};
/*構(gòu)造一個蛇的對象*/
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(){
//添加一個方塊届良，和蛇的頭部重合，然后將頭部根據(jù)點擊方向向前移動
var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,'green');
this.snakeArr.splice(1,0,rect);
//判斷蛇的頭部和食物是否產(chǎn)生碰撞圣猎，是就重新生成一個食物士葫，否者就刪除最后一個方塊
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;
}
//如果蛇的頭部超出畫布邊界送悔，就清除定時器慢显，結(jié)束游戲
if(snake.head.x > oC.width || snake.head.y > oC.height || snake.head.x < 0 || snake.head.y < 0){
clearInterval(timer);
}
//如果蛇頭與蛇身相撞，清除定時器欠啤，結(jié)束游戲
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);
}
}
};
//實例化一條蛇荚藻，初始狀態(tài)
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();
};
//隨機數(shù)函數(shù)
function random(m,n){
return parseInt(Math.random()*(n-m)+m);
}
//生成食物函數(shù)
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;
}
//判斷食物與蛇頭碰撞函數(shù)
function Eat(){
if(snake.head.x === food.x && snake.head.y === food.y){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
效果圖：
image.png
感謝小pxu
