贪吃蛇：根据需求，抽象出相关对象，总结对象的特征和行为，把特征变为属性，行为变为方法，定义构造函数，实例化对象，通过对象调用属性和方法，完成相应需求
.map{
width:800px;
height:600px;
background-color:#ccc;
position:relative;
}
<div class="map"></div>
<script>
//自调用函数---小方块
(function(){
var elements=[ ]; //用来保存每个小方块
function Food(x,y,width,height){
this.x=x||0;
this.y=y||0;
this.width=width||20;
this.height=height||20;
this.color=color||"green";
}
//为原型添加初始化方法（作用：页面显示小方块）
//方块在地图上显示，需要地图这个参数
Food.prototype.init=function(map){
remove(); //先删除小方块
var div=document.creatElement("div"); //创建div
map.appendchild(div); //把div加到map中
div.style.width=this.width+"px"; //设置div样式
div.style.height=this.height+"px";
div.style.backgroundColor=this.color;
div.style.position="absolute";
this.x=parseInt(Math.random()*(map.offsetwidth/this.width))*this.width; //随机横纵坐标
this.y=parseInt(Math.random()*(map.offsetheight/this.height))*this.height;
div.style.left=this.x+"px";
div.style.top=this.y+"px";
elements.push(div); //把div加到elements中
};
私有函数--删除小方块
function remove(){
for(var i=0;i<wlwments.length;i++)
var ele=elements[i]; //找到子元素父级元素，删掉子元素
ele.parentNode.removeChild(ele);
elements.splice(i,1); //elements子元素删除，索引从i开始删除一个
}
window.Food=Food; //暴露给window，外部可用
}());
//自调用函数---蛇
(function(){
var elements=[ ]; //存放小蛇每个身体
function Snake(width,height,direction){ //小蛇每个部分
this.width=width||20;
this.height=height||20;
this.body=[
{x:3,y:2,color:"red"}, //头
{x:2,y:2,color:"orange"}, //身体
{x:1,y:2,color:"orange"} //身体
];
this.direction=direction||"right";
}
//小蛇初始化方法
Snake.prototype.init=function(map){
remove();
for(var i=0;i<this.body.length,i++){
var obj=this.body[i];
var div=document.creatElement("div"); //把div加到map中
map.appendChild(div);
//设置div样式
div.position="absolute";
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.left=obj.x*this.width+"px";
div.style.top=obj.y*this.height+"px";
div.style.backgroundColor=obj.color;
//把div放在数组中—为了删除
elements.push(div);
}
};
//为原型添加方法--小蛇动起来
Snake.prototype.move=function(){
//改变身体位置
var i=this.body.length-1;
for(;i>0;i--){
this.body[i].x=this.body[i-1].x;
this.body[i].y=this.body[i-1].y;
}
//改变头方向
switch(this.direction){
case "right":this.body[0].x+=1;break;
case "left":this.body[0].x-=1;break;
case "top":this.body[0].y-=1;break;
case "bottom":this.body[0].y+=1;break;
}
//判断吃没吃到食物，小蛇头的坐标和食物坐标一致
var headX=this.body[0].x*this.width;
var headY=this.body[0].y*this.height;
//判断小蛇与食物坐标是否都相同
if(headX==food.x&&headY==food.y){
//获取蛇最后尾巴
var last=this.body[this.body.length-1];
//将其复制加入到小蛇body
this.body.push({
x:last.x,
y:last.y,
color:last.color
});
//删掉食物，重新初始化食物
food.init(map);
}
};
//删除小蛇私有函数
function remove(){
var i=elements.length-1;
for(;i>=0;i--)
var ele=elements[i];
ele.parentNode.removeChild(ele);
elements.splice(i,1);
}
window.Snake=Snake;
}());
//自调用函数--游戏对象
(function(map){
var that=null;
function Game(map){
this.food=new Food();
this.snake=new Snake();
this.map=map;
that=this;
}
//初始化游戏--可以设置小蛇和方块显示
Game.prototype.init=function(){
this.food.init(this.map);
this.snake.init(this.map);
this.runSnake(this.food,this.map);
this.bindKey(); //调用按键方法
};
//添加原型方法--设置小蛇自己动起来
Game.prototype.runSnake=function(food,map){
var timeId=setInterval(function(){ //this为window
this.snake.move(food,map);
this.snake.init(map);
var maxX=map.offsetWidth/this.snake.width; //横坐标最大值
var maxY=map.offsetHeight/this.snake,height; //纵坐标最大值
var headX=this.snake.body[0].x; //小蛇头坐标
var headY=this.snake.body[0].y;
if(headX<0||headX>=maxX){
clearInterval(timeId); //撞墙，停止
alert("游戏结束");
}
if(headY<0||headY>=maxY){
clearInterval(timeId); //撞墙，停止
alert("游戏结束");
}
}.bind(that),150);
};
//添加原型方法--设置用户按键，改变移动方向
Game.prototype.bindKey=function(){
document.addEventListener("keydown",function(e){
switch(e,keyCode){ //获取按键值
//这里this为document
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(that),false);
};
window.Game=Game;
}());
//初始化游戏对象
var gm=new Game(document.querySelector(".map"));
//初始化游戏--开始游戏
gm.init();
</script>
食物
1、食物构造函数--创建食物对象
2、食物显示方法-通过对象调用方法，显示食物，设置相应样式
2.1.1因为食物要被吃掉，吃掉后再出现，原来删除
2.1.2每一次初始化食物先删除原来食物，在重新初始化
2.1.3通过私有函数删除地图上食物，同时最开始食物保存在一个数组中，在从数组中删除食物
最后把食物构造函数给window下属性，外部直接使用
蛇
属性：身体分三个部分，每个部分都有一个对象，每个部分都有横纵坐标，背景颜色，蛇想要在地图上显示，先删除之前的小蛇，然后在初始化蛇