实现思路
在贪吃蛇游戏的实现中，主要创建了五个对象来实现游戏的搭建，分别为：
Tools：工具对象，产生随机数
Food：食物对象，在地图上随机产生食物
Snake：蛇对象，创建蛇，控制蛇移动，吃食物实现
Game：游戏对象，创建键盘监听器，控制蛇移动的方向，蛇与边界的判断
Main：调用对象，运行游戏
本贪吃蛇主要通过构造函数，面对对象来实现，比较简陋，需要的可以参考一下，请多多指教。
游戏效果：
HTML
html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="map">
</div>
<script src="html" title=js>js/index.html" title=js>js"></script>
</body>
</html>
CSS
css">//创建style.css文件，将css代码复制即可
#map{
width: 800px;
height: 600px;
background-color: lightgray;
position: relative;
}
JS
//创建index.html" title=js>js文件，将html" title=js>js代码复制即可。
//使用自调用函数，创建一个新的局部作用域，防止命名冲突
//--------------Tools对象：生成随机整数----------
;(function(){
var Tools={
//生成随机数
getRandom:function(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
}
//给外部调用
window.Tools=Tools;
})()
//-------------------Food：食物对象，随机生成食物-----------------
;(function(){
var position='absolute';
var elements=[];
function Food(options){
options=options||{};
this.x=options.x||0;//坐标
this.y=options.y||0;
this.width=options.width||20;//食物大小
this.height=options.height||20;
this.color=options.color||'green';
}
Food.prototype.render=function(map){
//console.log(elements)
//删除之前创建的食物
remove();
//随机生成x和y的值
this.x=Tools.getRandom(0,map.offsetWidth/this.width-1)*this.width;
this.y=Tools.getRandom(0,map.offsetHeight/this.height-1)*this.height;
//动态创建div，页面上显示食物
var div=document.createElement('div');
map.appendChild(div);
elements.push(div);
//设置样式
div.style.position=position;
div.style.left=this.x+"px";
div.style.top=this.y+"px";
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.backgroundColor=this.color;
}
function remove(){
for(var i=elements.length-1;i>=0;i--){
//删除div
elements[i].parentNode.removeChild(elements[i]);
//删除数组中的元素
//第一个参数，从哪个开始删除
//第二个参数，删除几个
elements.splice(i,1);
}
}
//把Food构造函数，让外部可以访问
window.Food=Food;
})()
//-------------------Snake：蛇对象，创建蛇，移动蛇---------------
;(function(){
var position='absolute';
//记录之前创建的蛇
var elements=[];
function Snake(options){
options=options||{};
this.width=options.width||20;
this.height=options.height||20;
//蛇移动的方向
this.direction=options.direction||'right';
//设置蛇的身体。第一个元素是蛇头
this.body=[
{x:3,y:2,color:'red'},
{x:2,y:2,color:'blue'},
{x:1,y:2,color:'blue'}
];
}
//
Snake.prototype.render=function(map){
//删除蛇
remove();
//把每个蛇节渲染到地图上
for(var i=0,len=this.body.length;i<len;i++){
//蛇节
var object=this.body[i];
var div=document.createElement('div');
map.appendChild(div);
//记录当前的蛇
elements.push(div);
div.style.position=position;
div.style.width=this.width+'px';
div.style.height=this.height+'px';
div.style.left=object.x*this.width+'px';
div.style.top=object.y*this.height+'px';
div.style.backgroundColor=object.color;
}
}
//控制蛇移动的方法
Snake.prototype.move=function(food,map){
//控制蛇身体的移动（当前蛇节到上个蛇节的位置）
for(var i=this.body.length-1;i>0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
//控制蛇头的移动
//判断蛇移动的方向
var head=this.body[0];
switch(this.direction){
case 'right':
head.x+=1;
break;
case'left':
head.x-=1;
break;
case'top':
head.y-=1;
break;
case'bottom':
head.y+=1;
break;
}
//判断蛇头是否与食物坐标重合
var headX=head.x*this.width;
var headY=head.y*this.height;
if(headX===food.x&&headY===food.y){
//让蛇增加一节
//获取蛇的最后一节
var last=this.body[this.body.length-1];
this.body.push({
x:last.x,
y:last.y,
color:last.color
})
//随机生成地图上的食物
food.render(map);
}
}
//删除蛇的方法
function remove(){
for(var i=elements.length-1;i>=0;i--){
//删除div
elements[i].parentNode.removeChild(elements[i]);
//删除数组的元素
elements.splice(i,1);
}
}
window.Snake=Snake;
})()
//------------Game：游戏对象,处理蛇碰到边界，结束游戏---------------
//使用自调用函数，创建一个新的局部作用域，防止命名冲突
;(function(){
var that;//记录游戏对象
function Game(map){
this.food=new Food();
this.snake=new Snake();
this.map=map;
that=this;//把游戏对象this复制给that，以区别去window的this。
}
Game.prototype.start=function(){
//把蛇和食物对象，渲染到地图上
this.food.render(this.map);
this.snake.render(this.map);
//开始游戏逻辑
//让蛇移动起来
runSnake();//调用蛇移动方法
//调用键盘控制蛇移动的方向
bindkey();
}
//创建键盘按键监听器，控制蛇移动方向
function bindkey(){
document.addEventListener('keydown',function(e){
//console.log("打印键盘的值"+e.keyCode);
switch(e.keyCode){
case 37:
this.snake.direction='left';
break;
case 38:
this.snake.direction='top';
break;
case 39:
this.snake.direction='right';
break;
case 40:
this.snake.direction='bottom';
break;
}
//bind(),来改变this的指向，相当于把游戏对象的that赋值给this
}.bind(that),false);
}
//判断是否蛇碰到边界
function runSnake(){
var timeId=setInterval(function(){
this.snake.move(this.food,this.map);
this.snake.render(this.map);
//当蛇碰到边界，游戏结束
var maxX=this.map.offsetWidth/this.snake.width;
var maxY=this.map.offsetHeight/this.snake.height;
var headX=this.snake.body[0].x;
var headY=this.snake.body[0].y;
//X方向边界判断
if(headX<0 ||headX>=maxX){
alert("Game Over");
clearInterval(timeId);
}
//Y方向边界判断
if(headY<0 ||headY>=maxY){
alert("Game Over");
clearInterval(timeId);
}
}.bind(that),150)
}
window.Game=Game;
})()
//----------调用函数，运行-----------
;(function(){
var map=document.getElementById('map');
var game =new Game(map);
game.start();
})()
