完全兼容的JS贪吃蛇

mengnanleo 2011-06-02 06:03:36

一直不知道JS游戏怎么做

看了liuzhen428525的http://topic.csdn.net/u/20110530/15/dfb16e54-e1e6-46f2-aa57-85802f497c09.html纯JS贪吃蛇后

试着做了一个基本上能完全兼容的纯JS贪吃蛇

目前没有什么BUG，大家帮我检查下，看看能否改进~



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#map{width:500px; height:500px; border:1px solid #CCC; overflow:hidden;}

.maps{width:10px; height:10px; float:left; overflow:hidden;}

</style>

</head>



<body>

<div id="map"></div>

<input type="button" id="start" value="start" />

<input type="text" id="txt" value="" />

</body>

</html>

<script type="text/javascript">

function $(id){return document.getElementById(id);}

(function(){

	var snake={

		play:null,							//动画

		key:39,								//按键值 37左键 38上建 39右键 下键40

		moveKey:[0,1],						//左边:-1代表上 1代表下; 右边: -1代表左 1代表右

		times:200,							//初始速度

		timeSpace:10,						//速度递增值

		foodCount:5,						//食物数量

		count:0,							//食物累计

		snakeBody:['1_1','1_2','1_3'],		//蛇体坐标

		snakeHead:function(){				//蛇头坐标

			return this.snakeBody[this.snakeBody.length-1];

		},

		getKey:function(){

			var ev=arguments.callee.caller.arguments[0]||window.event;

			if(ev.keyCode>=37&&ev.keyCode<=40){

				if(Math.abs(ev.keyCode-this.key)!=2&&Math.abs(ev.keyCode-this.key)!=0){		//去反向行进并防止重复按键盘导致的加速，需要加速去掉等于0的情况

					this.key=ev.keyCode;

					this.getMoveKey();

					if(this.play){															//防止按键盘速度过快导致反向行进致使的游戏结束

						clearTimeout(this.play);

						this.gameRun();

					}

				}

			}

		},

		getMoveKey:function(){

			if(this.key==37) this.moveKey=[0,-1];

			if(this.key==38) this.moveKey=[-1,0];

			if(this.key==39) this.moveKey=[0,1];

			if(this.key==40) this.moveKey=[1,0];

		},

		clearMap:function(){

			$('map').innerHTML='';

			this.key=39;

			this.moveKey=[0,1];

			this.times=200;

			this.timeSpace=10;

			this.foodCount=5;

			this.count=0;

			this.snakeBody=['1_1','1_2','1_3'];

		},

		createMap:function(){

			var maps='';

			for(var i=1;i<51;i++){

				for(var j=1;j<51;j++){

					maps+='<div id="'+i+'_'+j+'" class="maps" title="" style="background:white;"></div>';

				}

			}

			$('map').innerHTML=maps;

		},

		createSnake:function(){

			for(i in this.snakeBody) $(this.snakeBody[i]).style.backgroundColor='black';

		},

		createFood:function(){

			var foodId=Math.floor(Math.random()*50+1)+'_'+Math.floor(Math.random()*50+1);

			if(!$(foodId)||snake.count>=snake.foodCount) return false;

			if($(foodId).title==''&&($(foodId).style.backgroundColor=='white'||$(foodId).style.backgroundColor=='#ffffff')){

				$(foodId).title='food';

				$(foodId).style.backgroundColor='black';

				snake.count++;

			}

		},

		snakeMove:function(){

			var head=this.snakeHead();

			var next_x=this.moveKey[0];

			var next_y=this.moveKey[1];

			var next_head=(parseFloat(head.split('_')[0])+next_x)+'_'+(parseFloat(head.split('_')[1])+next_y);

			if($(next_head)&&$(next_head).title=='food'&&($(next_head).style.backgroundColor=='black'||$(next_head).style.backgroundColor=='#000000')){

				$(next_head).tltle='';

				this.snakeBody.push(next_head);

				if(this.times>this.timeSpace) this.times-=this.timeSpace;

				this.count--;

			}else if($(next_head)&&$(next_head).title==''&&($(next_head).style.backgroundColor=='white'||$(next_head).style.backgroundColor=='#ffffff')){

				$(next_head).style.backgroundColor='black';

				this.snakeBody.push(next_head);

				var snakeFoot=this.snakeBody.shift();

				$(snakeFoot).style.backgroundColor='white';

			}else{

				this.gameOver();

				return false;

			}

			this.play=setTimeout(function(){snake.gameRun();},this.times);

		},

		gameStart:function(){

			this.clearMap();

			this.createMap();

			this.createSnake();

			this.gameRun();

			$('start').disabled=true;

			$('start').blur();

			document.onkeydown=function(){snake.getKey();};

		},

		gameRun:function(){

			this.createFood();

			this.snakeMove();

			$('txt').value=this.times;

		},

		gameOver:function(){

			document.onkeydown='';

			if(this.play) clearTimeout(this.play);

			$('start').disabled=false;

			$('start').value='restart';

			alert('You lose!');

			$('start').focus();

		}

	};

	$('start').focus();

	$('start').onclick=function(){snake.gameStart();};

})();

</script>