我是学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" οnkeydοwn="return noNumbers(event)" />
<input type="button" value="开始" οnclick="startt(),eatfood()" </div>
<input type="button" value="投食" οnclick="setfood()" </div>
<input type="button" value="测试" οnclick="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" οnkeydοwn="return noNumbers(event)" /> <input type="button" value="开始" οnclick="startt(),eatfood()" </div> <input type="button" value="投食" οnclick="setfood()" </div> <input type="button" value="测试" οnclick="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>