用html编写贪吃蛇游戏,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

{

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

{

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

{

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').οnclick=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').οnclick=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').οnclick=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').οnclick=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.οnkeydοwn=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)

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;

}

}

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.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function()

{

bool=false;

}

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