对于用javascript写贪吃蛇应用

原創 lwl13207136100 2020-06-17 13:27

Js应用之贪吃蛇大作战 

贪吃蛇大家都应该玩过，最近也有一款手机游戏叫做贪吃蛇大作战相当火爆，那我们今天就简单介绍一下用JavaScript开发简单网页版贪吃蛇的小游戏吧

首先我们队贪吃蛇这个游戏进行整体的分析：

游戏主要包括三大类物体：地图，食物，和蛇；对此我们可以建立相应的类。

为了方便起，我们将把整个部件通过JavaScript进行生成。

（注意：如果是用Java写的话从总体来看，地图、食物、蛇（蛇头和蛇身由小正方体构成）都含有宽度、高度、颜色、相对位置等属性，也都会把设置好的通过show显示出来 ，所以我们不妨先建立一个抽象类包含上述属性；）

回来：

首先我们队简单的地图进行考虑：地图应该包括宽度、高度、背景颜色、相对屏幕位置等属性，因此我们在Map类中设定有关属性。然后就是将我们设计的Map显示在屏幕上，因此我们需要设置一个show方法来显示设计的Map；

如下代码所示：（分解代码中注释就是对程序的大致思路）

var  Map = function(){
			this.width = 800;
			this.height = 400;
			this.background = '#ddd';
			this.position = 'absolute';
			this._Map = null;
			this.show = function(){
				    if(this._Map == null){
				    	this._Map = document.createElement("div");
				    	this._Map.style.width = this.width+"px";
				    	this._Map.style.height = this.height +"px";
				    	this._Map.style.position = this.position;
				    	this._Map.style.background = this.background;
				    	document.getElementsByTagName("body")[0].appendChild(this._Map);
				    }
			}
			
		}
而food食物也包含宽度，高度、背景颜色相对地图的位置等等信心，所以我们编写了如下Food类 

var Food = function(){
		        this.width = 20;
		        this.height = 20;
		        this.background = 'green';
		        this.position = 'absolute';
		        this.x = 0;
		        this.y = 0;
		        this._Food = null;
		        
		        this.show = function(){
		        	if(this._Food == null){
		        		this._Food = document.createElement("div");
		        		this._Food.style.width = this.width+"px";
		        		this._Food.style.height = this.height +"px";
		        		this._Food.style.backgroundColor = this.background;
		        		this._Food.style.position = this.position;
		        		this.x = Math.floor(Math.random()*40);//随机生成0~39的数 其目的是因为Map的宽是800，而我们将其宽分为40份，食物占据其中的一份

		        		this.y = Math.floor(Math.random()*20);//随机生成0~19的数 同上所述
		        		this._Food.style.left = this.x*20+'px';
		        		this._Food.style.top = this.y*20 +'px';
		        		map._Map.appendChild(this._Food);
		        	}
		        	this.x = Math.floor(Math.random()*40);
	        		this.y = Math.floor(Math.random()*20);
	        		this._Food.style.left = this.x*20+'px';
	        		this._Food.style.top = this.y*20 +'px';
		        }
			
		}

对于snake类主要刻画蛇的身体与形状 

var Snake = function(){
		     this.width = 19;
		     this.height = 19;
		     this.position = 'absolute';
		     this.direct = 'right';
		     this.body = [[4,2,'yellow',null],[3,2,'green',null],[2,2,'green',null]];//初始蛇的属性，第一个为蛇头[衡座标,纵座标，颜色，是否已动态显示]
		     如果未动态显示，就对其进行appendChild动态生成。
		     
		    	// alert (this.body.length);
		     this.show = function(){
		    	 var length = this.body.length;
		    	 for(var i=0;i<length;i++){
		    		 if(this.body[i][3] == null){    //判断二位数组第四个属性
		    			 this.body[i][3] = document.createElement("div");
		    			 this.body[i][3].style.position = this.position;
		    			 this.body[i][3].style.width = this.width+"px";
		    			 this.body[i][3].style.height = this.height +"px";
		    			 this.body[i][3].style.backgroundColor = this.body[i][2];
		    			 this.body[i][3].style.left = this.body[i][0]*20+'px';
		    			 this.body[i][3].style.top = this.body[i][1]*20 +'px';
		    			 map._Map.appendChild(this.body[i][3]);
		    		 }
				//为了后面当this.body[i][3]！=null时能显示蛇什么组成的位置及属性。如果没有下面俩语句，当this.body[i][3]初始化显示在Map上时，
							// 继续吃到食物而刷新时，将不能动态显示。


		    		 this.body[i][3].style.left = this.body[i][0]*20+'px';
	    			 this.body[i][3].style.top = this.body[i][1]*20 +'px';
		    	 }
		     }
			//对按下键盘上的方向键的键码进行判断，更新direct的值，在此注意，如果键码对应的方向和原来方向正好相反时这种情况应该作废，不执行
		     this.setDirect = function ( code){
		    	 switch(code){
		    	 case 37:
		    		 if(this.direct == 'right'){ break;}
		    		 this.direct = 'left';
		    		 break;
				 case 38:
					 if(this.direct == 'down'){ break;}
					 this.direct = 'up';
		    		 break;
				 case 39:
					 if(this.direct == 'left'){ break;}
					 this.direct = 'right';
	 				break;
 				case 40:
 					if(this.direct == 'up'){ break;}
 					this.direct = 'down';
					 break;
		    	 }
		     }
		//移动蛇头位置，然后从蛇身最后一节开始将前面一节的状态更新到后面一节，因为后面的蛇节会按照前面蛇节的轨迹移动
		this.move = function(){
		    	 if(this.body[0][0] == food.x && this.body[0][1] == food.y){
		    		 this.body.push([0,0,'green',null]);
		    		 food.show();
		    	 }
		    	 var length = this.body.length;
		    	 for(var j=1;j<length;j++){
		    		 if(this.body[0][0] == this.body[j][0] && this.body[0][1] == this.body[j][1] ){//当蛇头和蛇身的任何一个部位重合时，我们判定死亡
		    	        alert("你已经死了");
		    			 location.href="";//死亡后重新开始
		    			 
		    		 }
		    	 }
		    	 for(var i=length-1;i>0;i--){//后面蛇节跟着前面蛇节移动，更新状态
		    		 this.body[i][0] = this.body[i-1][0];
		    		 this.body[i][1] = this.body[i-1][1];
		    	 }
		//对direct属性进行判断，看其运行方向，在此注意蛇头移动到边界时会从对面边界钻出。
		    	 if(this.direct == 'right'){
		    		 if(this.body[0][0]==39){
		    			 this.body[0][0] = -1;
		    		 }
		    		 this.body[0][0] ++;
		    	 }
		    	 if(this.direct == 'left'){
		    		 if(this.body[0][0]==0){
		    			 this.body[0][0] = 40;
		    		 }
		    		 this.body[0][0]--;
		    	 }
		    	 if(this.direct == 'up'){
		    		 if(this.body[0][1]==0){
		    			 this.body[0][1] = 20;
		    		 }
		    		 this.body[0][1]--;
		    	 }
		    	 if(this.direct == 'down'){
		    		 if(this.body[0][1]==19){
		    			 this.body[0][1] = -1;
		    		 }
		    		 this.body[0][1]++;
		    	 }
		    	 this.show();
		     }
		     
		}



对页面加载后应该执行的过程：

window.onload  = function(){
			map = new Map();
			map.show();
			food = new Food();
			food.show();
			snake = new Snake();
			//snake.show();
			
			setInterval("snake.move()", 200);
			document.onkeydown = function(){//获取键码传递给snake的setdirect函数。
				var  code;
				code = event.keyCode;
				snake.setDirect(code);
			}
		}

大致代码就是这个样子

具体详细的代码如下（仅供参考）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>贪吃蛇</title>
</head>
<script>
        var map;
        var food;
        var snake;
		var  Map = function(){
			this.width = 800;
			this.height = 400;
			this.background = '#ddd';
			this.position = 'absolute';
			this._Map = null;
			this.show = function(){
				    if(this._Map == null){
				    	this._Map = document.createElement("div");
				    	this._Map.style.width = this.width+"px";
				    	this._Map.style.height = this.height +"px";
				    	this._Map.style.position = this.position;
				    	this._Map.style.background = this.background;
				    	document.getElementsByTagName("body")[0].appendChild(this._Map);
				    }
			}
			
		}
		
		var Food = function(){
		        this.width = 20;
		        this.height = 20;
		        this.background = 'green';
		        this.position = 'absolute';
		        this.x = 0;
		        this.y = 0;
		        this._Food = null;
		        
		        this.show = function(){
		        	if(this._Food == null){
		        		this._Food = document.createElement("div");
		        		this._Food.style.width = this.width+"px";
		        		this._Food.style.height = this.height +"px";
		        		this._Food.style.backgroundColor = this.background;
		        		this._Food.style.position = this.position;
		        		this.x = Math.floor(Math.random()*40);
		        		this.y = Math.floor(Math.random()*20);
		        		this._Food.style.left = this.x*20+'px';
		        		this._Food.style.top = this.y*20 +'px';
		        		map._Map.appendChild(this._Food);
		        	}
		        	this.x = Math.floor(Math.random()*40);
	        		this.y = Math.floor(Math.random()*20);
	        		this._Food.style.left = this.x*20+'px';
	        		this._Food.style.top = this.y*20 +'px';
		        }
			
		}
		
		var Snake = function(){
			 this.width = 19;
		     this.height = 19;
		     this.position = 'absolute';
		     this.direct = 'right';
		     this.body = [[4,2,'yellow',null],[3,2,'green',null],[2,2,'green',null]];
		     
		     
		    	// alert (this.body.length);
		     this.show = function(){
		    	 var length = this.body.length;
		    	 for(var i=0;i<length;i++){
		    		 if(this.body[i][3] == null){
		    			 this.body[i][3] = document.createElement("div");
		    			 this.body[i][3].style.position = this.position;
		    			 this.body[i][3].style.width = this.width+"px";
		    			 this.body[i][3].style.height = this.height +"px";
		    			 this.body[i][3].style.backgroundColor = this.body[i][2];
		    			 this.body[i][3].style.left = this.body[i][0]*20+'px';
		    			 this.body[i][3].style.top = this.body[i][1]*20 +'px';
		    			 map._Map.appendChild(this.body[i][3]);
		    		 }
		    		 this.body[i][3].style.left = this.body[i][0]*20+'px';
	    			 this.body[i][3].style.top = this.body[i][1]*20 +'px';
		    	 }
		     }
		     this.setDirect = function ( code){
		    	 switch(code){
		    	 case 37:
		    		 if(this.direct == 'right'){ break;}
		    		 this.direct = 'left';
		    		 break;
				 case 38:
					 if(this.direct == 'down'){ break;}
					 this.direct = 'up';
		    		 break;
				 case 39:
					 if(this.direct == 'left'){ break;}
					 this.direct = 'right';
	 				break;
 				case 40:
 					if(this.direct == 'up'){ break;}
 					this.direct = 'down';
					 break;
		    	 }
		     }
		     this.move = function(){
		    	 if(this.body[0][0] == food.x && this.body[0][1] == food.y){
		    		 this.body.push([0,0,'green',null]);
		    		 food.show();
		    	 }
		    	 var length = this.body.length;
		    	 for(var j=1;j<length;j++){
		    		 if(this.body[0][0] == this.body[j][0] && this.body[0][1] == this.body[j][1] ){
		    			//confirm("失败，是否重新开始游戏？");
		    	        alert("你已经死了");
		    			 location.href="";
		    			 
		    		 }
		    	 }
		    	 for(var i=length-1;i>0;i--){
		    		 this.body[i][0] = this.body[i-1][0];
		    		 this.body[i][1] = this.body[i-1][1];
		    	 }
		    	 if(this.direct == 'right'){
		    		 if(this.body[0][0]==39){
		    			 this.body[0][0] = -1;
		    		 }
		    		 this.body[0][0] ++;
		    	 }
		    	 if(this.direct == 'left'){
		    		 if(this.body[0][0]==0){
		    			 this.body[0][0] = 40;
		    		 }
		    		 this.body[0][0]--;
		    	 }
		    	 if(this.direct == 'up'){
		    		 if(this.body[0][1]==0){
		    			 this.body[0][1] = 20;
		    		 }
		    		 this.body[0][1]--;
		    	 }
		    	 if(this.direct == 'down'){
		    		 if(this.body[0][1]==19){
		    			 this.body[0][1] = -1;
		    		 }
		    		 this.body[0][1]++;
		    	 }
		    	 this.show();
		     }
		     
		}
		
		
		window.onload  = function(){
			map = new Map();
			map.show();
			food = new Food();
			food.show();
			snake = new Snake();
			//snake.show();
			
			setInterval("snake.move()", 200);
			document.onkeydown = function(){
				var  code;
				code = event.keyCode;
				snake.setDirect(code);
			}
		}
</script>
<body style="margin-left:200px;">
			
</body>
</html>
当然，如果你还想实现更加绚丽的贪吃蛇游戏可以自行发挥以上代码仅供学习参考。

如果有什么意见或者建议请与我留言，我们可以一起学习

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

html常用空白符

lwl13207136100 2020-06-01 10:18:37

html常用空白符

lwl13207136100 2020-06-01 10:18:37

对于用javascript写贪吃蛇应用

lwl13207136100 2018-08-30 12:29:58