JavaScript编写一个贪吃蛇游戏

2019-11-19 17:12:29

字体：大中小

来源：转载

供稿：网友

写的比较乱，有个逻辑错误：蛇吃了果果后应该是蛇尾加一节，写成了蛇头部增加一节- -。

可用键盘的上下左右键操作；

效果图：

代码如下：

<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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Vue中fragment.js使用方法详解

下一篇：canvas压缩图片转换成base64格式输出文件流