對於用javascript寫貪喫蛇應用

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>

當然，如果你還想實現更加絢麗的貪喫蛇遊戲可以自行發揮以上代碼僅供學習參考。

如果有什麼意見或者建議請與我留言，我們可以一起學習

對於用javascript寫貪喫蛇應用

對於用javascript寫貪喫蛇應用

android連接數據庫

android之fragment征程

html常用空白符

git使用教程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結