JS ——简易贪吃蛇

·港岛妹妹

于 2020-12-25 20:52:03 发布

阅读量121

点赞数

分类专栏： js练习题文章标签： js

本文链接：https://blog.csdn.net/qq_44417271/article/details/111706104

版权

js练习题专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#game{
				height: 600px;
				width: 600px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				border: 1px solid #f0f;
				background: skyblue;
			}
			#game span{
				height: 20px;
				width: 20px;
				border-radius: 50%;
				background: pink;
				display: block;
				position: absolute;
			}
			#game div{
				position:absolute;
				width: 20px;
				height: 20px;
				border-radius:50%;
				background-color:orange;
			}
		</style>
	</head>
	<body>
		<div id="game">
			<!-- <span id="span"></span> -->
		</div>
		
		
		<script type="text/javascript">
			
			function getRandomColor(){
			  var arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
			  var result = "#";
			  for(var i = 0; i < 6;i++){
			    var index = Math.floor(Math.random() * 16)
			    result = result + arr[index];
			  }
			  return result;
			}
			
			
			
			// 游戏信息
			var gameInfo={
				el:document.getElementById("game"),
				width:600,
				goDie:function(){
					clearInterval(snake.moveID)
				}
			}
			
			
			// 蛇的相关信息
			var snake={
				// 蛇的初始化长度
				length:4,
				// 每次增加的长度
				width:20,
				// 蛇的方向
				dir:"right",
				bodylist:[],
				moveID:0,
				// 初始化一条蛇
				begin:function(){
					for(var i=0;i<this.length;i++){
						var span=document.createElement("span")
						gameInfo.el.appendChild(span)
						span.style.top="0px";
						span.style.left=i*snake.width+"px";
						this.bodylist.push(span)
					}
				},
				
				// 蛇的移动逻辑
				move:function(){
					this.moveID= setInterval(function(){
						
						
						// 将蛇尾放在蛇身前
						var foot=snake.bodylist[0];
						var head=snake.bodylist[snake.bodylist.length-1]
						
						if(snake.dir==="right"){
							foot.style.top=head.style.top;
							foot.style.left=parseInt(head.style.left)+snake.width+"px";
						}
						
						if(snake.dir==="left"){
							foot.style.top=head.style.top;
							foot.style.left=parseInt(head.style.left)-snake.width+"px";
						}
						
						if(snake.dir==="bottom"){
							foot.style.top=parseInt(head.style.top)+snake.width+"px";
							foot.style.left=head.style.left;
						}
						
						if(snake.dir==="top"){
							foot.style.top=parseInt(head.style.top)-snake.width+"px";
							foot.style.left=head.style.left;
						}
						// 调整数组的对应关系，保证页面中的节点顺序与数组的顺序相一致
						snake.bodylist.shift()
						snake.bodylist.push(foot)	
						
						// 得分碰撞检测2
						var HEAD=snake.bodylist[snake.bodylist.length-1]
						var HEADPoint={
							x:parseInt(HEAD.style.left),
							y:parseInt(HEAD.style.top),
						}
						if(HEADPoint.x===food.point.x&&HEADPoint.y===food.point.y){
							food.creat()
							snake.addbody()
						}
						
						
						
						
						// 死亡碰撞检测之边缘碰撞
						if(HEADPoint.x<0||HEADPoint.x===gameInfo.width||HEADPoint.y<0||HEADPoint.y===gameInfo.width){
							gameInfo.goDie();
						}
						// 死亡碰撞检测之自己碰撞
						for(var i=0;i<snake.bodylist.length-1;i++){
							var point={
								x:parseInt(snake.bodylist[i].style.left),
								y:parseInt(snake.bodylist[i].style.top)
							}
							if(HEADPoint.x===point.x&&HEADPoint.y===point.y){
								gameInfo.goDie()
							}
						}
						
						
					},300)
				},
				// 长身体	
				addbody:function(){
					var span=document.createElement("span")
					gameInfo.el.appendChild(span)
					span.style.top=snake.bodylist[0].style.top;
					span.style.left=snake.bodylist[0].style.left;
					this.bodylist.unshift(span)
				}
			}
			
			
			
			
			// 生成食物1
			var food={
				el:document.createElement("div"),
				point:{
					x:0,
					y:0
				},
				creat:function(){
					// 检测是否有食物
					if(gameInfo.el.getElementsByTagName("div").length===0){
						gameInfo.el.appendChild(this.el)
					}
					// gameInfo.el.appendChild(this.el)
					this.el.style.backgroundColor=getRandomColor();
					this.point.x=parseInt(Math.random()*((gameInfo.width-snake.width)/snake.width))*snake.width;
					this.point.y=parseInt(Math.random()*((gameInfo.width-snake.width)/snake.width))*snake.width;
					this.el.style.left=this.point.x+"px"
					this.el.style.top=this.point.y+"px"
				}
				
			}
			snake.begin()
			snake.move()
			food.creat()
			document.onkeydown=function(event){
				if(event.keyCode ===37&&snake.dir!=="right"){
					snake.dir="left"
				}
				if(event.keyCode ===38&&snake.dir!=="bottom"){
					snake.dir="top"
				}
				if(event.keyCode ===39&&snake.dir!=="left"){
					snake.dir="right"
				}
				if(event.keyCode ===40&&snake.dir!=="top"){
					snake.dir="bottom"
				}
			}
			
		</script>
		
	</body>
</html>

总结：
1.创建游戏信息，蛇的信息
2.初始化一条蛇
3.蛇的初始移动逻辑（需注意数组内元素的顺序）
4.通过上下左右按键控制蛇的方向及移动
5.随机生成食物（要检测当前是否有食物）
6.当蛇与食物碰撞时判断，使食物消失，重新生成一个元素
7.使蛇的身体边长
8.蛇的死亡碰撞检测（边缘碰撞与自己碰撞）

对象及其函数：

1.随机颜色
2.游戏信息（死亡函数）
3.蛇的相关信息初始蛇蛇移动（得分检测，死亡检测）计时器改变身体长度
4.生成食物
5.绑定键盘按下事件