13518219792

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://cdweb.net/article/iedige.html

其他资讯