1. 程式人生 > >實現記憶中的經典遊戲-掃雷

實現記憶中的經典遊戲-掃雷

game ini 遍歷 github play lob 判斷 mini src

摘要:《掃雷》是款風靡學校機房的智益遊戲。遊戲目標是在最短的時間內根據點擊格子出現的數字找出所有非雷格子。本文使用JS語言簡單完成了掃雷遊戲的核心功能。

一,遊戲規則

  1)點擊有雷區,提示遊戲失敗。

  2)點擊到警示區,翻開警示區的(本文將遊戲中的格子分為無雷區,有雷區,警示區)。

  3)點擊到無雷區,向外翻開點擊區域,並向外擴張,直到碰到警示區。(警示區作為邊界)

二,核心功能及實現思想

1)生成地圖

  首先生成一個N*M的空白地圖,用0表示無雷區。使用一個二維數組儲存。

技術分享圖片

2)填充地雷

  我們設置的是10*10的地圖,設置的雷數是M*N/10。雷要滿足均勻分布。矩形中實現雷的隨機分布比較容易,使用計算機參生的隨機數種子來生成坐標XY,們將其在數組中對應位置設置為-1,表示埋上了雷,

技術分享圖片

3)填充警示區(雷邊數字)

  每一個雷,以他為中心的八個方向的格子都會記錄它們的旁邊有一顆雷,即自身格子的值+1,我們在填充地雷的時候,順便將警示區的數字也填上。

技術分享圖片

4)點擊地圖翻開對應區域

  1>點到無雷區

  翻開無雷區的規則是將與我們所點擊的無雷塊所有直接相連的0即邊界上的警示區全部翻開。這裏我們使用圖的寬度遍歷,當點擊到0時,翻開,並遍歷周圍的4個空格,如果值不為0(警示區),我們直接翻開這個區域。如果是0,我們將其推入open隊列,處理過的節點保存至close隊列,防止回走。之後彈出open隊列頭元素,繼續上一步判斷處理,直至隊列為空。

技術分享圖片

技術分享圖片

  2>點到警示區翻開該區域

技術分享圖片

  3>點到雷區提示失敗

技術分享圖片

  4>無雷區翻開宣布勝利
  當翻開M*N-(M*N/10)塊區域時,宣布勝利。

三,算法實現

使用typeScript實現。

https://github.com/sincw/miniGame/blob/master/webContent/src/main/webapp/work/mineSweeper/controllers/mineSweeperController.ts

下載後以下頁面可瀏覽掃雷過程

/webContent/src/main/webapp/work/mineSweeper/mineSweeper.html

四,總結

  在實現掃雷過程中唯一比較困難的點就是翻開無雷區,這是一個經典算法,FloodFill算法 , 又叫洪水填充算法,運用非常廣泛。例如PS中的畫筆工具,能夠摳出任務或者物品輪廓。

實現記憶中的經典遊戲-掃雷