之前没有写博客的习惯，这是我的第一个博客，有些的不好的地方，希望大家多多提意见
js版的贪吃蛇相对比较简单，废话不多说直接上代码，有需要注意的地方我会标红，github源码地址https://github.com/masterChunlinHan/snake.git
所有的代码都在一个文件中，因为总共就没多少代码
1，首先定义几个后面要用到的全局变量
地图定义为全局的是因为：后面的食物和蛇都要加到地图上，而添加的方法在食物和蛇各自的构造器中，需要地图是全局的才能被访问到
食物定义成全局的是因为：在蛇的移动方法中判断是否吃到食物，需要知道食物的坐标
蛇定义成全局的原因比较特殊：后面用键盘控制蛇头的方向，是window调用蛇的移动方法，在这个方法中this不再指向当前的对象(即蛇)，而是window，所以要把蛇提升为全局变量
定时器定义成全局的是因为：在别的方法中需要取消定时或开始定时，比如暂停，还有吃到食物后更新速度加快
var map;//地图
var food;//食物
var snake;//蛇
var timer;//定时器
var time=500;//定时器定的时间，默认为500ms
2，地图构造器
function Map(){
this.width= 600; //地图的宽
this.height = 400; //地图的高
this.position = 'relative'; //地图定位方式，这里为相对定位
this.backgroundColor = '#ccc'; //地图背景色
this.map=null; //一来用来保存地图，二来可以判断地图是不是已经存在，以免重复创建
//显示地图的方法
this.showMap = function(){
if(this.map===null){
//加个判断保证地图只会创建一次
this.map = document.createElement('div');
document.body.appendChild(this.map);
}
this.map.style.width = this.width+'px';
this.map.style.height = this.height + 'px';
this.map.style.backgroundColor = this.backgroundColor;
this.map.style.position = this.position;
}
}
3，食物构造器,原理基本上跟地图构造器一样
function Food(){
this.width= 20;
this.height = 20;
this.x = 2; //这不是实际坐标，而是以食物的宽为单位
this.y = 2;
this.position = 'absolute';
this.backgroundColor = 'red';
this.food=null;
this.showFood=function(){
if(this.food===null){
this.food = document.createElement('div');
map.map.appendChild(this.food); //把食物添加到地图上
}
this.x = Math.floor(Math.random()*30); //食物的位置是随机的
this.y = Math.floor(Math.random()*20);
this.food.style.width = this.width+'px';
this.food.style.height = this.height + 'px';
this.food.style.backgroundColor = this.backgroundColor;
this.food.style.position = this.position;
this.food.style.left = this.width*this.x + 'px';
this.food.style.top = this.height*this.y + 'px';
}
}
4，蛇的构造器
function Snake(){
this.position = 'absolute';
this.width = 20;
this.height = 20;
this.body = [[2,2,'red',null],[1,2,'blue',null],[0,2,'blue',null]];//蛇的身体，默认一个头，两个身体第一个为头，每个数组中的元素分别代表这节身体的x,y,颜色，以及负责显示这节身体的div
this.directionKeyCode=39; //键盘的keyCode，默认39代表右键
//显示蛇
this.showSnake = function(){
for(var i=0;i<this.body.length;i++){
if(this.body[i][3]===null){
this.body[i][3] = document.createElement('div');//把
map.map.appendChild(this.body[i][3]);
}
this.body[i][3].style.width =this.width+'px';
this.body[i][3].style.height =this.height+'px';
this.body[i][3].style.position = this.position;
this.body[i][3].style.backgroundColor = this.body[i][2];
this.body[i][3].style.left = this.width*this.body[i][0]+'px';
this.body[i][3].style.top = this.width*this.body[i][1]+'px';
}
}
5，移动蛇的方法，需要写在蛇的构造器里面，注意这个方法里的snake不能用this代替,原因上面已经说明
在这个方法中需要判断蛇是否撞到了墙壁或者自身
this.moveSnake = function(){
//这个方法里的snake不能用this代替,原因上面已经说明
//更新每节身体的位置，除了蛇头外其他每节的位置更新为上一节的位置
//注意要从最后一节更新，因为每节的新位置是上一节的老位置，需要在上一节更新之前才能获取它的老位置
for(var i=snake.body.length-1;i>0;i--){
snake.body[i][0] = snake.body[i-1][0];
snake.body[i][1] = snake.body[i-1][1];
}
//设置蛇头位置
switch (snake.directionKeyCode){
case 37: //左
snake.body[0][0] -=1;
break;
case 38: //上
snake.body[0][1] -=1;
break;
case 39: //右
snake.body[0][0] +=1;
break;
case 40: //下
snake.body[0][1] +=1;
break;
}
//吃到食物的判断
if(snake.body[0][0]==food.x && snake.body[0][1]==food.y){
var lastBody = snake.body[snake.body.length-1]
snake.body.push([lastBody[0],lastBody[1],'blue',null]);
//吃到食物后更新食物的位置
food.showFood();
if(time>=250){//减少更新时间，加快蛇的速度，减少到250ms以下后不再加快
time-=50;
clearInterval(timer);
timer = setInterval(snake.moveSnake,time);
}
}
//判断边界
if(snake.body[0][0]>29 || snake.body[0][0]<0||snake.body[0][1]>19||snake.body[0][1]<0){
confirm("GameOver,点确定重新开始");
location.href='?'; //刷新网页方法一
}
//判断是否碰到到自己
for(var i=1;i<snake.body.length;i++){
if(snake.body[0][0]==snake.body[i][0]&&snake.body[0][1]==snake.body[i][1]){
confirm("GameOver,点确定重新开始");
//location.href='?';
location.reload(); //刷新网页方法二
}
}
//显示蛇，此时蛇的位置已改变
snake.showSnake();
}
6，到这里主要工作已经做完，这一步主要来创建暂定、继续、上、下、左、右按键，不想创建也可以，这一步可以直接忽略，下一步不再调用这些方法即可，不影响游戏的运行
注：这些方法不属于任何构造器
//停止按钮
function Stop(){
this.showStopBtn = function(){
var btn = document.createElement('button');
btn.innerHTML="暂停";
document.body.appendChild(btn); btn.onclick = function(){
clearInterval(timer);
confirm("暂停中,点确定开始");
timer =setInterval(snake.moveSnake,time);
}
}
}
//开始按钮
function Start(){
this.showStartBtn = function(){
var btn = document.createElement('button');
btn.innerHTML="开始";
document.body.appendChild(btn);
btn.onclick = function(){
clearInterval(timer);
timer =setInterval(snake.moveSnake,time);
}
}
}
//方向实体键
function DirectionButton(){
this.showDirectButtons=function(){
var btn = document.createElement('button');
btn.innerHTML="上";
document.body.appendChild(btn);
btn.onclick = function(){
snake.directionKeyCode=38;
} var btn = document.createElement('button');
btn.innerHTML="下";
document.body.appendChild(btn);
btn.onclick = function(){
snake.directionKeyCode=40;
} var btn = document.createElement('button');
btn.innerHTML="左";
document.body.appendChild(btn);
btn.onclick = function(){
snake.directionKeyCode=37;
} var btn = document.createElement('button');
btn.innerHTML="右";
document.body.appendChild(btn);
btn.onclick = function(){
snake.directionKeyCode=39;
}
} }
7，主要的创建流程
//创建并显示地图
map= new Map();
map.showMap();
//创建并显示食物
food = new Food();
food.showFood();
//创建并显示蛇
snake = new Snake();
snake.showSnake();
//设置定时器
// snake.moveSnake();
timer = window.setInterval(snake.moveSnake,time);
//添加键盘事件
document.body.onkeydown = function(e){
var event = window.event||e;
if(event.keyCode>=37&&event.keyCode<=40){//限制其他按键不起作用，只有上下左右四个按键起作用
snake.directionKeyCode = event.keyCode;
} }
//以下添加按键的步骤，可加可不加
//添加停止按钮
var stopBtn = new Stop();
stopBtn.showStopBtn();
//添加停止按钮
var startBtn = new Start();
startBtn.showStartBtn();
//添加上下左右按钮
var directionButtons = new DirectionButton();
directionButtons.showDirectButtons();
以上就是全部的代码，当然需要全部写在html中的<script>标签中，希望大家多多提意见哈
想看源码的小伙伴，这里有github地址https://github.com/masterChunlinHan/snake