JavaScript编写一个贪吃蛇游戏
程序员文章站
2022-12-13 09:26:47
写的比较乱，有个逻辑错误：蛇吃了果果后应该是蛇尾加一节，写成了蛇头部增加一节- -。
可用键盘的上下左右键操作；
效果图：
代码如下：
写的比较乱，有个逻辑错误：蛇吃了果果后应该是蛇尾加一节，写成了蛇头部增加一节- -。
可用键盘的上下左右键操作；
效果图：
代码如下：
<html>
<head>
<title>
贪吃蛇
</title>
<style type="text/css">
body{margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;}
table{border-collapse:collapse;width:500px}
td{border:1px solid white;width:20px;height:20px;}
#wrap{width:500px;height:500px;background-color:#8b8386;margin:0 auto;position:absolute;border:1px solid #8b2500;}
#tar{width:20px;height:20px;position:absolute;background-color:#ffee26;}
.num{width:20px;height:20px;background-color:#fdff68;border:1px solid blue;border-radius:50%;position:absolute;}
input{color:red;font-size:20px;font-weight:bold;position:absolute;display:block;width:60px;height:35px;}
#btn2{top:45px;left:0px;}
#btn4{top:90px;left:70px;}
#btn1{top:45px;left:140px;}
#btn3{top:0px;left:70px;}
#btn{position:absolute;background-color:black;width:200px;height:125px;}
#txt{width:80px;height:55px;background-color:black;position:absolute;left:60px;top:35px;color:white;font-size:16px;font-weight:bold;line-height:55px;text-align:center;cursor:move;}
</style>
</head>
<body>
<div id="btn" style="left:520px;top:20px">
<input type="button" value="→" id="btn1"/>
<input type="button" value="←" id="btn2"/>
<input type="button" value="↑" id="btn3"/>
<input type="button" value="↓" id="btn4"/>
<div id="txt">点此拖动</div>
</div>
<div id="wrap" style="left:20px;top:20px">
<div id="tar"></div>
<table>
<tbody id="tb">
</tbody>
</table>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
<div class="num"></div>
</div>
<script type="text/javascript">
var tb=document.getelementbyid('tb');
var wrap=document.getelementbyid('wrap');
var tr=new array();
var td=new array();
for(var i=0;i<25;i++) //绘制地图
{
tr[i]=document.createelement('tr');
tb.appendchild(tr[i]);
for(var j=0;j<25;j++)
{
td[j]=document.createelement('td');
tr[i].appendchild(td[j]);
}
}
var tar=document.getelementbyid('tar'); //食物定位
function food()
{
var a,b;
a=math.random()*460;
a=math.floor(a/20)*20+20;
b=math.random()*460;
b=math.floor(b/20)*20+20;
tar.style.left=a+"px";
tar.style.top=b+"px";
}
food();
var s=document.getelementsbyclassname('num'); //定位蛇的位置
s[0].style.backgroundcolor="#3eff1a";
var x=300,y=400,f,d,p,fraction=0,t=600,tt=60;
for(var k=0;k<s.length;k++)
{
s[k].style.left=x+"px";
s[k].style.top=y+20*k+"px";
}
function move(obj,direction) //控制移动函数开始
{
cleartimeout(d);
s=document.getelementsbyclassname('num');
var l=new array();
l[0]=s[0].style.left;
var w=new array();
w[0]=s[0].style.top;
obj; //移动方向
s[0].style.left=x+"px";
s[0].style.top=y+"px";
for(var k1=1;k1<s.length;k1++)
{
l[k1]=s[k1].style.left;
w[k1]=s[k1].style.top;
s[k1].style.left=l[k1-1];
s[k1].style.top=w[k1-1];
}
if(parseint(s[0].style.left)==parseint(tar.style.left)&&parseint(s[0].style.top)==parseint(tar.style.top))
{
t=t-tt;
tt-=5;
if(tt==0)tt=5;
var new_div=document.createelement('div');
new_div.classname="num";
fraction+=100;
if(p==1)
{
new_div.style.top=s[0].style.top;
new_div.style.left=parseint(s[0].style.left)+20+"px";
}
if(p==2)
{
new_div.style.top=s[0].style.top;
new_div.style.left=parseint(s[0].style.left)-20+"px";
}
if(p==3)
{
new_div.style.left=s[0].style.left;
new_div.style.top=parseint(s[0].style.top)-20+"px";
}
if(p==4)
{
new_div.style.left=s[0].style.left;
new_div.style.top=parseint(s[0].style.top)+20+"px";
}
s[0].parentnode.insertbefore(new_div,s[0]);
food();
s[0].style.backgroundcolor="#3eff1a";
for(var k=1;k<s.length;k++)
{
s[k].style.backgroundcolor="#fdff68";
}
}
if(parseint(s[0].style.left)<0||parseint(s[0].style.left)>=500||parseint(s[0].style.top)<0||parseint(s[0].style.top)>=500)
{
alert("game over！"+"你的分数为："+fraction+"分");
food();
x=300;
y=400;
for(var k=0;k<5;k++)
{
s[k].style.left=x+"px";
s[k].style.top=y+20*k+"px";
}
for(var kk=s.length-1;kk>4;kk--)
{
s[kk].parentnode.removechild(s[kk]);
}
t=700;
tt=60;
return false;
}
for(k=1;k<s.length;k++)
{
if(parseint(s[0].style.left)==parseint(s[k].style.left)&&parseint(s[0].style.top)==parseint(s[k].style.top))
{
alert("game over！"+"你的分数为："+fraction+"分");
food();
x=300;
y=400;
for(var k=0;k<5;k++)
{
s[k].style.left=x+"px";
s[k].style.top=y+20*k+"px";
}
for(var kk=s.length-1;kk>4;kk--)
{
s[kk].parentnode.removechild(s[kk]);
}
t=700;
tt=60;
return false;
}
}
d=settimeout(direction,t);
}
document.getelementbyid('btn1').onclick=function r() //绑定鼠标点击事件
{
x=parseint(s[0].style.left);
y=parseint(s[0].style.top);
if(parseint(s[0].style.left)<parseint(s[1].style.left))return false;
p=1;
move(x=x+20,r);
}
document.getelementbyid('btn2').onclick=function l()
{
x=parseint(s[0].style.left);
y=parseint(s[0].style.top);
if(parseint(s[0].style.left)>parseint(s[1].style.left))return false;
p=2;
move(x=x-20,l);
}
document.getelementbyid('btn3').onclick=function t()
{
x=parseint(s[0].style.left);
y=parseint(s[0].style.top);
if(parseint(s[0].style.top)>parseint(s[1].style.top))return false;
p=3;
move(y=y-20,t);
}
document.getelementbyid('btn4').onclick=function b()
{
x=parseint(s[0].style.left);
y=parseint(s[0].style.top);
if(parseint(s[0].style.top)<parseint(s[1].style.top))return false;
p=4;
move(y=y+20,b);
}
document.onkeydown=function(event) //绑定键盘事件
{
var e=event||window.event;
if(e&&e.keycode==39)
{
function r()
{
x=parseint(s[0].style.left);
y=parseint(s[0].style.top);
if(parseint(s[0].style.left)<parseint(s[1].style.left))return false;
p=1;
move(x=x+20,r);
}
r();
return false;
}
if(e&&e.keycode==37)
{
function l()
{
x=parseint(s[0].style.left);
y=parseint(s[0].style.top);
if(parseint(s[0].style.left)>parseint(s[1].style.left))return false;
p=2;
move(x=x-20,l);
}
l();
return false;
}
if(e&&e.keycode==38)
{
function t()
{
x=parseint(s[0].style.left);
y=parseint(s[0].style.top);
if(parseint(s[0].style.top)>parseint(s[1].style.top))return false;
p=3;
move(y=y-20,t);
}
t();
return false;
}
if(e&&e.keycode==40)
{
function b()
{
x=parseint(s[0].style.left);
y=parseint(s[0].style.top);
if(parseint(s[0].style.top)<parseint(s[1].style.top))return false;
p=4;
move(y=y+20,b);
}
b();
return false;
}
}
var btn=document.getelementbyid('btn');
var btn_l,btn_t;
function btn_move()
{
btn_l=clientx-parseint(wrap.style.left)
}
confirm("可用键盘的上下左右四个按键进行游戏操作！")
var btn=document.getelementbyid('btn'); //开始制作操作区拖动效果
var txt=document.getelementbyid('txt');
var new_x,new_y,bool=false;
txt.onmousedown=function ()
{
var eve=event||window.event;
bool=true;
new_x=eve.clientx-parseint(btn.style.left);
new_y=eve.clienty-parseint(btn.style.top);
}
btn.onmousemove=function btn_move(event)
{
if(bool)
{
var e=event||window.event;
btn.style.left=e.clientx-new_x;
btn.style.top=e.clienty-new_y;
if(parseint(btn.style.left)<520)btn.style.left="520px";
if(parseint(btn.style.top)<0)btn.style.top="0px";
if(parseint(btn.style.top)>395)btn.style.top="395px";
}
}
document.body.onmouseup=function()
{
bool=false;
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： as中禁用ESC键