标签：type   game   last   tip   bind   col   off   ini   spl   

贪吃蛇，JS实现

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

• 小蛇代码

  //自调用函数加载代码
  (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;i0;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=max_x||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

• 游戏部分的封装代码

  (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;
  }())
  

tips

该程序需要理解封装的意义和作用，以及实现逻辑
注意this所指代的对象是谁
.bind()来修改this的指向

JS实现贪吃蛇小游戏

标签：type   game   last   tip   bind   col   off   ini   spl   

原文地址：https://www.cnblogs.com/codeumind/p/12757297.html