javascript之贪吃蛇

网页版“贪吃蛇”游戏，主要是为了学习JavaScript开发语言！

	<meta http-equiv="Content-Type" c>
	<title>贪吃蛇</title>
	<script type="text/javascript">
		var map;
		var snake;
		var food;
		var timer;
		var timer_count;
		function Map(){
			this.width=800;  //宽度
			this.height=400; //高度
			this.color=&#39;#cccccc&#39;; //背景颜色
			this.position=&#39;absolute&#39;; //定位方式
			this._map=null;   //用于保存地图dom元素
			this.show=function(){
				this._map=document.createElement(&#39;div&#39;);
				this._map.style.width=this.width+&#39;px&#39;;
				this._map.style.height=this.height+&#39;px&#39;;
				this._map.style.backgroundColor=this.color;
				this._map.style.position=this.position;
				document.getElementsByTagName(&#39;body&#39;)[0].appendChild(this._map);
			};
		}
		function Food(){
			this.width=20;  //宽度
			this.height=20; //高度
			this.color=&#39;green&#39;;  //颜色
			this.position=&#39;absolute&#39;; //定位
			this.x=0; //横向第几个格
			this.y=0; //纵向第几个格
			this._food=null; //保存之前创建的食物的div
			this.show=function(){
				if(this._food==null){
					this._food=document.createElement(&#39;div&#39;);
					this._food.style.width=this.width+&#39;px&#39;;
					this._food.style.height=this.height+&#39;px&#39;;
					this._food.style.backgroundColor=this.color;
					this._food.style.position=this.position;
					//将食物div追加地图div中
					map._map.appendChild(this._food);
				}
				//产生随机数  横向：0——39  纵向0——19
				this.x=Math.floor(Math.random()*40);
				this.y=Math.floor(Math.random()*20);
				//设置食物位置
				this._food.style.left=(this.x*20)+&#39;px&#39;;
				this._food.style.top=(this.y*20)+&#39;px&#39;;			
			};
		}
		function Snake(){
			this.width=20;  //蛇节宽度
			this.height=20; //蛇节高度
			this.position=&#39;absolute&#39;; //定位方式
			this.direct=&#39;right&#39;;  //移动方向
			//所有蛇节信息
			this.body=[
						[3,3,&#39;red&#39;,null],
						[2,3,&#39;blue&#39;,null],
						[1,3,&#39;blue&#39;,null],
					];
			this.setDirect=function(code){
				switch(code){
					case 37:
						this.direct=&#39;left&#39;;
						break;
					case 38:
						this.direct=&#39;up&#39;;
						break;
					case 39:
						this.direct=&#39;right&#39;;
						break;
					case 40:
						this.direct=&#39;down&#39;;
						break;
				}
			}
			this.show=function(){
				for(var i=0;i<this.body.length;i++){
					if(this.body[i][3]==null){
						this.body[i][3]=document.createElement(&#39;div&#39;);
						this.body[i][3].style.width=this.width+&#39;px&#39;;
						this.body[i][3].style.height=this.height+&#39;px&#39;;
						this.body[i][3].style.position=this.position;
						this.body[i][3].style.backgroundColor=this.body[i][2];
						map._map.appendChild(this.body[i][3]);
					}
					//如果不是第一次执行，那么只执行这两句
					this.body[i][3].style.left=(this.body[i][0]*20)+&#39;px&#39;;
					this.body[i][3].style.top=(this.body[i][1]*20)+&#39;px&#39;;
				}
			};
			this.move=function(){
				var length=this.body.length-1;  //共有几个蛇节
				for(var i=length;i>0;i--){
					this.body[i][0]=this.body[i-1][0];
					this.body[i][1]=this.body[i-1][1];
				}
				//运行上面for之后，除了蛇头所有蛇身的坐标都向前移动一次,蛇头向右一步
				//判断方向，便于设置蛇头的新坐标
				switch(this.direct){
					case &#39;left&#39;:
						this.body[0][0]-=1;
						break;
					case &#39;right&#39;:
						this.body[0][0]+=1;
						break;
					case &#39;up&#39;:
						this.body[0][1]-=1;
						break;
					case &#39;down&#39;:
						this.body[0][1]+=1;
						break;
				}
				//判断迟到食物
				if(this.body[0][0]==food.x && this.body[0][1]==food.y){
					length=this.body.length-1;
					var x=this.body[length][0];
					var y=this.body[length][1];
					this.body.push([x,y,&#39;blue&#39;,null]);
					food.show();
					document.getElementById(&#39;length&#39;).innerHTML=this.body.length-3;
					document.getElementById(&#39;score&#39;).innerHTML=(this.body.length-3)*100;
				}
				//判断撞墙死
				if(this.body[0][0]==40 || this.body[0][0]==-1 || this.body[0][1]==-1 || this.body[0][1]==20){
					clearTimeout(timer);
					clearTimeout(timer_count);
					alert("游戏结束!");
					return ;
				}
				//判断迟到自己死
				for(var i=length;i>0;i--){
					if(this.body[0][0]==this.body[i][0] && this.body[0][1]==this.body[i][1]){
						clearTimeout(timer);
						clearTimeout(timer_count);
						alert("游戏结束!");
						return ;
					}
				}
				this.show();
			};
		}
		var timercount=0;
		function time_count(){
			timercount++;
			document.getElementById(&#39;time&#39;).innerHTML=timercount;
		}
		window.
			//实例化地图对象，将地图对象添加到body元素
			map=new Map();
			map.show();
			//实例化食物对象，将食物对象放到地图中
			food=new Food();
			food.show();
			//实例化蛇对象，将蛇对象放到地图中
			snake=new Snake();
			snake.show();

			timer=setInterval(&#39;snake.move()&#39;,200);
			timer_count=setInterval(&#39;time_count()&#39;,1000);

			document.
				var code;
				if(window.event){
					code=window.event.keyCode;
				}else{
					code=event.keyCode;
				}
				snake.setDirect(code);
			}
		}
	</script>


	<div style="color:#ff0000;">
		长度：<span id="length">0</span>个    
		分数：<span id="score">0</span>分    
		计时：<span id="time">0</span> s
	</div>

 

以上就介绍了javascript之贪吃蛇，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。