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(varj=0;j<25;j++)

 {

 td[j]=document.createElement('td');

 tr[i].appendChild(td[j]);

 }

}

vartar=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();

vars=document.getElementsByClassName('num'); //定位蛇的位置

s[0].style.backgroundColor="#3EFF1A";

varx=300,y=400,f,d,p,Fraction=0,t=600,tt=60;

for(vark=0;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');

 varl=newArray();

 l[0]=s[0].style.left;

 varw=newArray();

 w[0]=s[0].style.top;

 obj;             //移动方向

 s[0].style.left=x+"px";

 s[0].style.top=y+"px";

 for(vark1=1;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;

 varnew_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(vark=1;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(varkk=s.length-1;kk>4;kk--)

 {

  s[kk].parentNode.removeChild(s[kk]);

 }

 t=700;

 tt=60;

 return false;

}

 for(k=1;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(vark=0;k<5;k++)

 {

  s[k].style.left=x+"px";

  s[k].style.top=y+20*k+"px";

 }

 for(varkk=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)

 p=1;          

 move(x=x+20,R);

}

document.getElementById('btn2').onclick=functionL()

{

 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)

 p=4;

 move(y=y+20,B);

}

document.onkeydown=function(event)    //绑定键盘事件

{

vare=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)

 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)

 p=4;

 move(y=y+20,B);

}

B();

return false;

}

}

varbtn=document.getElementById('btn');

var btn_l,btn_t;

function btn_move()

{

 btn_l=clientX-parseInt(wrap.style.left)

}

confirm("可用键盘的上下左右四个按键进行游戏操作！")

varbtn=document.getElementById('btn');  //开始制作操作区拖动效果

vartxt=document.getElementById('txt');

var new_x,new_y,bool=false;

txt.onmousedown=function()

{

 vareve=event||window.event;

 bool=true;

 new_x=eve.clientX-parseInt(btn.style.left);

 new_y=eve.clientY-parseInt(btn.style.top);

}

btn.onmousemove=functionbtn_move(event)

{

 if(bool)

 {

 vare=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;

}