好像是最快的速度了。。。
说一说原理：
是利用DOM的。
<span>一条蛇，由蛇头到蛇尾</span>
这样想到了什么？蛇尾就是这个span的第一个元素，蛇头就是最后一个元素啦。当然，调换前后也一样可以的。
然后建一个二维数组，当是地图的 x,y 坐标。
然后，每节蛇也有它的 x,y 坐标，分别和上面的二维数组关连起来。
这样就会得到蛇每一节的位置了，看看有没有超出数组上限或下限，GameOver。
不过我这里为了体验一下速度，没这个GameOver条件，只有蛇头和蛇身相撞时就GameOver。
最后就是关件的啦。
蛇要不停地移动，那么，不停地在上面那个 span 里添加 <div>我是蛇头</div> 蛇头的left top 值要和刚创建的地图对应啊。
然后在 上面那个span 里删除那个 <div>我是蛇尾</div> 的元素
再把 span 里第二个元素设为：我是蛇身。这样，原本是蛇头的第二个元素就变成蛇身了。
再把 span 里最后一个元素设为：我是蛇尾。这样，原本是蛇身的它，就变成蛇尾了。
完 ^-^
<!--
http://futurecom.vze.com
http://dewin.vze.com
http://dewin.126.com
http://dewin.tk
Copyright(c) 1998-2003 dewin all rights reserved
Start 2002-10-12 11:12
Finish 2002-10-16 07:43
-->
<body>
<script>
var Rows = 20;
var Cells = 30;
var MapW = 20;
var MapH = 20;
var BorderW = 5;
var oSpeed = 1
var Scores = 0;
var SnakeHeakColor = 'blue';
var SnakeBodyColor = 'orange';
var SnakeTailColor = 'yellow';
function CreatMainMap(){
MainMap = [];
for(var y=0;y<Rows;y++){
MainMap[y] = [];
for(var x=0;x<Cells;x++){
MainMap[y][x] = '';
}
}
}
function CreateFood(){
var x = parseInt(Math.random()*Cells);
var y = parseInt(Math.random()*Rows);
if(MainMap[y][x] == ''){
Score.innerHTML = Scores++;
Base.insertAdjacentHTML("beforeEnd","<div style='position:absolute;left:"+x*MapW+";top:"+y*MapH+";width:"+MapW+";height:"+MapH+";background:red;'>");
MainMap[y][x] = 'F';
}
else CreateFood();
}
function CreateSnake(){
Base.insertAdjacentHTML("beforeEnd","<span x="+SnakeX+" y="+SnakeY+" style='position:absolute;left:"+SnakeX*MapW+";top:"+SnakeY*MapH+";width:"+MapW+";height:"+MapH+";background:"+SnakeHeakColor+";'></span>");
MainMap[SnakeY][SnakeX] = 'S';
}
var GoX = 0;
var GoY = 0;
var GoTime = 0;
function Dir(x,y){
GoX = (-GoX==x)?GoX:x;
GoY = (-GoY==y)?GoY:y;
if(!GoTime) GoTime = setInterval(Move,oSpeed);
}
function Move(){
SnakeX = (SnakeX+GoX<0)?Cells-1:((SnakeX+GoX>Cells-1)?0:SnakeX+GoX);
SnakeY = (SnakeY+GoY<0)?Rows-1:((SnakeY+GoY>Rows-1)?0:SnakeY+GoY);
if(MainMap[SnakeY][SnakeX] == ''){
AllSnakes[AllSnakes.length-1].style.background = SnakeBodyColor;
MainMap[AllSnakes[0].y][AllSnakes[0].x] = '';
AllSnakes[0].removeNode(true);
if(AllSnakes.length>1) AllSnakes[0].style.background = SnakeTailColor;
CreateSnake();
return;
}
if(MainMap[SnakeY][SnakeX] == 'F'){
AllSnakes[AllSnakes.length-1].style.background = SnakeBodyColor;
AllFoods[0].removeNode(true);
if(AllSnakes.length>1) AllSnakes[0].style.background = SnakeTailColor;
CreateSnake();
CreateFood();
return;
}
if(MainMap[SnakeY][SnakeX] == 'S'){
if(confirm('Game Over，Try again？')) window.location.reload();
else window.close()
}
}
function document.onkeydown(){
switch(event.keyCode){
case 34:clearInterval(GoTime);oSpeed+=3;GoTime=setInterval(Move,oSpeed);break;//speed up
case 33:if(oSpeed-2>0){clearInterval(GoTime);oSpeed-=2;GoTime=setInterval(Move,oSpeed)};break;//speed down
case 192:alert(oSpeed);break;//speed down
case 37:Dir(-1,0);break;//left
case 38:Dir(0,-1);break;//up
case 39:Dir(1,0);break;//right
case 40:Dir(0,1);break;//down
case 83:clearInterval(GoTime);GoTime=0;break;
}
}
function window.onload(){
var MainMapWidth = 2*BorderW+Cells*MapW;
var MainMapHeight = 2*BorderW+Rows*MapH;
document.body.innerHTML += "<span id='Base' style='position:absolute;left:"+(document.body.clientWidth-MainMapWidth)/2+";top:"+(document.body.clientHeight-MainMapHeight)/2+";width:"+MainMapWidth+";height:"+MainMapHeight+";border:"+BorderW+" inset #0000CC;'></span><br><br><span id='Score'></span><br><br><font color=red>Page Down to Speed down<br>Page Up to Speed up</font>";
SnakeX = parseInt(Math.random()*Cells);
SnakeY = parseInt(Math.random()*Rows);
AllSnakes = Base.all.tags('SPAN');
AllFoods = Base.all.tags('DIV');
window.focus();
CreatMainMap();
CreateSnake();
CreateFood();
}
</script>