图片发布于简书APP
贪吃蛇案例：
<script>
//产生随机数对象
(function(window){
function Random(){
}
Random.prototype.getRandom=function(min,max){
return Math.floor(Math.random()*(max-min)+min);
};
//把局部对象暴露给window顶级对象，就成了全局对象
window.Random=new Random();
})(window);//自调用构造函数 的方式，分号一定要加上
//产生小方块对象
//自调用函数---食物
(function(){
//console.log(Random.getRandom(0,5));
//选择器的方式获取元素对象
var map=document.querySelector(".map");
//食物的构造函数
function Food(width,height,color){
this.width=width||20;//默认小方块的宽
this.height=height||20;//默认小方块的高
//横坐标，纵坐标
this.x=0;//横坐标随机产生
this.y=0;//纵坐标随机产生
this.color=color;//小方块的背景颜色
this.elements=document.createElement("div");//小方块的元素
}
//初始化小方块的显示效果及位置
//因为食物要在地图上显示，所以，需要地图的这个参数（map--就是页面上的.class这个div）
Food.prototype.init=function(map){
//先删除这个小食物
//外部无法访问的函数
remove();
//设置小方块的 样式
var div=this.elements;
div.style.position="absolute";//脱离文档流
div.style.width=this.width+"px";
div.style.height=this.height+"px";
div.style.backgroundColor=this.color;
//把小方块加到map地图中
map.appendChild(div);
this.render(map);
};
//产生随机位置
Food.prototype.render=function(map){
//随机产生横纵坐标
var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width;
var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height;
this.x=x;
this.y=y;
var div=this.elements;
div.style.left=this.x+"px";
div.style.top=this.y+"px";
}
//私有的函数----删除食物的
function remove(){
//element素组中有这个食物
for (var i = 0; i < elements.length; i++) {
var ele=elements[i];
//找到这个子元素的腹肌元素，然后删除这个子元素
ele.parentNode.removeChild(ele);
//再次把element中的这个子元素也要删除
elements.splice(i,1);
}
}
})(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();
//循环遍历创建div
for (var i = 0; i < this.body.length; i++) {
var obj=this.body[i];
//创建div
var div=document.createElement("div");
//把div加入到map地图中
map.appendChild(div);
//设置div样式
div.style.width=width+"px";
div.style.height=height+"px";
div.style.position="absolute";
//横纵坐标
div.style.left=obj.x*this.width+"px";
div.style.top=obj.y*this.height+"px";
//背景颜色
div.style.backgroundColor=obj.color;
//把div加入到element数组中、---目的是为了删除
elements.push(div);
}
}
//为原型添加方法---小蛇动起来
Snake prototype.move=function(food,map){
var i=this.body,length-1;//2
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];
//从map地图上删除这个子元素div
ele.parentNode.removeChild(ele);
elements,splice(i,1);
}
}
//吧snake暴露给window，外部可以访问
window.Snake=Snake;
}());
//自调用函数----游戏对象
(function(){
//游戏的构造函数
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);
};
Game.prototype.runSnake=function(food,map){
//自动移动
setInterval(function(){
//此时的this是window
//移动小蛇
this.snake.move(food,map);
//初始化小蛇
this.snake.init(map);
//横坐标的最大值
var maxX=map.offsetWidth/this.snake.width;//40;
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){
//这里的this应该是触发keydown的事件的对象document
//所以，这里的this就是document
//获取按键的值
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);
};
//吧game暴露给window，外部可以访问game对象
window.Game=Game;
}());
var gm=new Game(document.querySelector(.map));
gm.init();
//外部测试代码
var fd=new Food();
fd.init(document.querySelector(".map"));
//创建小蛇
var snake=new Snake();
snake.init(document.querySelector(".map"));
setInterval(function(){
snake.move(fd,document.querySelector(".map"));
snake.init(document.querySelector(".map"));
},150);
</script>
网友评论