JavaScript——贪吃蛇

最新推荐文章于 2022-04-15 16:21:07 发布

原创最新推荐文章于 2022-04-15 16:21:07 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javaScript

JAVA 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了使用HTML、CSS和JavaScript实现贪吃蛇游戏的过程，包括地图、食物、蛇的移动逻辑及碰撞检测等核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>贪吃蛇</title>
		<script type="text/javascript">
			
			var map;
			var snake;
			var food;
			var timer;  //定义计时器
			var sum = 0;
			
			//设置地图
			function Map(){
				this.width = 800;   //地图大小
				this.height =400;
				this.backgroundColor = '#dddddd';
				this.position = 'absolute';  //定位方式
				this._map = null;  			//添加map属性,保存地图dom元素
				this.show = function(){
					this._map = document.createElement('div');  //创建dom元素,只是保存在内存中
					this._map.style.width =this.width+'px';
					this._map.style.height =this.height+'px';
					this._map.style.backgroundColor =this.backgroundColor;
					this._map.style.position = this.position;
					document.getElementsByTagName('body')[0].appendChild(this._map);
				};
			};
			
			//食物  始终是一个
			function Food(){
				this.width = 20;
				this.height =20;
				this.backgroundColor = 'green';
				this.position = 'absolute';  //定位方式
				this.x= 0;   //坐标
				this.y =0;   
				this._food = null;
				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.backgroundColor;
						this._food.style.position =  this.position;
						
						//将食物追加到地图中
						map._map.appendChild(this._food);
					}
					//生成随机数字坐标
					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]
							];    //表示蛇节,蛇头[x,y,颜色]  蛇身[x,y,颜色]
				
				this.setDirect = function(code){
		
					switch(code){
						case 65:   //37
							if(this.direct!='right'){this.direct='left';}	
							break;
						case 87:					
							if(this.direct!='down'){this.direct='up';}
							break;
						case 68:   
							if(this.direct!='left'){this.direct='right'};
							break;
						case 83:
							if(this.direct!='up'){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;  //共有几个蛇节
					//蛇的身体都向前移动,等于前一个div的位置
					for (var i = length-1; i > 0; i--) {
						this.body[i][0] = this.body[i-1][0];
						this.body[i][1] = this.body[i-1][1];
					}
					
					//判断移动的方向
					switch(this.direct){
						case 'left':
							this.body[0][0] -= 1;
							break;
						case 'up':
							this.body[0][1] -= 1;
							break;
						case 'down':
							this.body[0][1] += 1;
							break;
						case 'right':
							this.body[0][0] += 1;
							break;
					}
					//判断吃到食物
					if(this.body[0][0] == food.x && this.body[0][1] == food.y){
						//添加蛇身
						var length = this.body.length;
						var x = this.body[length-1][0];
						var y = this.body[length-1][1];
						this.body.push([x,y,'blue',null]);
						
						sum += 1;
						document.getElementById('count').innerHTML= '共'+sum + '分';

						food.show();   //刷新食物
					}
					//判断撞墙死
					if(this.body[0][0] < 0 || this.body[0][0] > 39 || this.body[0][1] <0 || this.body[0][1] > 19 ){
						document.getElementById('bug').innerHTML='撞墙死：';
						clearTimeout(timer);
						return;
					}
					
					//判断迟到自己
					for (var i = length-1; i > 0 ; i--) {
						if(this.body[0][0] == this.body[i][0]&& this.body[0][1]==this.body[i][1] ){
							document.getElementById('bug').innerHTML='吃到自己死：';
							clearTimeout(timer);
							return;
						}
					}
					
					
					//刷新输出
					this.show();
				};
			}
			
			window.onload=function(){
				//实例化地图对象
				//将地图对象添加到body元素
				map =new Map();
				map.show();
				
				//实例化食物对象
				//将事务放入地图
				food= new Food();
				food.show();
				
				
				//实例化蛇对象
				snake = new Snake();
				snake.show();   
				//按时刷新蛇,并且移动 
				timer = setInterval('snake.move()',100);  
				//键盘抬起事件
				document.onkeyup = function(event){   //世界对象
					
					var code;
					if(window.event){
						code = window.event.keyCode;
					}else{
						code = event.keyCode;
					}
					
					snake.setDirect(code);							
				}
	
			};	
			
			function restart(){
				location.reload();
			}
	
				
			
		</script>
	</head>
	<body>
	<button id="restart" value="重新开始" onclick="restart()">重新开始</button>
	<select id = "rank" >
		<option value ="1000">青铜</option>
		<option value ="600">白银</option>
		<option value ="400">黄金</option>
		<option value ="200">铂金</option>
		<option value ="100">钻石</option>
		<option value ="80">星耀</option>
		<option value ="50">王者</option>
	</select>
	<p id="bug"></p>	
	<p id ="count">共0分</p>
	<p>操作键：上（W）下（S）左（A）右（D）</p>
	</body>
</html>

效果如下：
在这里插入图片描述
功能不是很完善，待完善。

	//设置等级
	<select id = "rank" >
		<option value ="1000">青铜</option>
		<option value ="600">白银</option>
		<option value ="400">黄金</option>
		<option value ="200">铂金</option>
		<option value ="100">钻石</option>
		<option value ="80">星耀</option>
		<option value ="50">王者</option>
	</select>

	
			/* document.getElementById('rank').onclick{
				var rank  = document.getElementById('rank').value;
				alert(rank);
			} */