(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上面距离有两个方块
{x:3,y:2,color:‘lightgreen‘},
{x:2,y:2,color:‘white‘},
{x:1,y:2,color:‘white‘}
];
}
//将蛇渲染到地图上
Snake.prototype.render = function(map){
//每次render渲染的时候都应该先移除掉之前创建的蛇
remove();
//要把蛇的每一个部分都渲染到地图上
//i<len比i<length的好处是，每循环一次this.body.length都会计算一次，但是如果在var中定义就只会执行一次，这样会提高效率
for(var i=0, len = this.body.length;i<len;i++){
var obj = 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 = obj.x*this.width +‘px‘;
div.style.top = obj.y*this.height + ‘px‘;
div.style.backgroundColor = obj.color;
}
}
function remove(){
for(var i=elements.length-1;i>=0;i--){
//删除div
//删除数组中的元素
elements[i].parentNode.removeChild(elements[i]);
elements.splice(i,1);
}
}
//控制蛇移动的方法
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;
}
//判断食物的坐标是否和蛇头坐标重合
if(food.x === head.x*this.width && food.y === head.y*this.height){
//让蛇身体增加一格
//获取蛇的最后一节
var last = this.body[this.body.length-1];
//将最后一节的属性作为新属性赋值给新的一节
this.body.push({
x:last.x,
y:last.y,
color:last.color
})
//随机在地图上重新生成食物
food.render(map);
}
}
//测试：先将Sanke挂到Window对象上，便于外部测试访问
window.Snake = Snake;
})()
