摘要:javascript 小遊戲小技巧教學2
上一個教學有點偏向複製貼上而已，
這次要教細一點點的東西，也是方便大家從重點學習~
一樣別忘了檔案要存成"UTF-8"，以及檔名要是.html喔！
首先，
將網頁分成兩種區域，一個是元件區，一個是程式碼區。
元件區對比成Flash的Library，其實就是直接顯示在網頁上的東西。
當然，之後會教怎麼用程式碼把東西變出來，有機會再教~
程式碼區就是javascript部分。
看一段範例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試場景</title>
</head>
<script type="text/javascript">
</script>
<body>
</body>
</html>上面的原始碼，
其實<body>~</body>之間，就是你想要在你的網頁上放什麼的地方，可以當作場景的布局、擺設~
而<script type="text/javascript">~</script>的部分則是程式碼的部分。
那麼以後就記住囉！
再來，要教大家的是背景的處理~
做法是在<body>裡面加一張圖片當背景。有些人可能會想做全網頁的背景，不過SV覺得對初學者來說那會比較麻煩，
建議還是以你喜歡的圖片的大小當做遊戲的畫布比較好喔~
那麼還是先以全部程式碼做解釋：
1.圖片當背景：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試場景</title>
</head>
<script type="text/javascript">
</script>
<body style="margin:0px;">
<img src="magic.jpg" style="width:454px;height:340px; z-index:-100;">
</body>
</html>在網頁中，<img>這個標籤就是圖片的意思。為了讓它當背景，它必須在場景的後面，這裡有個'z-index'，後面的數字越大，表示離你越近，數字越小就離你越遠(其實就是3d概念的z軸)。後面的數字可以任意填，但預設大家都是1(在同一平面)，所以設-100就是確保它在很後面~
2.用區域當背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試場景</title>
</head>
<script type="text/javascript">
</script>
<body style="margin:0px;">
<table style="background-image:url(magic.jpg); background-position:center; background-repeat:no-repeat; width:454px; height: 340px;">
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>這裡的區域是用表格，當然也可以用其他方式。表格的好處就是它可以做排列，
就像上一次教的每個tr是一行，所以另一個tr是下一行，而td是tr裡面的一小格。
通常它很像這樣：
這是2x3的表格。
為了讓你更有感覺，
我把"經典"的神奇三明治場景當作範例，來做一個小遊戲給你看看囉：
以上圖片可以自由下載XD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試場景</title>
</head>
<script type="text/javascript">
window.onload=function(){
var escapes=new Array("l","r","r","l","r");
var runs=[];
document.getElementById("btnLeft").onclick=function(){
if(runs.length!=5){
runs.push("l");
document.getElementById("tbScene").style.backgroundImage="url(forestleft.jpg)";
document.getElementById("txResult").innerHTML="要往哪逃？";
}
if(runs.length==5){
if(same()){
document.getElementById("txResult").innerHTML="恭喜你，你逃出來了！";
document.getElementById("btnLeft").style.display="none";
document.getElementById("btnRight").style.display="none";
document.getElementById("tbScene").style.backgroundImage="url(forest.jpg)";
}else{
document.getElementById("txResult").innerHTML="神奇三明治快追上你了！";
document.getElementById("tbScene").style.backgroundImage="url(magic.jpg)";
runs=[];
}
}
}
document.getElementById("btnRight").onclick=function(){
if(runs.length!=5){
runs.push("r");
document.getElementById("tbScene").style.backgroundImage="url(forestright.jpg)";
document.getElementById("txResult").innerHTML="要往哪逃？";
}
if(runs.length==5){
if(same()){
document.getElementById("txResult").innerHTML="恭喜你，你逃出來了！";
document.getElementById("btnLeft").style.display="none";
document.getElementById("btnRight").style.display="none";
document.getElementById("tbScene").style.backgroundImage="url(forest.jpg)";
}else{
document.getElementById("txResult").innerHTML="神奇三明治快追上你了！";
document.getElementById("tbScene").style.backgroundImage="url(magic.jpg)";
runs=[];
}
}
}
function same(){
var isSame=true;
for(var i=0;i<5;i++){
if(runs[i]!=escapes[i]) isSame=false;
}
return isSame;
}
}
</script>
<body style="margin:0px;">
<table id="tbScene" style="background-image:url(magic.jpg); background-position:center; background-repeat:no-repeat; width:454px; height: 340px;">
<tr>
<td colspan="2" align="center"><span id="txResult" style="color:#FF0000;">神奇三明治正在追你！要往哪逃呢？</span></td>
</tr>
<tr>
<td align="right" valign="top">
<input type="button" value="左邊" id="btnLeft" />
</td>
<td align="left" valign="top">
<input type="button" value="右邊" id="btnRight" />
</td>
</tr>
</table>
</body>
</html>
這次用了很多東西>///<不過就是希望讓你有做遊戲的感覺~
最好是到測試網頁玩玩看，你才比較有畫面喔~
首先，在body裡面，SV新增了兩個按鈕以及一個文字區域。
接著重頭戲就是scrpt 裡面了Orz(請大家撐住~)
可能有些人會好奇為什麼有個window.onload=function(){...}
這是因為有些時候網頁圖片載入很慢為了避免我們要使用圖片前，圖片還沒載好，所以才會用這個語法(就背起來吧)。
接著裡面有兩個叫做"陣列"(Array)的變數。
var escapes=new Array("l","r","r","l","r");
var runs=[];把陣列想像成是一個隊伍，一號叫做0，二號叫做1......
它是一種儲存變數的方式，所謂的變數，就是會改變的數值~就像國中學過的x,y,z那樣。
變數名稱則是runs或escapes，可以自取，盡量取自己看得懂得比較好(比方什麼時候用到它)。
我的escapes代表你要怎麼走，才能逃離神奇三明治(就像是答案)，
而runs代表玩家走的步數，所以這個遊戲就是，當玩家走了對的路，就可以逃出神奇三明治的手掌心~~~
所以只要把裡面的l(left)和r(right)改成你喜歡的順序就可以給朋友玩玩看囉~(當然，朋友如果會按右鍵→檢視原始碼就破功了XD)
接著是當我們點擊左右兩個按鈕會做的事情。
其實很簡單，就是按左鍵代表玩家往左跑，按右鍵代表玩家往右跑。
當它跑的步數跟你的答案一樣時，就表示它成功逃出了~
反之，為了讓玩家知道一輪大概走多少步(總不能跑到天荒地老都不知何時才到達彼岸呀~)，在最後一輪用其他方式提示玩家：
這一輪你跑錯啦，所以重新開始跑唄~
概念是這樣，那要怎麼實作呢？
首先，出現了條件判斷式，也就是if{...}
這東西就是"如果"怎麼樣就做什麼事，而後面的else就是否則，也就是說如果if的部分不對、不成立、條件不符合，就會往else那邊做事情~
而length是長度的意思，你可以想像成是玩家走的步數。
在程式語言中，!(驚嘆號)表示否定，相反的意思，所以!=就是不等於。
那等於呢？等於則是==(兩個等於)。一個等於叫作配置，不過這樣學太難，你就當作"是"吧，
就好比前面的var escapes=new Array("l","r","r","l","r");
表示escapes"是"一個陣列(排隊隊伍，隊伍裡面排了l,r,r,l,r的人)
至於""雙引號，在語法裡面代表字串，也就是字的意思(這樣比較好記)，有字，當然也有不是字的，那就是數值囉~就是1,2,3,4或小數點那些，就不用雙引號了。
因此if(runs.length!=5)這一行就是說：當玩家跑的步數不等於5時。
為什麼是不等於5呢？
因為我們要記錄玩家的步數。當玩家的步數等於5時才要判斷是否逃出去。這樣的邏輯很重要喔！
接著是runs.push("l");
push可以當成放進去的意思，你也可以想像成排隊後面再多來一個人。
所以每用一個push，就等於玩家又走了一步，
因為我們的答案是用l和r組成，所以才用l和r代表玩家的步數。
若改天你的按鈕代表上或下，甚至上下左右、東南西北，就依樣畫葫蘆把步伐改掉就可以囉~
當然，走的內容不一定要一個單字，你可以用英文比較好區分(因為有時開頭字都一樣)，只是偷懶的時候就用單字(這時也考驗英文程度?不過方位那些的英文應該還好...吧?)
接著你會看到很多前面一樣只是後面不同的這個形式：
document.getElementById("tbScene").style.backgroundImage="url(forestleft.jpg)";這個就是換背景圖的意思~
順便說說，SV以前不會這個語法時，是用換網頁的方式，所以最後網頁跑很慢(因為光是迷宮就要48個網頁)XDDD
所以現在你會這種方式就不用像SV一樣很笨方式作遊戲了。
慘例請看：
http://gameschool.cc/offergame/play/10625/
前面很長串的部分一樣就是我要把我要的東西拿來修改的方式。後面的style就是形式，backgroundImage顧名思義就是背景啦~
所以這個部份就是換背景圖囉~
這樣才讓使用者覺得自己真的有在跑~
不過你會注意到有時候都是按左邊所以感覺沒變，
等教到Timer(計時器時)，就可以學動畫技巧，
就可以在換圖片時不會那麼死板囉~
再來就是一樣更改文字內容的方式~innerHTML，相信多使用幾次你就見怪不怪了~只是要記得大小寫，初學者很容易搞錯大小寫~
來到這似乎都還ok吧？
接著，我們要判斷使用者的跑法與你的答案是否正確囉~
這也是比較麻煩的部分。
有些時候，你要做一件事情，會發現一段程式碼在好多地方都會用到，就好比換圖片那一段，
以及判斷是否跑正確的那段，
語法有個叫作function的東西，就是讓你不用打那麼多字，只要你使用那個function的名稱，就等於把它的內容都作一遍啦~
就像叫外賣那樣，你打電話叫珍珠奶茶，
但其實一杯珍奶的手續很多，你如果自己調還要準備珍珠、珍珠要煮熟、奶精、糖、茶還要泡好到適當的澀度等等......
一個外送電話就有珍奶到手那樣~
所以這裡有個叫作same的方法(function, method)，但事情還不是那麼簡單。
有的時候，你的方法需要回傳一些值，好比你叫外送要給錢吧，所以要付錢給幫你外送的人~
因此，在function same(){...}的後面，有個return，就是你要付錢的意思~
首先，為了要給錢，我把我的錢包拿出來，
好比var isSame=true;
SV把這個叫作isSame的預設值設為true，這true是"對"的意思，所以假設SV有錢這樣。
那麼有"對"，就會有"錯"，所以"錯"就是false。
回到我們這個小遊戲的例子，
我們是要判斷玩家的逃法和我們的答案是否一樣，因此就用最笨的方法：一個一個比較。
怎麼一個一個比較呢？
這裡出現了叫做迴圈的東西，
for就當作是從哪裡到哪裡的意思吧！
從哪裡呢？裡面有個var i，一樣，i是一個變數，i是0，表示i一開始是0(要記得變數就是可能會改變的數，所以它現在是0之後可能不是)。
我們總共要比較5次，所以在i<5以前我們都要比較。
在這邊又有一個很麻煩的東西，那就是後面的i++
其實i++就等於i自己+1的意思，
也就是i=i+1;。
那什麼時候i會加1呢，這個觀念超重要喔！
是等裡面的東西做完以後才會加1！
也就是說，一開始，我們在判斷玩家的第一個步數時，
它會去看玩家的走法[0]和答案的[0]是否不一樣(即if的部分)，當這一部分作玩了，才把i加1作下一個走法的判斷。
這裡的if(runs[i]!=escapes[i]) isSame=false;
其實等於
if(runs[i]!=escapes[i]){
isSame=false;
}但是為了方便，當作的事情只有一行時，就可以不用大括弧{}包起來。大括弧代表區域、範圍的意思。只要記得function的時候以及if、else、for都要大括弧就好了~(你可以由上面的onload=function以及onclick=function等發現到)其他情況遇到了再說囉~
那麼為什麼是判斷不一樣呢？這跟寫程式的人的邏輯(好比SV的腦袋)思維不同而寫法不同了。
我希望玩家的走法一定要跟我的答案一樣才是對的，這是很硬性的規定，反之，任何一步走不對，就是玩家答錯了。
因此，若玩家的玩法沒有跟我的答案不同，表示for裡面不會作if的內容，
那麼一開始的變數isSame就永遠是true。反之，則會在if裡面變成false。
接著我們這個isSame就是讓same()這個方法得到結果的意思囉~
怎麼說呢？
當我們呼叫(叫外送XDD)same()這個方法時，他會做判斷玩家與結果是否一樣的這個功能。
若結果正確，那麼same()=true(因為isSame是true)反之，same()=false。
回到if(same())
這個意思就是如果same()=true(即是if(same()==true))那麼就做大括弧裡面的事情。
而後面省略了==true是簡便的寫法。
在語法中，if判斷式裡面的內容只要是非0和非空的數值就是條件成立，而在javascript語法當中，true有時等於1，而false則是0。
所以這個部份就是：
當玩家步數走對時，
背景圖片換成逃出來的圖片，
而按鈕則不顯示(style.display是顯示的意思，後面的none就是不顯示)，並且在上方的文字顯示"恭喜你，你逃出來了！"
相反的若走錯，也給玩家提示說這一輪走完你可以重新猜了：
將圖片回到一開始原點的圖(還沒按按鈕時的圖)，並且將文字換成讓使用者緊張的文字(雖然只是文字XDD)
而後面的runs=[];是讓玩家步數歸零、重新走的意思~就像排隊的人變空的了，沒人在排隊。
這篇雖然比較難，但已經有個小遊戲的雛形了~
如果還有不懂的歡迎詢問喔~
然後再拿這個遊戲騙騙你的朋友吧XDDDD