還在玩掃雷遊戲？P7大牛帶你探秘雷場，探究javascript背後的秘密

今日分享開始啦，請大家多多指教~

今天給大家分享的是

掃雷，這是系統自帶的經典小遊戲，以前上學那會上機的時候就經常玩這個，很喜歡，所以嘗試一下。

效果圖

實現思路

1。建立9行9列的二維陣列。

2。設定雷：隨機行數 i 和列數 j，根據隨機到 i、j 從二維陣列中取出對應的元素，將取到的元素設定一個屬性type等於1，表示當前元素已經是雷，並且遞增雷計數器，然後遞迴呼叫；如果取到的元素已經是雷了，則跳過繼續執行，雷計數器達到設定的最大值就跳出遞迴。

3。計算每個元素周圍的雷數量（周圍指的是 左上、上、右上、右、右下、下、左下、左 這8個位置），當前位置顯示對應的數字（待會內容裡面細說）

4。同樣根據這個二維陣列來建立遮罩的小方塊，正好蓋住之前建立的圖形。

5。點選這個遮罩的小方塊則觸發揭開，揭開後根據對應的數字或者雷做不同的操作。

程式碼實現

建立背景及相關元素

建立雷和顯示對應的圖片

1。隨機row 和 col，並從二維陣列中獲取到這個物件；

2。判斷他是否是雷，如果是則跳過當前；

3。如果當前不是雷，則標記當前物件為雷物件，並且更改圖片；

4。遞迴，當達到設定的數量時跳出。

計算周圍雷的數量並顯示

1。迴圈之前定義的二維陣列

2。如果當前元素的下標是（i，j），則左上為（i-1，j-1），上為（i-1，j ），右上為（i-1，j+1），以此類推，如下圖所示：

3。分別取出這些元素，並判斷他們是不是雷，如果是則計數累加，最後將計數對應到相應的圖片，然後顯示出來。

建立遮罩

建立計時和計數器

加入滑鼠移動事件

加入滑鼠點選事件

成功判定1

未開啟的數量與雷的數量相同

成功判定2

標記為雷（插旗）的數量與類總數相同

觸雷效果

滑鼠點選雷後，會觸發雷爆炸的一個動畫，這是透過圖片的切換來實現的

加入滑鼠右鍵事件

此事件是做插旗或者標記為未知等操作的。

最後加入重新開始事件，勝利和失敗圖片顯示就完成了。

小結

用canvas編寫了這個小遊戲，看著還行，不知道會不會有什麼我沒發現的bug，難度目前是設定成簡易的，如果要改難度，程式碼稍做修改即可。

今日份分享已結束，請大家多多包涵和指點！