纯JQ实现贪吃蛇

最新推荐文章于 2022-05-27 14:12:08 发布

木子芳兮

最新推荐文章于 2022-05-27 14:12:08 发布

阅读量780

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前段收藏

本文链接：https://blog.csdn.net/qq_40310480/article/details/102680967

前段收藏专栏收录该内容

6 篇文章

订阅专栏

这次的实现还是使用table实现,移动蛇头还是纯色,那块想美化加四张图片添加url引用就行了,ok说说思路
最开始做的时候,
这次的实现还是使用table实现,移动蛇头还是纯色,那块想美化加四张图片添加url引用就行了,ok说说思路,
1: 初始化使用一个二维数组记录组成snake的所有td下标,然后默认向右移动,我这个默认是从左上角开始的
2: snake的移动还是使用interval,这个最好实现,设置500毫秒刷新一次就行了,
加分肉块(暂时先这么叫吧)直接使用一个生成随机数的方法,每次吃上就再次调用生成
3: snake的具体移动问题,规划到这块才发现这是最大的问题,开始想的是记录组成蛇身的每个表格td,然后在下次更新时候对所有下标做一个对应的操作,脑子里随便想了一幅心电图样子的爬行轨迹图,简直太复杂了.换个思路看能不能有简便的处理方式.
首先观察一下snake的特点,由于我是使用表格实现的,所以每次定时器刷新,snake的头部都会在对应方向增加一个格子,暂时先不用管方向问题,只要记得头部会增加一个格子,于此对应的是,尾部会减少一个格子,这样的话,看起来只要在interval里面每次加减头部就行了.然而还有一个问题,如果遇到加分肉块怎么处理——遇到加分块继续直走就说明这个加分块的下标就是snake所生成的头部,这样的话,尾部不做减少操作,头部继续增加,蛇身变长.此时刚才”吃”掉的加分块已经变成组成蛇身数组的一部分了,毫不影响后面的逻辑,
4: 方向,使用keydown捕捉四个方向键,然后对snake的头部生成下标做操作:
左:行不变,列减小,只适用于上下移动,向右移动,此按键不生效
上:行减小,列不变,只适用于左右自动,向下移动此按键不生效
右:行不变,列增加,…
下:行增加,列不变,…
5: "死亡"判定,暂设定为只能在表格内移动,不能左出右进或者右出坐进,所以新生成的行和列必须小于行数(方形表格),碰到蛇身也会死,这个直接使用生成头部下标和和组成蛇身的数组去遍历对比,有相等的就over清除interval
好了所有都准备妥当搬砖!
贴两张最终图
初始化
在这里插入图片描述
GameOver

14*14的看着挺有模有样的,8 *8的太猥琐了,ok贴码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
	<script type="text/javascript" src="../js/jquery.min.js"></script>

	<body>
		<table id="tab" class="table table-bordered table-hover" style="width: 50%;">
			<tbody id="tb">
			</tbody>
		</table>
		<button id="reloadTb" class="btn btn-primary btn-block" style="width: 20%;">重置棋盘	</button>
	</body>
	<script type="text/javascript">
		var countRow = 8;//表格的行和列
		var direction = 3;//初始移动方向标识
		var hang = 0;
		var lie = 2;//初始snake头部下标
		var hangFlag = 0; //0,不变,1,增加,2,减小
		var lieFlag = 1;
		var score = 0;//分数
		let randomHang, randomLie;//随机数
		var a = [
			[0, 0],
			[0, 1],
			[0, 2]
		];
		//重置表格
		$("#reloadTb").click(function() {
			$("#tb").empty();
			createTable();
		})
		
		//初始化创建一个表格
		$(function() {
			createTable();
		})

        //500毫秒移动一次
		var interval = setInterval(function() {
			moveSnake();
		}, 500);

		function moveSnake() {
			var trArr = $("#tb").children();
			switch(hangFlag) { //判断按键
				case 0:
					hang;
					break;
				case 1:
					hang++;
					break;
				case 2:
					hang--;
				default:
					break;
			}
			switch(lieFlag) { //判断按键
				case 0:
					lie;
					break;
				case 1:
					lie++;
					break;
				case 2:
					lie--;
				default:
					break;
			}
			var newArr = [hang, lie];
			var flag = (hang < countRow) && (hang >= 0) &&
				(lie < countRow) && (lie >= 0);
			if(!flag) {
				clearInterval(interval);
				console.log("游戏结束");
				alert("总分 : " + score + " 分");
				return;
			}
			//撞到身体也停止
			var flag = false;
			for(let i = 0; i < a.length; i++) {
				if((hang == a[i][0]) && (lie == a[i][1])) {
					console.log("游戏结束");
					alert("总分 : " + score + " 分");
					clearInterval(interval);
					break;
				}
			}
			//头部增加
			trArr.eq(newArr[0]).find("td").eq(newArr[1]).css("background-color", "black"); //一直加
			a.push(newArr);
			//console.log(hang + "  " + lie + "  随机  " + randomHang + "   " + randomLie);
			if((hang == randomHang) && (lie == randomLie)) { //吃上了加分
				score++;
				createRamdom(trArr); //继续创建
			} else {//没吃上减少尾部
				trArr.eq(a[0][0]).find("td").eq(a[0][1]).css("background-color", "#FDF5E6");
				a.splice(0, 1);
			}
		}

		var createTable = function() {
			for(let i = 0; i < countRow; i++) {
				let tr = $("<tr></tr>");
				for(var j = 0; j < countRow; j++) {
					let td = $("<td style='background-color: #FDF5E6;'></td>");
					td.css("height", "40px");
					td.css("width", "40px");
					tr.append(td);
				}
				$("#tb").append(tr);
			}
			var trArr = $("#tb").children();
			//初始化创建蛇身部位
			for(var i = 0; i < a.length; i++) {
				var td = trArr.eq(a[i][0]).find("td").eq(a[i][1]);
				td.css("background-color", "black");
			}
			createRamdom(trArr); //创建随机加分块
		}

		var createRamdom = function(trArr) { //生成数在表格内
			let flag = true;
			//生成原则是不能在蛇身上,目前使用颜色所判断,这样可能效率有点低,后期再修正
			while(flag) {
				var tempHang = Math.round(Math.random() * (countRow - 1));
				var tempLie = Math.round(Math.random() * (countRow - 1));
				var color = trArr.eq(tempHang).find("td").eq(tempLie).css("background-color");
				if(color != "black") {
					randomHang = tempHang;
					randomLie = tempLie;
					trArr.eq(randomHang).find("td").eq(randomLie).css("background-color", "black");
					flag = false;
				}
			}
		}

		$(document).keydown(function(event) {
			var keyNum = event.which; //获取键值
			switch(keyNum) { //判断按键
				case 37: //右行不能左拐
					if(direction != 3) {
						hangFlag = 0;
						lieFlag = 2;
						direction = 1;
					}
					break;
				case 38: //下行不能上拐
					if(direction != 4) {
						hangFlag = 2;
						lieFlag = 0;
						direction = 2;
					}
					break;
				case 39: //右行不能左拐
					if(direction != 1) {
						hangFlag = 0;
						lieFlag = 1;
						direction = 3;
					}
					break;
				case 40: //下行不能上拐
					if(direction != 2) {
						hangFlag = 1;
						lieFlag = 0;
						direction = 4;
					}
					break;
				default:
					break;
			}
		});
	</script>

</html>