网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

JavaScript如何编写一个贪吃蛇游戏

这篇文章主要介绍了JavaScript如何编写一个贪吃蛇游戏,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

在南郑等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站建设、成都网站设计 网站设计制作定制网站,公司网站建设,企业网站建设,成都品牌网站建设,成都营销网站建设,外贸网站建设,南郑网站建设费用合理。

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

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

效果图:

JavaScript如何编写一个贪吃蛇游戏

代码如下:




贪吃蛇


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








点此拖动
  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=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;k4;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=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.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)395)btn.style.top="395px";  } } document.body.onmouseup=function() {  bool=false; }

感谢你能够认真阅读完这篇文章,希望小编分享的“JavaScript如何编写一个贪吃蛇游戏”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前文章:JavaScript如何编写一个贪吃蛇游戏
文章出自:http://bjjierui.cn/article/iedige.html