贪吃蛇小游戏
游戏玩法:
利用键盘的 上、下、左、右键控制小蛇的移动方向,每吃掉一个小方块食物则尾巴增长,撞墙则游戏结束
- 运用自定义构造函数的方法,把小蛇、食物、整个游戏作为三大对象,分别封装在三个js库里面
- 在index里面引用js文件,并初始化对象,游戏即可开始
- 完整代码可以直接到我的GitHub里面下载即可使用:https://github.com/Evelyn-Linn/Snake-Game
附上代码:
<script> //食物的构造函数 (function(){ var elements=[]; function Food(x,y,width,height,color){ this.x=x||0; this.y=y||0; this.width=width||20; this.height=height||20; this.color=color||"green"; }; //添加原型对象,食物小方块是放在map地图中的,所以需要传map Food.prototype.init=function(map){ //先要删除这个小食物 remove(); var div=document.createElement("div"); map.appendChild(div); div.style.width=this.width+"px"; 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"; //把div加到数组elements中 elements.push(div); }; 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 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.createElement("div"); map.appendChild(div); div.style.width=this.width+"px"; div.style.height=this.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; 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]; 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(){ 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.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("Game Over"); } if(headY<0||headY>=maxY){ clearInterval(timeId); alert("Game Over"); } }.bind(that),100); }; //添加原型方法,用户按键改变蛇的方向 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(); </script>