JavaScript之贪吃蛇

怼烎@ 2022-08-20 12:12 173阅读 0赞

网页版“贪吃蛇”游戏，主要是为了学习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" content="text/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.οnlοad=function(){
    			//实例化地图对象，将地图对象添加到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.οnkeyup=function(event){
    				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>个    
    		分数：<span id="score">0</span>分    
    		计时：<span id="time">0</span> s
    	</div>
    </body>
    </html>