SV~

有沒有玩過一些密室解謎遊戲，

他的解答不是固定的?

接下來就是要教這個技巧!

雖然有些謎題是純文字內容，遊戲通常講究美感，因此我通常都是用圖片做範例(用div的背景)。

首先看我們原本的範例，我們給的提示是這個圖：

而我的目標是希望每個人看到的三個顏色排列不同。

這有兩種做法，但是概念差不多：

作法一：將三種圖案重疊在一起，當我們使用隨機變數時，顯示變數的結果並隱藏另外兩個。

作法二：將三個圖案在三個位置的座標記錄起來，等隨機變數出來時，將圖案位置移動到你對應的位置。

第一種作法的好處是如果你有DreamWeaver或者frontPage之類的網頁編輯軟體，可以直接將圖片拉到指定的位置，然後再用getById('id').style.display=""none;做切換。

缺點就是，如果你的提示圖樣有10種，而你的位置有5個，那麼這個提示就會有10x5=50個圖案!!!

圖案越多越耗網頁資訊讀取速度，所以我比較建議第二種作法。當然，如果你圖片少，第一種作法是蠻簡單的(因為位置只要在網頁編輯軟體拉就可以了)

 

首先將我們的提示圖片分成四個部分：

作法一：

http://www.googledrive.com/host/0B7hg_8WvMyfJfjZ5V3hFTXlHT0FHUjNvYU44NFY3TThaSDEzWS1OZFZqYmk3NTQ0ZUlQa0E

通常網頁使用的圖片檔案類型都是png，所以從這個範例開始我會把圖片改成使用png。

使用png的好處就是背景是透明的。

設計時可以將第一排排好後，用display:none;隱藏(用class或者style="display:none")，然後再排第二排，排好再隱藏第二排，以此類推。

記得使用z-index修改元件的順序，所以hint(那張寫著color的紙)一定要在這些提示的後面。

 

範例下載:lesson4_5_1.zip

你會發現雖然只要切換顯示的圖案，前置作業的排版就花好多時間呀!而這還只是三個花樣(紅、綠、藍)而已呢!

但是最惱人的應該是我的body裡面多了這麼多div......

雖然使用了陣列讓hint與提示的顯示可以修改的更簡單:

getById("btnRun").onclick=function(){
			hint=new Array(0,0,0);					//這行是為了測試效果用，實際在遊戲上要拿掉這行!!!(因為只有重新玩遊戲才會重設解答)
			hint=randomUnique(hint,0);
			//alert(hint[0]+","+hint[1]+","+hint[2]);		可以用這個來看看三個變數的值(你也可以嘗試把上面改成hint=Math.random()*3+1來看看有沒有parseInt的不同)
			for(var i in hint){
				if(hint[i]==1){
					show(red[i]);
					hide(blue[i]);
					hide(green[i]);
				}else if(hint[i]==2){
					show(blue[i]);
					hide(red[i]);
					hide(green[i]);
				}else if(hint[i]==3){
					show(green[i]);
					hide(red[i]);
					hide(blue[i]);
				}
			}
			alert("你的答案是"+result(hint[0])+","+result(hint[1])+","+result(hint[2]));
		}

不過div那麼多看了也很累....要想想幾個提示和幾個位置就要有相乘的div(3x3=9個div)......

如果使用方法二，我們的div只要算圖樣就可以了(3個圖樣紅、綠、藍所以3個div)。

 

作法二：

作法二又分兩種，一種是用變數記錄每個圖案在位置1時的座標(left與right)，另一種則是用javascript改變圖案的style。

變數的方法：

http://www.googledrive.com/host/0B7hg_8WvMyfJfjNkSi1faE83T01JUG1tWFFueTByZEpFMHQ1UmlRV2FYRjhjX0RJRW05eUE

原本不用迴圈是這樣寫的：

if(hint[0]==1){
				getById("r").style.left=location.red[0][0]+"px";
				getById("r").style.top=location.red[0][1]+"px";
			}else if(hint[0]==2){
				getById("b").style.left=location.blue[0][0]+"px";
				getById("b").style.top=location.blue[0][1]+"px";
			}else if(hint[0]==3){
				getById("g").style.left=location.green[0][0]+"px";
				getById("g").style.top=location.green[0][1]+"px";
			}
			if(hint[1]==1){
				getById("r").style.left=location.red[1][0]+"px";
				getById("r").style.top=location.red[1][1]+"px";
			}else if(hint[1]==2){
				getById("b").style.left=location.blue[1][0]+"px";
				getById("b").style.top=location.blue[1][1]+"px";
			}else if(hint[1]==3){
				getById("g").style.left=location.green[1][0]+"px";
				getById("g").style.top=location.green[1][1]+"px";
			}
			if(hint[2]==1){
				getById("r").style.left=location.red[2][0]+"px";
				getById("r").style.top=location.red[2][1]+"px";
			}else if(hint[2]==2){
				getById("b").style.left=location.blue[2][0]+"px";
				getById("b").style.top=location.blue[2][1]+"px";
			}else if(hint[2]==3){
				getById("g").style.left=location.green[2][0]+"px";
				getById("g").style.top=location.green[2][1]+"px";
			}

了解其規則性後才改成這樣：

for(var i in hint){
				if(hint[i]==1){
					getById("r").style.left=location.red[i][0]+"px";
					getById("r").style.top=location.red[i][1]+"px";
				}else if(hint[i]==2){
					getById("b").style.left=location.blue[i][0]+"px";
					getById("b").style.top=location.blue[i][1]+"px";
				}else if(hint[i]==3){
					getById("g").style.left=location.green[i][0]+"px";
					getById("g").style.top=location.green[i][1]+"px";
				}
			}

雖然一開始還是要找位置，倘若你的圖案大小都一樣，其實位置就不用這麼複雜了~

此範例是因為我的每個圖案大小(長寬)不同，才會造成位置上有些許差異。

因此建議在提示部分的圖案讓大小是一樣的才不會每個圖案都要找位置~

此範例下載:lesson4_5_2.zip

 

再來是改變css(style)的方法:

變數的方法讓我們在css刪除不少，

但是用css的方法呢，則是要借助這些已經設定好位置的style。

因此結果就是:

http://www.googledrive.com/host/0B7hg_8WvMyfJflJwcG5sZUFtYzhidjlMWmV5YUhiNEExQ0JwbDlaYXppQ2tBRnRlcTJUbW8

一樣，迴圈的部分本來是這樣寫:

if(hint[0]==1){
				getById("r").className=style.red[0];
			}else if(hint[0]==2){
				getById("b").className=style.blue[0];
			}else if(hint[0]==3){
				getById("g").className=style.green[0];
			}
			if(hint[1]==1){
				getById("r").className=style.red[1];
			}else if(hint[1]==2){
				getById("b").className=style.blue[1];
			}else if(hint[1]==3){
				getById("g").className=style.green[1];
			}
			if(hint[2]==1){
				getById("r").className=style.red[2];
			}else if(hint[2]==2){
				getById("b").className=style.blue[2];
			}else if(hint[2]==3){
				getById("g").className=style.green[2];
			}

了解規則性後才改成這樣:

for(var i in hint){
				if(hint[i]==1){
					getById("r").className=style.red[i];
				}else if(hint[i]==2){
					getById("b").className=style.blue[i];
				}else if(hint[i]==3){
					getById("g").className=style.green[i];
				}
			}

此範例下載:lesson4_5_3.zip

 

至於哪個比較好用?就見仁見智了。

我個人比較喜歡變數的方法，因為不是每個程式語言都有像html的css有已經配套好的排版方式，所以用變數的話每個程式語言都適用。

但是最好不要用第一種的n個div的方法就是~