网页游戏“贪食蛇”简析
function ShowGrid()
{
for(r=0; r<Rows; r++) //行
{
t = r*Num;
for(c=0; c<Cells; c++) //列
{
l = c*Num;
MainMap.innerHTML += ''<table style="position:absolute;left:''+ l +'';top:''+ t +'';width:''+Num+'';height:''+Num+'';" cellpadding=0 cellspacing=0><tr><td align=center valign=middle class=grid>O</td></tr><table>''
}
}
}
//创建蛇的初始位置,赋予初始值''S''
function CreateSnake()
{
//<div>表示蛇身，通过调用本函数，可以累加到若干个，蛇身变长
//注意 y 和 x 是“蛇”<div> 的自定义属性。一直保存着蛇尾(!)的当前位置
//初始时，蛇头、蛇尾是同一个位置
MainMap.innerHTML += ''<div x=''+Sx+'' y=''+Sy+'' style=position:absolute;left:''+Sx*Num+'';top:''+Sy*Num+'';width:''+Num+'';height:''+Num+'';overflow:hidden class=Snake></div>''
Map[Sy][Sx]=''S'' //Snake首字母
}
//创建食物的位置,赋予初始值''F''
//食物的初始位置不能与蛇的初始位置相同，只能在空地放置食物。
//若随机产生的2位置相同，则递归执行，直到不相同为止
function CreatFood()
{
Fx = parseInt(Math.random()*Cells)
Fy = parseInt(Math.random()*Rows)
if(Map[Fy][Fx]==''0'') //如果是空地
{
MainMap.innerHTML += ''<span style=position:absolute;left:''+Fx*Num+'';top:''+Fy*Num+'';width:''+Num+'';height:''+Num+'';overflow:hidden class=Food></span>''
Map[Fy][Fx]=''F'' //Food首字母
}
else
CreatFood() //递归
}
//主移动--判断蛇头前面的是什么
function Move()
{
Sx += GoX //自动行走，Map[Sy][Sx]为当前位置
Sy += GoY
if(Sy<0||Sy>=Rows) //碰墙，重新开始
Move1()
else
{
SnakeFront = Map[Sy][Sx]
if(SnakeFront==''0'') //蛇前是空地
Move2()
else
{
if(SnakeFront==''F'') //蛇前面是食物
Move3()
else
Move1()
}
}
}
//重新开始
function Move1()
{
if(confirm("Game Over，重新开始？"))
window.location.reload()
}
var Times=200
//蛇行走到的当前位置是空地时
function Move2()
{
Map[AllDiv[0].y][AllDiv[0].x]=''0'' //蛇走开后，把原位置设置为''0''，表示是空地
AllDiv[0].removeNode(true) //把蛇数组当前元素删除，在下面的 CreateSnake()语句重新生成
CreateSnake() //在新的位置生成蛇的<div>
setTimeout(''Move()'',Times) //再次移动
}
//蛇行走到的当前位置是食物时
function Move3()
{
CreateSnake() //蛇数组当前元素不删除，<div>累加一次，蛇长长一节
AllSpan[0].removeNode(true) //把食物数组当前元素删除，在下面的 CreatFood()语句重新生成
CreatFood() //再次随机生成食物
setTimeout(''Move()'',Times) //再次移动
}
//蛇越行越快
function oTimes()
{
Times -= 5
if(Times>5)
setTimeout(''oTimes()'', SpeedUp)
}
document.onkeydown=KeyDown
//方向
function KeyDown()
{
Key=event.keyCode
switch(Key){
case 37:
Dir(-1,0);break //左方向键
case 39:
Dir(1,0);break //右方向键
case 38:
Dir(0,-1);break //上方向键
case 40:
Dir(0,1);break} //下方向键
return false
}
var Star=0
function Dir(x,y)
{
GoX=x
GoY=y
if(Star==0)
{
oTimes()
Star=1
Move()
}
}
//页面打开时运行
onload = CreateMap; //注意无"()"，不是 CreateMap()
//在<body>中调用的语法是：<BODY onload="CreateMap()">，必须加"()"
</SCRIPT>
<BODY>
<div id="help">
红色方块表示蛇，绿色方块表示食物。按方向键开始。<br>
</div>
</BODY>
</HTML>