JavaScript 遊戲 : 貪吃蛇

來源:互聯網
上載者:User
javascript

好像是最快的速度了。。。

說一說原理:
是利用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>

 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。