學(xué)習(xí)了這么長時間的 JS，不能光看不練栏尚，于是就寫了個小游戲練習(xí)一下到逊。
如果感興趣的話可以試試：Demo
項(xiàng)目地址：game-mineSweepinng
效果圖
掃雷過程
掃呀掃呀掃個雷吮便。
image.png
掃雷失敗
掃雷失敗就會提示掃雷失敗骆姐，然后逐步顯示出所有地雷（我會說我沒找到地雷的圖才用的炸彈嗎）镜粤。
image.png
掃雷成功
其實(shí)這里是有個動畫的，彩色方塊是逐步覆蓋全部格子的玻褪。
demo1.gif
功能
實(shí)現(xiàn)的功能
基本掃雷的功能都實(shí)現(xiàn)了繁仁，例如：
- 計時
- 選擇游戲難度
- 標(biāo)記地雷（插旗子標(biāo)記地雷，標(biāo)記之后不能點(diǎn)擊）
- 剩余雷數(shù)（總的雷數(shù)減去插旗的數(shù)量）
- 自動連鎖點(diǎn)開（當(dāng)點(diǎn)開某個區(qū)塊后归园，如果該區(qū)塊的數(shù)字為 0，也就是九宮格內(nèi)沒有雷稚矿，那么將自動點(diǎn)開九宮格內(nèi)的所有區(qū)塊）
還做了點(diǎn)小彩蛋庸诱，例如：踩到地雷時，地雷會逐步顯示晤揣，還有成功掃到所有雷之后桥爽，地圖逐漸被彩色方塊覆蓋，然后提示掃雷成功昧识。
沒有實(shí)現(xiàn)的功能
自定義钠四，問號標(biāo)記（偷懶了偷懶了，說不定以后會補(bǔ)上呢 （鬼才會信吧））跪楞。
知識點(diǎn)
都說寫東西學(xué)的最快缀去，這句話是很有道理的。寫個小游戲甸祭，我又 Get 到了很多知識缕碎。
生成一張掃雷地圖
這里當(dāng)然用的是數(shù)組啦，會玩掃雷的應(yīng)該都懂池户，如果一個方塊塊有雷咏雌，那么邊上的值都加 1（就是根據(jù)這個掃的嘛~沒有這個還怎么玩）凡怎。我相信很多人是不會像看代碼的，所以我直接講我的思路赊抖。
- 根據(jù)行數(shù)和列數(shù)創(chuàng)建一個多維數(shù)組（使用 for 循環(huán)嵌套實(shí)現(xiàn)）
- 然后使用 Math 隨機(jī) map[x][x] 來寫入雷的位置（再次使用 for 循環(huán)统倒，寫入 9（9 就代表雷）），如果位置已經(jīng)有雷了就重寫隨機(jī)然后寫入
- 然后我們就會得到一個這樣的數(shù)組氛雪，這個時候我們只需要讓 9 的四周加上 1
[ [0, 9, 0, 0],
[0, 0, 9, 0],
[9, 0, 9, 0],
[0, 9, 0, 0] ] - 得到這樣的數(shù)組房匆，這樣就大功告成啦。
[ [1, 9, 2, 1],
[2, 4, 9, 2],
[9, 4, 9, 2],
[2, 9, 2, 1] ]
將地圖寫入頁面
使用 doucument.querySelector 獲取到元素節(jié)點(diǎn)注暗，然后使用 innerHTML 就行了坛缕。（感覺自己說這兩句像是在放屁）。想了解的直接去 Github 看源碼把捆昏，一看就懂赚楚。
自動連鎖點(diǎn)開
這個比較難，想了挺久的骗卜。思路大概是這樣：
- 點(diǎn)擊到為 0 的位置宠页，就自動顯示周圍一圈的位置。
- 然后周圍一圈的還有為 0 的位置寇仓，就繼續(xù)顯示周圍一圈举户，然后循環(huán)到?jīng)]有為止。
