js 贪吃蛇
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>贪吃蛇</TITLE>
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script>
/*
显示和逻辑可以完全分开.逻辑上是二维数组.view根据这个来显示
生成二维数组,生成蛇点,生成食物点.
移动事件.带方向参数 move(dr)(先执行移动(蛇头,蛇尾是否到了树组边界,是否移动到了自己身体)
再判断前面是否是食物,如果是,尾部加长(蛇头,蛇尾是否到了树组边界))
键盘触发更改移动事件
setInterval为自动重复,setTimeout不会重复。
*/
var xlength=20;//x坐标最大值
var ylength=20;//y坐标最大值
var she=new Array();
//一维行数量.
var myArray=new Array(ylength);
var direction=0;
var nextdot=new Array();
var speed=50;
//初始化
function InitEv()
{
direction=0;
she.length=0;
nextdot.length=0;
//初始化二维树组
for(i=0;i<myArray.length;i++)
{
myArray[i]=new Array(xlength);
for(j=0;j<myArray[i].length;j++)
{
myArray[i][j]=0;
}
}
//生成蛇
sx=randomdot(xlength-1);
sy=randomdot(ylength-1);
she[0]=new Array();
she[0][0]=sy;
she[0][1]=sx;
//生成食物
fx=randomdot(xlength-1);
fy=randomdot(ylength-1);
myArray[sy][sx]=1;
myArray[fy][fx]=3;
showMe();
move(0);
}
//生成随机点
function randomdot(a)
{
return parseInt(Math.random()*a);
}
//简单显示二维数组.测试用document.all('map').innerHTML+=("<span id=\"a"+i+"b"+j+"\" style='color:red' name=\"a"+i+"b"+j+"\">■</span>");
function showMe()
{
var str="";
for(i=0;i<myArray.length;i++)
{
for(j=0;j<myArray[i].length;j++)
{
if(myArray[i][j]==1)
{
str+=("<font color='red'>■</font>");
}
else if(myArray[i][j]==3)
{
str+=("<font color='blue'>●</font>");
}
else
{
str+=("□");
}
}
str+="</br>";
}
document.all('map').innerHTML=str;
}
/*
function showmeeatshiwu()
{
var bb="'a"+nextdot[0][0]+"b"+nextdot[0][1]+"'";
document.getElementsByName(bb).style.color='red';
}
function showmenoeatshiwu()
{
var aa="'a"+nextdot[0][0]+"b"+nextdot[0][1]+"'";
document.getElementsByName(aa).style.color='red';
var bb="'a"+she[she.length-1][0]+"b"+nextdot[she.length-1][1]+"'";
//alert(bb);
//alert(document.all('map').innerHTML)
document.getElementsByName(bb).style.color='';
}
*/
//移动事件
function move(dr)
{
if(dr!=0)
{
for(i=0;i<she.length;i++)
{
myArray[she[i][0]][she[i][1]]=0;
}
nextdot=new Array();
nextdot[0]=new Array();
switch (dr)
{
case 1 :
{
nextdot[0][0]=she[0][0]-1;
nextdot[0][1]=she[0][1];
break;
}
case 2 :
{
nextdot[0][1]=she[0][1]+1;
nextdot[0][0]=she[0][0];
break;
}
case 3 :
{
nextdot[0][0]=she[0][0]+1;
nextdot[0][1]=she[0][1];
break;
}
case 4 :
{
nextdot[0][1]=she[0][1]-1;
nextdot[0][0]=she[0][0];
break;
}
}
if(gameOver1(nextdot)==false)
{
alert('game over');
InitEv();
return false;
}
if(myArray[nextdot[0][0]][nextdot[0][1]]==3)
{
she=nextdot.concat(she);
createfoot();
if(gameOver()==false)
{
alert('game over');
InitEv();
return false;
}
//showmeeatshiwu();
}
else
{
she=nextdot.concat(she);
she=she.slice(0,-1);
if(gameOver()==false)
{
alert('game over');
InitEv();
return false;
}
//showmenoeatshiwu();
}
for(i=0;i<she.length;i++)
{
myArray[she[i][0]][she[i][1]]=1;
}
showMe();//这个在这里运行导致程序慢。
}
setTimeout('move(direction);',speed);
}
function KeyDown()
{
key=event.keyCode;
if((key==38||key==40)&&(direction==1||direction==3))
{
}
else if((key==37||key==39)&&(direction==2||direction==4))
{}
else
{
switch(key){
case 37:direction=4;break;
case 39:direction=2;break;
case 38:direction=1;break;
case 40:direction=3;break;
}
}
}
//定时触发的函数
function timedo()
{
move(direction);
}
//是否碰墙壁了。或咬到尾巴了。去除第一个点。
function gameOver()
{
if(she[0][0]<0||she[0][0]>=ylength||she[0][1]<0||she[0][1]>=xlength)
{
return false;
}
for(j=1;j<she.length;j++)
{
if(she[0][0]==she[j][0]&&she[0][1]==she[j][1])
{
return false;
}
}
}
function gameOver1(nextdot)
{
if(nextdot[0][0]<0||nextdot[0][0]>=ylength||nextdot[0][1]<0||nextdot[0][1]>=xlength)
{
return false;
}
}
//生成食物,myArray[fx][fy]=3;
function createfoot()
{
y=true;
fx=randomdot(xlength-1);
fy=randomdot(ylength-1);
for(j=0;j<she.length;j++)
{
if(she[j][0]==fy&&she[j][1]==fx)
{
y=false;
}
}
if(y){myArray[fy][fx]=3;}
else{createfoot();}
}
</script>
<script>
onload=InitEv;
document.onkeydown=KeyDown;
</script>
<div style="border:1px red solid" align='center' id='map' name='map'></div>
</BODY>
</HTML>
把以前用c#写的改为了js的.贪吃蛇代码.