Javascript寫個踩地雷

踩地雷是經典遊戲之一,考驗的是推理能力,但是玩久了變成幾乎在考驗反射速度….

如果在Windows 7或Windows 2008裡面找不到踩地雷,可以先按「開始」,輸入「minesweeper」,會出現「開啟或關閉 Windows 功能」,再勾選踩地雷即可。

1

我們在這一篇來討論一下怎麼實作網頁踩地雷。

首先先弄個簡單的網頁出來。

然後加入一個DIV來放地雷區,一個DIV來放倒數計時,再一個DIV放剩餘地雷數量。

再來就是加上程式碼啦! 首先要考慮的是,地雷要有幾個? 要網頁一載入就開始玩還是要按下開始鈕?

在這裡我們不要弄得太複雜,網頁一載入就開始好了。地雷要有幾個嘛….也寫在程式碼裡邊吧。要網頁一載入就開始,那我們就用 onload 來呼叫一個函數。這個函數要幹嘛呢? 要在畫面上配置踩雷區,踩雷區要用什麼做呢? 最簡單的就是用 <BUTTON> 啦!

加入程式碼以後變這樣:

畫面是這樣:

2

這樣就有地雷區啦!

現在來加上讀秒功能與剩餘地雷數量:

2

現在底下會讀秒,也會顯示目前有幾個地雷。但是還沒玩就一直讀秒好像很奇怪,沒關係,我們現在來改。現在我們把剛才寫的 button 再加入一個屬性,就是onclick事件的處理。如果按下去,表示踩了這個地雷,就要有個特定的函數去處理。同時,我們也加入 numCellsClicked 來記錄己經踩了幾個地雷,還有定義 bombs 陣列,來記錄什麼地方有地雷。

sweep() 函數還沒加進去,地雷的位置也還沒存入bombs陣列。我們接下來要做的事情就是,在sweep()第一次執行時,表示遊戲要開始了,這時才要開始讀秒才對! 修改過的程式是這樣:

我們加入了一個rand()函數來處理亂數,這樣地雷才不會每次都同一個位置。當然啦,我們也要確保第一次按下去的地方不會是地雷,這該怎麼做呢?

修改button的onclick事件處理,把自己(被按下的button)當成參數傳給sweep(),這樣我們就知道誰被按下去啦,再加入幾行程式碼來修正一下:

比較特別的current_i=parseInt(obj.id.split(‘_’)[0]); 要解釋一下,我們當初設定button的id時,是利用它的座標 i 與 j 來設定。所以,當我們取出它的 id 時,我們知道它的格式是「數字_數字」,第一個數字是 i,第二個是 j。利用split()函數,我們以底線做為分隔字元,會回傳切割後的字串陣列,再利用parseInt轉成整數,就知道按下去的這個按鈕的 i 與 j 啦!

踩下去應該要發生什麼事呢? 如果是地雷,就爆掉然後 Game Over。如果不是,就要顯示這個地區方圍8個位置的地雷數量總和。我們來實作吧。

踩到地雷的時候,我們讓按鈕顯示 X,然後停止計時器;否則,我們讓按鈕變成無效,這個只要設定它的 disabled 屬性就好了。clearTimeout()需加入計時器的名稱,但是剛才沒有設,所以我們也對timer()做一些修改,讓計時器有個名字。此時的畫面會變這樣

2

 

有沒有發現畫面怪怪的? 因為預設的按鈕寬度不夠,所以顯示數字之後,按鈕的寬度會變寬。沒關係,我們改一下button的CSS就好。

修改過的畫面變這樣:

2

 

是不是越來越有踩地雷的樣子了呢?

我們剩下兩個工作,一個是進行地雷標記,一個是「如果旁邊都沒有地雷,就通通打開」。地雷標記的習慣是使用右鍵,所以我們為button再加上一個處理oncontextmenu的處理函式吧。

首先,己經標記的按鈕應該不能再按了才是,所以我們在sweep()中加入

然後在建立按鈕時,加入

最後加入mark()函數的內容:

這樣就可以進行標記了! 畫面如下:

2

 

但是這樣做有個缺點,就是瀏覽器預設的選單會跑出來,所以我們必須加上鎖右鍵的功能,也就是將BODY標籤加上 onContextMenu="window.event.returnValue=false" 就好了。

還有一個細節,我們在進行標記時,要把底下的剩餘地雷數減一。最後,當所有可以踩的地雷都踩了,就要出現遊戲破關的訊息囉~完整的程式碼如下:

畫面如下

2

One comment

Leave a Reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *