掃雷小遊戲

引言

前陣子無聊,LOL也不是很想玩,發現了電腦中自帶的掃雷,當時在一個神奇的地方，用的是一個windows2000的系統界面可是掃雷確是win7的樣式,玩了幾句幾局，其中有一局很崩潰，我先上圖爲敬。

>

這種狀況,就是考驗運氣的時候了，可是果不其然。。。

我成功選擇了有炸彈的那一個，從這裏面我明白了一個道理，那就是：成功須要99%的努力再加上1%的運氣。。。。。。

原理(思路)

佈局

玩了幾句搞清了遊戲規則,就想本身動手作一個,由於之前作過 2048,因此首先想到的就是用二維數組佈局

添加三個難度的按鈕

<a class="type" href="#" data-width="9" data-height="9" data-mine="10">簡單</a>
<a class="type" href="#" data-width="16" data-height="16" data-mine="40">中級</a>
<a class="type" href="#" data-width="30" data-height="16" data-mine="99">高級</a 複製代碼

點擊相應按鈕經過 js 獲取對應的 data 屬性,而後動態的生成相應的方格,而後動態計算包裹全部小方格的寬度和高度,爲了之後方便操做每個小方格,給每個小方格按行列添加獨有的 id 。

盒子對象

屬性

由於掃雷是對每一個格子進行操做，所以我把每一個格子都當作一個獨立的個體，這個個體具備屬性和方法，就至關於一個小對象。定義了兩個數組

//表明盒子身份的數組
var boxArr = [];
//用於存儲周圍八個格子中雷的個數
var MineArr = [];
複製代碼

經過這兩個數組,我能夠知道每一個格子是不是炸彈,還有每一個格子周圍對應八個格子中有多少個炸彈，這屬於格子對象的屬性。

方法

盒子對象還有鼠標按下和擡起的方法，這裏要注意，不要給每一個盒子都添加事件。假設有100個盒子的話，就要添加100個事件，事實上高級難度下的盒子話還有更多，這樣就不如在container上綁定事件，利用冒泡。也能夠實現相同的效果，而且只須要綁定一個事件

container.on('mousedown', '.box', function (e) {
  $(e.target)//獲取點擊到的class爲box的元素
}
複製代碼

，有的時候格子的MineArr裏面存的多是0,這就表明他周圍8個不存在炸彈,像這種的話就直接將其周圍的八個格子直接自動點開就行了,下面這幅圖，我只點了一下,就是點到了MineArr[i][j]==0的格子,而後讓他周圍八個直接顯示MineArr中的數值,若是周圍八個格子還有MineArr[i][j]==0的狀況，就繼續打開去顯示。

掃雷中還有一個必定要有的方法就是左右鍵一塊兒按一個點開的格子，會自動判斷周圍格子中你標記雷的個數和你點擊的這個格子的數值。若是你標記雷的個數等於左右鍵點擊的格子中的數值，他會自動幫你點開剩下的還沒點擊過的格子，這些格子中可能有雷也可能沒雷，這要看你本身標記的雷是否是對的。

這個也蠻好實現,右鍵按下的時候將周圍沒點擊過也沒被標記過雷的方格添加帶有別的顏色的class，而後記錄周圍八個方格標記的雷的個數，而後在右鍵鬆開的時候移除此class,並判斷剛記錄的標記的雷的個數和當前點擊的格子的數值是否相等，而後去作下一步處理。

成功失敗判斷

失敗很好判斷，點中了boxArr爲1的格子就判失敗，就是點中了雷。

成功的話我是經過點擊出來的格子的數量來判斷的，成功顯現的格子只要等於總格子減去雷的格子就判斷爲遊戲勝利

總結

雖然是一個比較簡單的遊戲，可是本身在作的時候仍是碰到過很多的bug,也學到了蠻多的,這裏列一下。

清空問題

• 每次建立新的格子都要清空上次建立的全部格子

• 我是採用冒泡的方式給盒子添加的點擊事件，是添加在container上的，而後container是不消失的，因此每次建立新格子前還要將container上的事件解綁

右鍵

右鍵在網頁上是有默認行爲的，在這個遊戲中要禁掉

//去掉默認的contextmenu事件，不然會和默認右鍵事件同時出現。
document.oncontextmenu = function (e) {
  e.preventDefault();
};
複製代碼

each()

jquery中的each是不能用break跳出的。是用return false代替的break,return true或return代替的continue

最後

還有一些我思路上或者說寫法中存在的小bug,我用相應的方法去解決掉了。你們能夠看源碼,由於花的時間比較短,可能裏面還存在一些問題,還請大佬們多多包涵,也歡迎大佬們來指正。本小白感激涕零

小遊戲試玩

各位巨佬喜歡的話，no have face 的求個 star

項目地址