好像是最快的速度了。。。
說一說原理：
是利用DOM的。
<span>一條蛇，由蛇頭到蛇尾</span>
這樣想到了什麼？蛇尾就是這個span的第一個元素，蛇頭就是最後一個元素啦。當然，調換前後也一樣可以的。
然後建一個二維數組，當是地圖的 x,y 坐標。
然後，每節蛇也有它的 x,y 坐標，分別和上面的二維數組關連起來。
這樣就會得到蛇每一節的位置了，看看有沒有超出數組上限或下限，GameOver。
不過我這裏為了體驗一下速度，沒這個GameOver條件，只有蛇頭和蛇身相撞時就GameOver。
最後就是關件的啦。
蛇要不停地移動，那麼，不停地在上面那個 span 裏添加 <div>我是蛇頭</div> 蛇頭的left top 值要和剛創建的地圖對應啊。
然後在 上面那個span 裏刪除那個 <div>我是蛇尾</div> 的元素
再把 span 裏第二個元素設為：我是蛇身。這樣，原本是蛇頭的第二個元素就變成蛇身了。
再把 span 裏最後一個元素設為：我是蛇尾。這樣，原本是蛇身的它，就變成蛇尾了。
完 ^-^
<!--
http://dwin
http://dewin.tk
Copyright(c) 1998-2004 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'';
functi 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>
无忧站长学院，建站自然无忧www.5ucms.org
| 上一篇：5ucms模版,JavaScript 寫時鍾日曆 下一篇：5ucms教程,JavaScript 寫遊戲 : 搬吖 |
|
| 本站声明：本网站所载文章等内容，目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权及其它问题，请在30日内与本网联系（Email：3876307#qq.com），我们将在第一时间删除内容。若原创内容转载请注明出处。 5ucms教程,JavaScript 遊戲 : 貪吃蛇的关键词: |
|
相关分类
本类最新
