求助贪吃射未完成，前端技术不熟俩。

最新推荐文章于 2025-05-17 04:45:00 发布

原创最新推荐文章于 2025-05-17 04:45:00 发布 · 293 阅读

CC 4.0 BY-SA版权

本文介绍了一位Java初学者尝试使用前端技术实现贪吃蛇游戏的过程。通过键盘按键WASD控制蛇移动并吃食物，食物随机生成。但作者遇到了如何实现蛇身体增长的技术难题。

我是学java的，初学者。心血来潮用前端语言做个贪吃蛇但是技术不熟练，求大神帮忙看看，现在可以通过WASD进行移动和吃吃食物还可以随机生成食物，但是我对div漂浮不了解，不知道如何生成新的身体，因为总会被旧的身体挤走，我一开始的想法是生成一个新的div获取上一个div的坐标。代码如下

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP Page</title>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			var torightS;
			var toupS;
			var todownS;
			var toleftS;
			var speed = 200;

			function noNumbers() {
				if(event.keyCode == '87') { //上
					clearInterval(torightS);
					clearInterval(todownS);
					clearInterval(toleftS);
					toupS = setInterval(upp, speed);

					function upp() {
						getfooddx();
						var c = $("#a001").css("margin-top");

						var b = c.substring(0, c.length - 2);
						var f = parseInt(b)
						var g = f - 20;
						$("#a001").css("margin-top", g)
					}

				}

				if(event.keyCode == '65') {
					//左
					clearInterval(todownS);
					clearInterval(toupS);
					clearInterval(torightS);
					toleftS = setInterval(leftt, speed);

					function leftt() {
						getfooddx();
						var c = $("#a001").css("margin-left");
						var b = c.substring(0, c.length - 2);
						var f = parseInt(b)
						var g = f - 20;
						$("#a001").css("margin-left", g)
					}
				}

				if(event.keyCode == '68') {
					//右D
					clearInterval(todownS);
					clearInterval(toupS);
					clearInterval(toleftS);
					torightS = setInterval(rightt, speed);

					function rightt() {
						getfooddx();
						var c = $("#a001").css("margin-left");
						var b = c.substring(0, c.length - 2);
						var f = parseInt(b)
						var g = f + 20;
						$("#a001").css("margin-left", g)
					}
				}

				if(event.keyCode == '83') {
					//下S
					clearInterval(torightS);
					clearInterval(toupS);
					clearInterval(toleftS);
					todownS = setInterval(downn, speed);

					function downn() {
						getfooddx();
						var c = $("#a001").css("margin-top");
						var b = c.substring(0, c.length - 2);
						var f = parseInt(b)
						var g = f + 20;
						$("#a001").css("margin-top", g)
					}
				}
                      
			}

			function right() {
				torightS = setInterval(toright, 500);
			};

			function toright() {
				getfooddx();
				var c = $("#a001").css("margin-left");
				var b = c.substring(0, c.length - 2);
				var f = parseInt(b)
				var g = f + 20;
				$("#a001").css("margin-left", g)
			}
var shang =300;
var zuo = 300;
			function startt() {
				right();
				/*$("a003").append("<div id = "a001" style="width: 20px;height: 20px; background-color: #28A4C9;float: left;"  ></div>")*/
				addfood(shang,zuo);
			}

		</script>
	</head>

	<body>
		

			<div id="a003" style="width: 1200px;height: 500px; background-color:wheat;padding-top:1px">
				<div id="a001" style="width: 20px;height: 20px; background-color: #28A4C9;float: left;"></div>
			    <div id="food" style="width: 20px;height: 20px; background-color: red; margin-top: 150px;;"></div>
			</div>
			<div id="i002">
			<input type="text" onkeydown="return noNumbers(event)" />
			<input type="button" value="开始" onclick="startt(),eatfood()" </div>
			<input type="button" value="投食" onclick="setfood()" </div>
			<input type="button" value="测试" onclick="getfooddx()" </div>
	</body>

<script>

	
		function addfood(a,b) {
			$("#food").css("margin-top", a);
			$("#food").css("margin-left", b);
//				var newDiv = document.createElement("div");
//				newDiv.className = "c";
//				newDiv.innerHTML = "回";
//			
///*				newDiv.width(20);
//			    newDiv.height(20);*/
//				document.getElementById("a003").appendChild(newDiv);
			}
		
function setfood(){
 	shang = randomm()*5*5;
 	zuo = randomm()*12*5;

 	addfood(shang,zuo);
} 


function getfooddx(){
var a =	$("#food").css("margin-top");//获得食物的上左
var b =	$("#food").css("margin-left");
var c = $("#a001").css("margin-top");//获得射的上左
var d = $("#a001").css("margin-left");

var a1 = a.substring(0, a.length - 2);
var a2 = parseInt(a1)
var foodOup = a2+10;

var b1 = b.substring(0, b.length - 2);
var b2 = parseInt(b1)
var foodOle = b2+10;

var c1 = c.substring(0, c.length - 2);
var c2 = parseInt(c1)
var snakeOup =c2+10;

var d1 = d.substring(0, d.length - 2);
var d2 = parseInt(d1)
var snakeOle =d2+10;


 var aa =snakeOup-foodOup
 var bb =snakeOle-foodOle

 var aaa = Math.abs(aa);//取绝对值
 var bbb = Math.abs(bb);
 

 var aaaa = aaa * aaa+bbb*bbb //开方
 var length = Math.sqrt(aaaa);

if (length<=20){
setfood();
addsnake(c,d)
}

}

function addsnake(c,d){
$("#a003").append("<div style='width: 20px;height: 20px; background-color: #28A4C9;'></div>")
}

function randomm(){
var a =Math.random()*20;
var c = Math.ceil(a);
return c;
			}
		
		
</script>
</html>

蓝色DIV方格是蛇，红色是食物，在input标签里按WASD控制方向，本来想做完再重构的，，但是没做出来。

附带一个大神的代码，链接我找不到了，特别屌，根本看不懂哈。

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP Page</title>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			var torightS;
			var toupS;
			var todownS;
			var toleftS;
			var speed = 200;

			function noNumbers() {
				if(event.keyCode == '87') { //上
					clearInterval(torightS);
					clearInterval(todownS);
					clearInterval(toleftS);
					toupS = setInterval(upp, speed);

					function upp() {
						getfooddx();
						var c = $("#a001").css("margin-top");

						var b = c.substring(0, c.length - 2);
						var f = parseInt(b)
						var g = f - 20;
						$("#a001").css("margin-top", g)
					}

				}

				if(event.keyCode == '65') {
					//左
					clearInterval(todownS);
					clearInterval(toupS);
					clearInterval(torightS);
					toleftS = setInterval(leftt, speed);

					function leftt() {
						getfooddx();
						var c = $("#a001").css("margin-left");
						var b = c.substring(0, c.length - 2);
						var f = parseInt(b)
						var g = f - 20;
						$("#a001").css("margin-left", g)
					}
				}

				if(event.keyCode == '68') {
					//右D
					clearInterval(todownS);
					clearInterval(toupS);
					clearInterval(toleftS);
					torightS = setInterval(rightt, speed);

					function rightt() {
						getfooddx();
						var c = $("#a001").css("margin-left");
						var b = c.substring(0, c.length - 2);
						var f = parseInt(b)
						var g = f + 20;
						$("#a001").css("margin-left", g)
					}
				}

				if(event.keyCode == '83') {
					//下S
					clearInterval(torightS);
					clearInterval(toupS);
					clearInterval(toleftS);
					todownS = setInterval(downn, speed);

					function downn() {
						getfooddx();
						var c = $("#a001").css("margin-top");
						var b = c.substring(0, c.length - 2);
						var f = parseInt(b)
						var g = f + 20;
						$("#a001").css("margin-top", g)
					}
				}
                      
			}

			function right() {
				torightS = setInterval(toright, 500);
			};

			function toright() {
				getfooddx();
				var c = $("#a001").css("margin-left");
				var b = c.substring(0, c.length - 2);
				var f = parseInt(b)
				var g = f + 20;
				$("#a001").css("margin-left", g)
			}
var shang =300;
var zuo = 300;
			function startt() {
				right();
				/*$("a003").append("<div id = "a001" style="width: 20px;height: 20px; background-color: #28A4C9;float: left;"  ></div>")*/
				addfood(shang,zuo);
			}

		</script>
	</head>

	<body>
		

			<div id="a003" style="width: 1200px;height: 500px; background-color:wheat;padding-top:1px">
				<div id="a001" style="width: 20px;height: 20px; background-color: #28A4C9;float: left;"></div>
			    <div id="food" style="width: 20px;height: 20px; background-color: red; margin-top: 150px;;"></div>
			</div>
			<div id="i002">
			<input type="text" onkeydown="return noNumbers(event)" />
			<input type="button" value="开始" onclick="startt(),eatfood()" </div>
			<input type="button" value="投食" onclick="setfood()" </div>
			<input type="button" value="测试" onclick="getfooddx()" </div>
	</body>

<script>

	
		function addfood(a,b) {
			$("#food").css("margin-top", a);
			$("#food").css("margin-left", b);
//				var newDiv = document.createElement("div");
//				newDiv.className = "c";
//				newDiv.innerHTML = "回";
//			
///*				newDiv.width(20);
//			    newDiv.height(20);*/
//				document.getElementById("a003").appendChild(newDiv);
			}
		
function setfood(){
 	shang = randomm()*5*5;
 	zuo = randomm()*12*5;

 	addfood(shang,zuo);
} 


function getfooddx(){
var a =	$("#food").css("margin-top");//获得食物的上左
var b =	$("#food").css("margin-left");
var c = $("#a001").css("margin-top");//获得射的上左
var d = $("#a001").css("margin-left");

var a1 = a.substring(0, a.length - 2);
var a2 = parseInt(a1)
var foodOup = a2+10;

var b1 = b.substring(0, b.length - 2);
var b2 = parseInt(b1)
var foodOle = b2+10;

var c1 = c.substring(0, c.length - 2);
var c2 = parseInt(c1)
var snakeOup =c2+10;

var d1 = d.substring(0, d.length - 2);
var d2 = parseInt(d1)
var snakeOle =d2+10;


 var aa =snakeOup-foodOup
 var bb =snakeOle-foodOle

 var aaa = Math.abs(aa);//取绝对值
 var bbb = Math.abs(bb);
 

 var aaaa = aaa * aaa+bbb*bbb //开方
 var length = Math.sqrt(aaaa);

if (length<=20){
setfood();
addsnake(c,d)
}

}

function addsnake(c,d){
$("#a003").append("<div style='width: 20px;height: 20px; background-color: #28A4C9;'></div>")
}

function randomm(){
var a =Math.random()*20;
var c = Math.ceil(a);
return c;
			}
		
		
</script>
</html>