javascript之贪吃蛇-php教程-PHP中文网

javascript之贪吃蛇

php中文网

发布： 2016-07-29 09:02:18

原创

1058人浏览过

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

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" c/html;charset=UTF-8">
	<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='#cccccc'; //背景颜色
			this.position='absolute'; //定位方式
			this._map=null;   //用于保存地图dom元素
			this.show=function(){
				this._map=document.createElement('div');
				this._map.style.width=this.width+'px';
				this._map.style.height=this.height+'px';
				this._map.style.backgroundColor=this.color;
				this._map.style.position=this.position;
				document.getElementsByTagName('body')[0].appendChild(this._map);
			};
		}
		function Food(){
			this.width=20;  //宽度
			this.height=20; //高度
			this.color='green';  //颜色
			this.position='absolute'; //定位
			this.x=0; //横向第几个格
			this.y=0; //纵向第几个格
			this._food=null; //保存之前创建的食物的div
			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.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)+'px';
				this._food.style.top=(this.y*20)+'px';			
			};
		}
		function Snake(){
			this.width=20;  //蛇节宽度
			this.height=20; //蛇节高度
			this.position='absolute'; //定位方式
			this.direct='right';  //移动方向
			//所有蛇节信息
			this.body=[
						[3,3,'red',null],
						[2,3,'blue',null],
						[1,3,'blue',null],
					];
			this.setDirect=function(code){
				switch(code){
					case 37:
						this.direct='left';
						break;
					case 38:
						this.direct='up';
						break;
					case 39:
						this.direct='right';
						break;
					case 40:
						this.direct='down';
						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('div');
						this.body[i][3].style.width=this.width+'px';
						this.body[i][3].style.height=this.height+'px';
						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)+'px';
					this.body[i][3].style.top=(this.body[i][1]*20)+'px';
				}
			};
			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 'left':
						this.body[0][0]-=1;
						break;
					case 'right':
						this.body[0][0]+=1;
						break;
					case 'up':
						this.body[0][1]-=1;
						break;
					case 'down':
						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,'blue',null]);
					food.show();
					document.getElementById('length').innerHTML=this.body.length-3;
					document.getElementById('score').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('time').innerHTML=timercount;
		}
		window.
			//实例化地图对象，将地图对象添加到body元素
			map=new Map();
			map.show();
			//实例化食物对象，将食物对象放到地图中
			food=new Food();
			food.show();
			//实例化蛇对象，将蛇对象放到地图中
			snake=new Snake();
			snake.show();

			timer=setInterval('snake.move()',200);
			timer_count=setInterval('time_count()',1000);

			document.
				var code;
				if(window.event){
					code=window.event.keyCode;
				}else{
					code=event.keyCode;
				}
				snake.setDirect(code);
			}
		}
	</script>
</head>
<body>
	<div style="color:#ff0000;">
		长度：<span id="length">0</span>个&#160;&#160;&#160;&#160;
		分数：<span id="score">0</span>分&#160;&#160;&#160;&#160;
		计时：<span id="time">0</span>&#160;s
	</div>
</body>
</html>

登录后复制