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

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

相关阅读