标签：type game last tip bind col off ini spl
HTML代码部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 800px; height: 800px; background-color: #ccc; position: relative; position: absolute; } </style> </head> <body> <div class="box"></div> <script type="text/javascript" src="Food.js"></script> <script type="text/javascript" src="Snack.js"></script> <script type="text/javascript" src="Game.js"></script> <script type="text/javascript"> var gm=new Game(); gm.init(document.querySelector(".box")); </script> </body> </html>
JS部分
食物代码
//自调用函数加载该代码 (function(){ //用来临时存放食物 var elements=[]; //食物的构造函数 function Food(width,height,color){ //给食物的属性赋值 this.width=width||20; this.height=height||20; this.color=color||"green"; this.x=0; this.y=0; } //初始化方法，用来把实例化的食物显示在屏幕上 Food.prototype.init=function(map){ remove(); var div = document.createElement("div"); //宽高，左上间距都需要加px，切记 div.style.width=this.width+"px"; div.style.height=this.height+"px"; 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.style.backgroundColor=this.color; div.style.position = "absolute"; map.appendChild(div); elements.push(div); } function remove(){ for(var i =0;i<elements.length;i++){ elements[0].parentNode.removeChild(elements[0]); elements.splice(0,1); } } window.Food=Food; }());小蛇代码
//自调用函数加载代码 (function(){ var elements=[]; //小蛇构造函数 function Snack(width,height,length){ that=this; this.width=width; this.height=height; this.position="absolute"; this.direction="right"; this.x=0; this.y=0; this.body = []; for(var i =0;i<length;i++){ var obj=""; if(i==0){ obj = ‘{"x":‘+(length+2-i).toString()+‘,"y":2,"color":"red"}‘ }else{ obj = ‘{"x":‘+(length+2-i).toString()+‘,"y":2,"color":"orange"}‘ } this.body.push(JSON.parse(obj)); } } //小蛇的初始化 Snack.prototype.init=function(map){ remove(); for(var i =0;i<this.body.length;i++){ var div = document.createElement("div"); div.style.width=this.width+"px"; div.style.height=this.height+"px"; this.x=this.body[i].x*this.width; this.y=this.body[i].y*this.height; div.style.left=this.x+"px"; div.style.top=this.y+"px"; div.style.backgroundColor=this.body[i].color; div.style.position = "absolute"; map.appendChild(div); elements.push(div); } } Snack.prototype.run=function(food,map){ var timeID = setInterval(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 max_x=map.offsetWidth/this.width; var max_y=map.offsetHeight/this.height; var head_x=this.body[0].x; var head_y=this.body[0].y; if(head_x<0||head_x>=max_x||head_y<0||head_y>=max_y){ clearInterval(timeID); alert("Gamne Over"); } //判断进食条件 if(food.x==head_x*this.width&&food.y==head_y*this.width){ food.init(map); var last = this.body[this.body.length-1]; var addone = {"x":last.x,"y":last.y,"color":last.color} this.body.push(addone); } this.init(map); }.bind(that),200) } //键盘控制小蛇移动 Snack.prototype.bindKey=function(){ document.addEventListener("keydown",function(e){ switch(e.keyCode){ case 37:this.direction="left";break; case 38:this.direction="top";break; case 39:this.direction="right";break; case 40:this.direction="bottom";break; } }.bind(that),false) } function remove(){ for(var i =0;i<elements.length;i++){ elements[i].parentNode.removeChild(elements[i]); } elements.splice(0,elements.length); } window.Snack=Snack; }());游戏部分的封装代码
(function(){ function Game(map){ this.food=new Food(40,40,"green"); this.snack=new Snack(40,40,2); this.map=map; } Game.prototype.init=function(map){ this.food.init(map); this.snack.init(map); this.snack.run(this.food,map); this.snack.bindKey(); } window.Game=Game; }())
该程序需要理解封装的意义和作用，以及实现逻辑
注意this所指代的对象是谁
.bind()来修改this的指向
标签：type game last tip bind col off ini spl
原文地址：https://www.cnblogs.com/codeumind/p/12757297.html
