<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.map{
width: 800px;
height: 600px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div class="map"></div>
</body>
<script>
//食物：自调用函数
((function (){
// 食物属性
var elements=[];//创建一个存放食物的数组
function Food(x,y,width,height,color){
this.width=width||20; //给宽赋值 如果没有值就是用20作为默认值
this.height=height||20;
this.color=color||"green";
//赋值横纵坐标
this.x=x||0;
this.y=y||0;
this.element=document.createElement(‘div‘);//小方块元素
}
//食物初始化
Food.prototype.init=function(map){
//删除食物
if(elements.length == 0){
}
else{
remove();
}
//设置小方块的样式
var div=document.createElement(‘div‘);//创建一个div的元素
map.appendChild(div);//把div元素添加到map元素中
div.style.position=‘absolute‘;//脱离文档流
div.style.width=this.width+‘px‘;//设置div元素在html中的高
div.style.height=this.height+‘px‘;
div.style. backgroundColor=this.color;
//随机横纵坐标
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‘;
//把div元素放到数组中
elements.push(div);
console.log(elements);
};
//删出食物
function remove(){
//遍历数组
for(var i=0;i<=elements.length;i++){
var ele=elements[i];
//找到这个子元素的父级元素然后删除他的子元素
ele.parentNode.removeChild(ele);
//删除数组中的元素
elements.splice(i,1);
}
};
window.Food=Food;
})());
//蛇：自调用函数
((function(){
var selements=[];//创建一个存放蛇的数组
//小蛇属性
function Snake(width,height,direction){
this.width=width||20;
this.height=height||20;
this.direction=direction||"right";
this.body=[
{x:3,y:2,color:‘yellow‘},//蛇头
{x:2,y:2,color:‘blue‘},//蛇身
{x:1,y:2,color:‘blue‘},
];}
// 小蛇初始化
Snake.prototype.init=function(map){
if(selements.length==0){
}
else{
remove();
}
//循环数组创建小蛇div
for(var i=0;i<this.body.length;i++){
var obj=this.body[i];
var div=document.createElement(‘div‘);//创建一个div的元素
map.appendChild(div);//把div元素添加到map元素中
div.style.position=‘absolute‘;//脱离文档流
div.style.width=this.width+‘px‘;//设置div元素在html中的高
div.style.height=this.height+‘px‘;
div.style. backgroundColor=obj.color;
div.style.left=(obj.x*this.width)+‘px‘;
//alert(obj.x)
div.style.top=(obj.y*this.width)+‘px‘;
// 把蛇的身体加入数组
selements.push(div);
};
};
//小蛇移动
Snake.prototype.move=function(food,map){
//改变蛇的身体坐标
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 "left":
this.body[0].x-=1 ;
break;
case "right":
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;//获得头坐标
var foodX=food.x;
var foodY=food.y;
if(headX==foodX && headY==foodY){
//吃食物
var last=this.body[this.body.length-1];
this.body.push({
x:last.x,y:last.y,color:last.color
});
//删除食物
food.init(map);
}
};
//删除之前的小蛇
function remove(){
//获取数组
var i=selements.length-1;
for(;i>0;i--){
var ele=selements[i];
//找到这个子元素的父级元素然后删除他的子元素
ele.parentNode.removeChild(ele);
//删除数组中的元素
selements.splice(i,1);
}
};
window.Snake=Snake;//把蛇的自调用函数暴露出来
})());
//游戏：自调用函数
((function(){
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.run(this.food,this.map);
this.bindkey();
};
//跑起来的蛇
Game.prototype.run=function(food,map){
//自动去移动
var time= setInterval(function(){
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(time);
alert(‘游戏结束！！‘)
};
if( headY<0||headY>=maxY){
//撞墙
clearInterval(time);
alert(‘游戏结束！！‘)
};
}.bind(that),200);
};
//按键改变蛇的行走方向
Game.prototype.bindkey=function(){
//获取键盘按键改变蛇的方向
document.addEventListener(‘keydown‘,function(e){
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(that),false);
};
window.Game=Game;//把游戏的自调用函数暴露出来
})());
var gm=new Game(document.querySelector(".map"));
//初始化游戏
gm.init();
/* //初始化游戏对象
var gm=new Game(document.querySelector(".map"));
//初始化游戏
gm.init();*/
</script>
</html>
原文：https://www.cnblogs.com/newbornbaby/p/11571948.html