萌新尝试的贪吃蛇求大神帮忙提些改进建议找找bug

最新推荐文章于 2021-11-05 21:45:25 发布

H.ref

最新推荐文章于 2021-11-05 21:45:25 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/h_ref/article/details/107678123

版权

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		html,
		body {
			height: 100%;
			margin: 0px;
		}

		div {
			width: 25px;
			height: 25px;
			background-color: red;
			position: absolute;

		}

		#box1 {
			left: 150px;
			top: 100px;
		}

		#box2 {
			left: 125px;
			top: 100px;
		}

		#box3 {
			left: 100px;
			top: 100px;
		}

		p {
			position: fixed;
			left: 5px;
			top: 5px;

			font-family: "Times New Roman", Times, serif;
			font-weight: bold;
			font-size: 26px;
			color: #C9F;
		}

		#score {
			position: fixed;
			left: 80px;
			top: 5px;
			font-family: "Times New Roman", Times, serif;
			font-weight: bold;
		}

		#accel {
			position: fixed;
			left: 200px;
			top: 5px;
			font-family: "Times New Roman", Times, serif;
			font-weight: bold;
		}

		#failflag {
			position: fixed;
			left: 320px;
			top: 5px;
			font-family: "Times New Roman", Times, serif;
			font-weight: bold;
		}

		.main {
			width: 1200px;
			height: 1000px;
			background-color: rgb(245, 240, 200);
			position: relative;
			top: 100px;
			left: 300px;
			border: 2px solid rgb(93, 93, 206);

		}
	</style>

	<script>
		function direction() {
			var box2 = document.getElementById("box2");
			var box1 = document.getElementById("box1");
			var box3 = document.getElementById("box3");
			arr = [box1, box2, box3];

			accel = 80;
			inilength = 3;
			var flag;
			document.onkeydown = function (ev) {
				ev = event || window.event;
				switch (ev.keyCode) {
					case 37:
						if (flag == 2) {
							break;
						}
						flag = 0;
						moveSnack(flag);
						break;
					case 38:
						if (flag == 3) {
							break;
						}
						flag = 1;
						moveSnack(flag);
						break;
					case 39:
						if (flag == 0) {
							break;
						}
						flag = 2;
						moveSnack(flag);
						break;
					case 40:
						if (flag == 1) {
							break;
						}
						flag = 3;
						moveSnack(flag);
						break;
				}
			};
		}

		function addnew() {
			var newdiv = document.createElement("div");
			var main = document.getElementsByClassName("main")[0];
			main.appendChild(newdiv);
			console.log(main.clientHeight);
			console.log(main.clientWidth);


			var newtop = Math.round(Math.random() * (Math.floor(main.clientHeight / 25) - 1)) * 25;
			var newleft = Math.round(Math.random() * (Math.floor(main.clientWidth / 25) - 1)) * 25;
			console.log(newtop + "..." + newleft);
			if (newtop > document.body.clientHeight || newleft > document.body.clientWidth) {
				alert("ss");
			}
			for (var x = 0; x < arr.length; x++) {
				if (newleft == arr[x].offsetLeft && newtop == arr[x].offsetTop) {

					var newtop = Math.round(Math.random() * (Math.floor(main.clientHeight / 25) - 1)) * 25;
					var newleft = Math.round(Math.random() * (Math.floor(main.clientWidth / 25) - 1)) * 25;
					x--;
				}
			}


			newdiv.style.left = newleft + 'px';
			newdiv.style.top = newtop + 'px';
			newdiv.style.backgroundColor = "rgb(48, 151, 66)";
			console.log(arr);
			var score = document.getElementById("score");
			score.innerHTML = "score:" + (arr.length - 3);
			//failgame();
			var acc = document.getElementById("accel");

			acc.innerHTML = "level:" + (100 - accel) / 10;

			failflag = 100;
		}
		function moveSnack(flag) {
			if (document.settime) {
				clearTimeout(document.settime);
			}
			var newdivarr = document.getElementsByTagName("div");
			var newdiv = newdivarr[newdivarr.length - 1];

			var speed = 25;
			if (arr.length - inilength == 10 && accel > 30) {
				accel -= 10;
				inilength = arr.length;
			}
			switch (flag) {
				case 0:
					if (arr[0].offsetLeft == (newdiv.offsetLeft + 25) && arr[0].offsetTop == newdiv.offsetTop) {
						newdiv.style.backgroundColor = "red";
						arr.unshift(newdiv);
						addnew();

					}
					arr[arr.length - 1].style.left = arr[0].offsetLeft - speed + "px";
					arr[arr.length - 1].style.top = arr[0].offsetTop + "px";
					arr.unshift(arr.pop());
					break;
				case 1:
					if (arr[0].offsetTop == (newdiv.offsetTop + 25) && arr[0].offsetLeft == newdiv.offsetLeft) {
						newdiv.style.backgroundColor = "red";
						arr.unshift(newdiv);
						addnew();
					}
					arr[arr.length - 1].style.top = arr[0].offsetTop - speed + "px";
					arr[arr.length - 1].style.left = arr[0].offsetLeft + "px";
					arr.unshift(arr.pop());

					break;
				case 2:
					if ((arr[0].offsetLeft + 25) == newdiv.offsetLeft && arr[0].offsetTop == newdiv.offsetTop) {
						newdiv.style.backgroundColor = "red";
						arr.unshift(newdiv);
						addnew();
					}
					arr[arr.length - 1].style.left = arr[0].offsetLeft + speed + "px";
					arr[arr.length - 1].style.top = arr[0].offsetTop + "px";
					arr.unshift(arr.pop());
					break;
				case 3:
					if ((arr[0].offsetTop + 25) == newdiv.offsetTop && arr[0].offsetLeft == newdiv.offsetLeft) {
						newdiv.style.backgroundColor = "red";
						arr.unshift(newdiv);
						addnew();
					}
					arr[arr.length - 1].style.top = arr[0].offsetTop + speed + "px";
					arr[arr.length - 1].style.left = arr[0].offsetLeft + "px";
					arr.unshift(arr.pop());
					break;
			}
			failflag--;
			var rest = document.getElementById("failflag");
			rest.innerHTML = "rest:" + failflag;
			console.log(failflag);
			document.settime = setTimeout(moveSnack, accel, flag);
			failgame();

		}
		function failgame() {

			var main = document.getElementsByClassName("main")[0];
			for (var x = 1; x < arr.length; x++) {
				if (arr[0].offsetLeft == arr[x].offsetLeft && arr[0].offsetTop == arr[x].offsetTop) {
					clearTimeout(document.settime);
					alert("touch youself gg");
					location.reload();
				}
			}
			if (arr[0].offsetLeft < 0 || arr[0].offsetLeft + 25 > main.clientWidth || arr[0].offsetTop < 0 || arr[0].offsetTop > main.clientHeight - 25) {
				clearTimeout(document.settime);
				alert("touch border gg");
				location.reload();
			}
			if (failflag == 0) {
				clearTimeout(document.settime);
				alert("over time gg");
				location.reload();
			}
		}
		onload = function () {
			direction();
			addnew();
		}
	</script>
</head>

<body>
	<div class="main">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>

	</div>
	<p id="score">score:</p>
	<p id="accel">level:</p>
	<p id="failflag">rest:100</p>
</body>

</html>

H.ref

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
萌新尝试的贪吃蛇求大神帮忙提些改进建议找找bug

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> html, body { height: 100%; margin: 0px; } div { width: 25px; height: 25px; background-color: red; position
复制链接

扫一扫