JS小功能：贪吃蛇游戏简单的实现

约定不等于承诺〃 2022-11-25 00:52 172阅读 0赞

## 实现思路 ##

在贪吃蛇游戏的实现中，主要创建了五个对象来实现游戏的搭建，分别为：  
Tools：工具对象，产生随机数  
Food：食物对象，在地图上随机产生食物  
Snake：蛇对象，创建蛇，控制蛇移动，吃食物实现  
Game：游戏对象，创建键盘监听器，控制蛇移动的方向，蛇与边界的判断  
Main：调用对象，运行游戏  
本贪吃蛇主要通过构造函数，面对对象来实现，比较简陋，需要的可以参考一下，请多多指教。  
**游戏效果：**  
![游戏中][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]  
![在游戏结束][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70 1]

## HTML ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>贪吃蛇</title>
    		<link rel="stylesheet" type="text/css" href="css/style.css"/>
    	</head>
    	<body>
    		<div id="map">
    			
    		</div>
    		<script src="js/index.js"></script>
    	</body>
    </html>

## CSS ##

//创建style.css文件，将css代码复制即可 #map{ 
    	width: 800px;
    	height: 600px;
    	background-color: lightgray;
    	position: relative;
    }

## JS ##

//创建index.js文件，将js代码复制即可。
      //使用自调用函数，创建一个新的局部作用域，防止命名冲突
      
      //--------------Tools对象：生成随机整数----------
    ;(function(){ 
    	var Tools={ 
    		//生成随机数
    		getRandom:function(min,max){ 
    			return Math.floor(Math.random()*(max-min+1))+min;
    		}
    	}
    	//给外部调用
    	window.Tools=Tools;
    })()
    //-------------------Food：食物对象，随机生成食物-----------------
    ;(function(){ 
    	var position='absolute';
    	var elements=[];
    	
    	function Food(options){ 
    		options=options||{ };
    		this.x=options.x||0;//坐标
    		this.y=options.y||0;
    		this.width=options.width||20;//食物大小
    		this.height=options.height||20;
    		this.color=options.color||'green';
    	}
    	
    	Food.prototype.render=function(map){ 
    		//console.log(elements)
    		//删除之前创建的食物
    		 remove();
    		//随机生成x和y的值
    		 this.x=Tools.getRandom(0,map.offsetWidth/this.width-1)*this.width;
    		 this.y=Tools.getRandom(0,map.offsetHeight/this.height-1)*this.height;
    		 //动态创建div，页面上显示食物
    		 var div=document.createElement('div');
    		 map.appendChild(div);
    		 
    		 elements.push(div);
    		 //设置样式
    		 div.style.position=position;
    		 div.style.left=this.x+"px";
    		 div.style.top=this.y+"px";
    		 div.style.width=this.width+"px";
    		 div.style.height=this.height+"px";
    		 div.style.backgroundColor=this.color;
    	}
    	
    	function remove(){ 
    		for(var i=elements.length-1;i>=0;i--){ 
    			//删除div
    		  elements[i].parentNode.removeChild(elements[i]);
    		  //删除数组中的元素
    		  //第一个参数，从哪个开始删除
    		  //第二个参数，删除几个
    		  elements.splice(i,1);
    		  
    		  
    		}
    	}
    	//把Food构造函数，让外部可以访问
    	window.Food=Food;
    })()
    //-------------------Snake：蛇对象，创建蛇，移动蛇---------------
    ;(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,color:'red'},
    			 { x:2,y:2,color:'blue'},
    			 { x:1,y:2,color:'blue'}
    		 ];
    	}
    	//
    	Snake.prototype.render=function(map){ 
    		 //删除蛇
    		  remove();
    		//把每个蛇节渲染到地图上
    		for(var i=0,len=this.body.length;i<len;i++){ 
    			//蛇节
    			var object=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=object.x*this.width+'px';
    			div.style.top=object.y*this.height+'px';
    			div.style.backgroundColor=object.color;
    			
    		}
    		}
    		//控制蛇移动的方法
    		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;
    			} 
    			
    		//判断蛇头是否与食物坐标重合
    		var headX=head.x*this.width;
    		var headY=head.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.render(map);
    		}
    			
    		}
    		//删除蛇的方法
    		function remove(){ 
    			for(var i=elements.length-1;i>=0;i--){ 
    				//删除div
    				elements[i].parentNode.removeChild(elements[i]);
    				//删除数组的元素
    				elements.splice(i,1);
    			} 
    		}
    	
    	
    	window.Snake=Snake;
    })()
    //------------Game：游戏对象,处理蛇碰到边界，结束游戏---------------
    //使用自调用函数，创建一个新的局部作用域，防止命名冲突
    ;(function(){ 
    	var that;//记录游戏对象
    	function Game(map){ 
    		this.food=new Food();
    		this.snake=new Snake();
    		this.map=map;
    		that=this;//把游戏对象this复制给that，以区别去window的this。
    	}
    	Game.prototype.start=function(){ 
    		//把蛇和食物对象，渲染到地图上
    		
    		this.food.render(this.map);
    		this.snake.render(this.map);
    		//开始游戏逻辑
    		//让蛇移动起来
    		 runSnake();//调用蛇移动方法
    		 //调用键盘控制蛇移动的方向
    		 bindkey();
    		
    	}
    	//创建键盘按键监听器，控制蛇移动方向
    	function bindkey(){ 
    		 document.addEventListener('keydown',function(e){ 
    			//console.log("打印键盘的值"+e.keyCode); 
    			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(),来改变this的指向，相当于把游戏对象的that赋值给this
    		 }.bind(that),false);
    	}
    	//判断是否蛇碰到边界
    	function runSnake(){ 
    		var timeId=setInterval(function(){ 
    			
    			this.snake.move(this.food,this.map);
    			this.snake.render(this.map);
    			//当蛇碰到边界，游戏结束
    			var maxX=this.map.offsetWidth/this.snake.width;
    			var maxY=this.map.offsetHeight/this.snake.height;
    			var headX=this.snake.body[0].x;
    			var headY=this.snake.body[0].y;
    			//X方向边界判断
    			if(headX<0 ||headX>=maxX){ 
    				alert("Game Over");
    				clearInterval(timeId);
    				
    			}
    			//Y方向边界判断
    			if(headY<0 ||headY>=maxY){ 
    				alert("Game Over");
    				clearInterval(timeId);
    				
    			}
    			
    		}.bind(that),150)
    	}
    	
    	window.Game=Game;
    })()
     //----------调用函数，运行-----------
     ;(function(){ 
     	 var map=document.getElementById('map');
     	  var game =new Game(map);
     	  game.start();
     })()

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70]: /images/20221124/935134fd4bab48c18f39fa1613b87425.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpZ19waWczMg_size_16_color_FFFFFF_t_70 1]: /images/20221124/73cc59041c7b4ada9260ea50d3dae30e.png