javascript開發貪喫蛇小遊戲練習

對於javascript語言，經過一段時間努力，有些入門，所以搗鼓一些小遊戲練手。和之前的canvas相比，只能說有些進步，對於遊戲圖層分佈漸漸有了模糊的認知。

對於設計模式，編程開發，算法之類的，任重而道遠了。

貪喫蛇小遊戲代碼有點亂，不過還是寫了詳細註釋，希望對你們有幫助，高手勿噴，我是小白。

遊戲設計思路：

1.開始  加速  重來三個按鈕，分別觸發不同事件

2.貪喫蛇運動，喫食物，碰到邊界，路障，咬到自己身體

3.用div展示出來

其中主要是第二步，貪喫蛇運動邏輯。開始時候隨機分配座標xy，然後分配運動方向，根據運動方向對x或者y座標進行疊加，那麼就需要一個數組body來保存相對應的座標和顏色數據，但貪喫蛇要運動，所以需要setInterval計時器不斷刷新數據並且保存進body中。

其次xy數據不斷更新時候，就要判斷貪喫蛇進行下一步碰到的是什麼？空地？障礙物？食物？自己身體？所以就需要第二組障礙數組（多個div表示），一個食物對象{x:x,y:y,color:color}。有了三個數據，就可以根據他們的xy座標進行比對，相同就返回對應值。

最後，就是接收貪喫蛇xy座標，顏色等數據動態生成div，爲了動起來，每次生成都要先進行界面刷新，刪除之前的div，我使用的是removeChild直接刪除div節點。

    js代碼

function $(id){return document.getElementById(id);}
window.οnlοad=function(){
	
	//開始遊戲
	$('start_pause').οnclick=function(){
		game();
		this.disabled='true';
		this.style.background='#4E85FC';
		this.style.cursor='default';
		this.style.color='#eee';
	}
	$('speed').οnclick=function(){
		if(snake.speed<=40){return;}
		snake.speed-=30;
		clearInterval(snake.timer);
		snake.move();
	}
	$('restart').οnclick=function(){
		window.location.reload(); 
	}
}

//遊戲入口
function game(){
	snake.init();
	snake.move();
	
}

//貪喫蛇類
var snake={
	food:{},//食物
	hin:[],//障礙
	body:[],//貪喫蛇身體數組
	direction:1,//方向
	speed:200,//速度
	timer:null,//計時器
	row:35,//行
	col:35,//列
	color:['red','blue','#888'],//顏色
	pause:true,//暫停
	board_div:function(i,j,color,f){
		if(f){var fdiv=$('food');}
		else{var odiv=$('content');}
		var el=document.createElement('div');
		el.id=i+j;
		el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+color+';position:absolute;top:0;left:0;';
		el.style.marginTop=j*10+'px';
		el.style.marginLeft=i*10+'px';
		if(f){fdiv.appendChild(el);}
		else{odiv.appendChild(el);}
	},
	scDiv:function(){
		for(var i=0;i<this.body.length;i++){
			var sc=$(this.body[i].x+this.body[i].y);
			var odiv=$('content');
			odiv.removeChild(sc);
		}
	},
	sfDiv:function(){
		var sc=$(this.food.x+this.food.y);
		var odiv=$('food');
		odiv.removeChild(sc);
	},
	//初始化
	init:function(){
		this.hinder();//障礙物
		//產生食物
		var x=Math.floor(Math.random()*35);
		var y=Math.floor(Math.random()*35);
		//蛇頭
		var sx=Math.floor(Math.random()*25);
		var sy=Math.floor(Math.random()*25);

		for(var i=0;i<this.hin.length;i++){
			if((sx==x&&sy==y)||(sx==this.hin[i].x&&sy==this.hin[i].y)||(x==this.hin[i].x&&y==this.hin[i].y)){
				sx=Math.floor(Math.random()*25);
				sy=Math.floor(Math.random()*25);
				x=Math.floor(Math.random()*35);
				y=Math.floor(Math.random()*35);
				this.food={x:x,y:y};
			}
		}
		
		this.body.push({x:sx,y:sy,color:this.color[0]});
		this.board_div(x,y,this.color[1],true);//食物
		this.board_div(this.body[0].x,this.body[0].y,this.body[0].color);
		

		document.οnkeydοwn=function(){
			//按鍵事件
			e=event||window.event;
			switch(e.keyCode){
				case 38://up
					if(snake.direction==2){break;}
					snake.direction=0;
				break;
				case 39://right
					if(snake.direction==3){break;}
					snake.direction=1;
				break;
				case 40://down
				if(snake.direction==0){break;}
					snake.direction=2;
				break;
				case 37://left
				if(snake.direction==1){break;}
					snake.direction=3;
				break;
			}
		}		
	},
	move:function(){//移動
		this.timer=setInterval(function(){
			if(snake.canMove()==-1){clearInterval(snake.timer);alert('game over!!!');}
			else{
				snake.scDiv();//清除蛇
				var _x=snake.nextPos().x;
				var _y=snake.nextPos().y;
				if(snake.canMove()==1){//食物
					var _color=snake.color[0];
					snake.body.unshift({x:_x,y:_y,color:_color});
					snake.sfDiv();//清除食物
					var x=Math.floor(Math.random()*35);
					var y=Math.floor(Math.random()*35);
					snake.food={x:x,y:y};
					snake.board_div(x,y,snake.color[1],true);
				}
				else{
					var _color=snake.nextPos().color;
				}
				snake.body.pop();//擦除蛇數組最後元素
				snake.body.unshift({x:_x,y:_y,color:_color});
				for(var i=0;i<snake.body.length;i++){
					snake.board_div(snake.body[i].x, snake.body[i].y, snake.body[i].color);
				}
			}
			
		},this.speed);
	},
	nextPos:function(){//移動下一步xy值
		var x=this.body[0].x;
		var y=this.body[0].y;
		switch(this.direction){
			case 0:y--;break;//up
			case 1:x++;break;//right
			case 2:y++;break;//down
			case 3:x--;break;//left
		}
		return {x:x,y:y,color:this.body[0].color};
	},
	canMove:function(){//檢查下一步
		var x=this.nextPos().x;
		var y=this.nextPos().y;//蛇頭座標
		if(x>=this.row||x<0||y>=this.col||y<0){return -1;}//邊界
		//頭碰身體
		for(var i=0;i<this.body.length;i++){
			if(this.body[i].x==x&&this.body[i].y==y){
				return -1;
			}
		}
		//食物
		if(this.food.x==x&&this.food.y==y){return 1;}
		//障礙物
		for (var i =0;i<this.hin.length;i++) {
			if(this.hin[i].x==x&&this.hin[i].y==y){return -1;}
		}
		return 0;//空地
	},
	hinder:function(){//障礙
		var hj=Math.floor(Math.random()*10+4);
		var hi=Math.floor(Math.random()*10);
		for(var i=hi;i<20;i++){
			var hdiv=$('hinder');
			var el=document.createElement('div');
			el.id=i;
			el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+this.color[2]+';position:absolute;top:0;left:0;';
			el.style.marginTop=hj*10+'px';
			el.style.marginLeft=i*10+'px';
			hdiv.appendChild(el);
			this.hin.push({x:i,y:hj,color:this.color[2]});
		}
		for(var i=hj;i<20;i++){
			var hdiv=$('hinder');
			var el=document.createElement('div');
			el.id=i;
			el.style.cssText='border:1px solid yellow;width:10px;height:10px;background:'+this.color[2]+';position:absolute;top:0;left:0;';
			el.style.marginTop=i*10+'px';
			el.style.marginLeft=hj*10+'px';
			hdiv.appendChild(el);
			this.hin.push({x:hj,y:i,color:this.color[2]});
		}
	}
}

html界面代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>貪喫蛇javascript版本</title>
	<script type="text/javascript" src="js/snake.js"></script>
	<style type="text/css">
		#main{width:400px;height: 420px; margin:0 auto;}
		#content,#food,#hinder{width: 350px;height: 350px;margin-left: 25px;margin-top: 10px;position: relative;border:1px solid red;}
		#food{margin-top: -352px;}
		#hinder{margin-top: -352px;}
		#inp{text-align: center;margin-top: 10px;}
		input{width: 100px;height: 30px;outline: none;border:0;color: #fff;background: #4E85FC;font-size: 14px;cursor: pointer;}
		input:hover{background: #0D58FC;}
	</style>
</head>
<body>
	<div id="main">
		<div id="content"></div>
		<div id="food"></div>
		<div id="hinder"></div>
		<div id="inp">
			<input type="button" id="start_pause" value="開始">
			<input type="button" id="speed" value="速度">
			<input type="button" id="restart" value="重新開始">
		</div>
	</div>
</body>
</html>

完整代碼下載