'如何使用JavaScript構建掃雷'

"
"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

如何使用JavaScript構建掃雷

算法

設置地雷分配

隨機地雷地雷

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

如何使用JavaScript構建掃雷

算法

設置地雷分配

隨機地雷地雷

如何使用JavaScript構建掃雷

在玩掃雷遊戲之前我們必須做的第一件事就是將地雷分配給細胞。為此,我創建了一個函數,將板和所需的礦計數作為參數。

對於我們放置的每個礦井,我們必須生成隨機的行和列。此外,相同的行和列組合永遠不會出現多次。否則我們最終會得到的數量少於我們想要的地雷數量。如果出現重複,我們必須重複隨機數生成。

當生成每個隨機單元座標時,我們將我們的板中相應單元的mined屬性設置為true。

我創建了一個輔助函數,以幫助完成在我們所需範圍內生成隨機數的任務。見下文

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

如何使用JavaScript構建掃雷

算法

設置地雷分配

隨機地雷地雷

如何使用JavaScript構建掃雷

在玩掃雷遊戲之前我們必須做的第一件事就是將地雷分配給細胞。為此,我創建了一個函數,將板和所需的礦計數作為參數。

對於我們放置的每個礦井,我們必須生成隨機的行和列。此外,相同的行和列組合永遠不會出現多次。否則我們最終會得到的數量少於我們想要的地雷數量。如果出現重複,我們必須重複隨機數生成。

當生成每個隨機單元座標時,我們將我們的板中相應單元的mined屬性設置為true。

我創建了一個輔助函數,以幫助完成在我們所需範圍內生成隨機數的任務。見下文

如何使用JavaScript構建掃雷

計算鄰居礦井數量

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

如何使用JavaScript構建掃雷

算法

設置地雷分配

隨機地雷地雷

如何使用JavaScript構建掃雷

在玩掃雷遊戲之前我們必須做的第一件事就是將地雷分配給細胞。為此,我創建了一個函數,將板和所需的礦計數作為參數。

對於我們放置的每個礦井,我們必須生成隨機的行和列。此外,相同的行和列組合永遠不會出現多次。否則我們最終會得到的數量少於我們想要的地雷數量。如果出現重複,我們必須重複隨機數生成。

當生成每個隨機單元座標時,我們將我們的板中相應單元的mined屬性設置為true。

我創建了一個輔助函數,以幫助完成在我們所需範圍內生成隨機數的任務。見下文

如何使用JavaScript構建掃雷

計算鄰居礦井數量

如何使用JavaScript構建掃雷

打開一個單元格

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

如何使用JavaScript構建掃雷

算法

設置地雷分配

隨機地雷地雷

如何使用JavaScript構建掃雷

在玩掃雷遊戲之前我們必須做的第一件事就是將地雷分配給細胞。為此,我創建了一個函數,將板和所需的礦計數作為參數。

對於我們放置的每個礦井,我們必須生成隨機的行和列。此外,相同的行和列組合永遠不會出現多次。否則我們最終會得到的數量少於我們想要的地雷數量。如果出現重複,我們必須重複隨機數生成。

當生成每個隨機單元座標時,我們將我們的板中相應單元的mined屬性設置為true。

我創建了一個輔助函數,以幫助完成在我們所需範圍內生成隨機數的任務。見下文

如何使用JavaScript構建掃雷

計算鄰居礦井數量

如何使用JavaScript構建掃雷

打開一個單元格

如何使用JavaScript構建掃雷

標記一個單元格

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

如何使用JavaScript構建掃雷

算法

設置地雷分配

隨機地雷地雷

如何使用JavaScript構建掃雷

在玩掃雷遊戲之前我們必須做的第一件事就是將地雷分配給細胞。為此,我創建了一個函數,將板和所需的礦計數作為參數。

對於我們放置的每個礦井,我們必須生成隨機的行和列。此外,相同的行和列組合永遠不會出現多次。否則我們最終會得到的數量少於我們想要的地雷數量。如果出現重複,我們必須重複隨機數生成。

當生成每個隨機單元座標時,我們將我們的板中相應單元的mined屬性設置為true。

我創建了一個輔助函數,以幫助完成在我們所需範圍內生成隨機數的任務。見下文

如何使用JavaScript構建掃雷

計算鄰居礦井數量

如何使用JavaScript構建掃雷

打開一個單元格

如何使用JavaScript構建掃雷

標記一個單元格

如何使用JavaScript構建掃雷

打開相鄰單元格

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

如何使用JavaScript構建掃雷

算法

設置地雷分配

隨機地雷地雷

如何使用JavaScript構建掃雷

在玩掃雷遊戲之前我們必須做的第一件事就是將地雷分配給細胞。為此,我創建了一個函數,將板和所需的礦計數作為參數。

對於我們放置的每個礦井,我們必須生成隨機的行和列。此外,相同的行和列組合永遠不會出現多次。否則我們最終會得到的數量少於我們想要的地雷數量。如果出現重複,我們必須重複隨機數生成。

當生成每個隨機單元座標時,我們將我們的板中相應單元的mined屬性設置為true。

我創建了一個輔助函數,以幫助完成在我們所需範圍內生成隨機數的任務。見下文

如何使用JavaScript構建掃雷

計算鄰居礦井數量

如何使用JavaScript構建掃雷

打開一個單元格

如何使用JavaScript構建掃雷

標記一個單元格

如何使用JavaScript構建掃雷

打開相鄰單元格

如何使用JavaScript構建掃雷

我們已經介紹了打開單元格並用標記標記它們的動作,所以讓我們談談玩家可以採取的最後一個動作:打開已經打開的單元格的相鄰單元格。該handleCtrlClick函數包含邏輯此。此播放器可以通過按住ctrl並左鍵單擊包含相鄰地雷的打開的單元格來執行此操作。

檢查這些條件後我們要做的第一件事就是建立一個相鄰標記單元格的列表。如果標記的單元格的數量與周圍的地雷的實際數量匹配,那麼我們可以繼續。否則,我們什麼也不做,退出該功能。

如果我們能夠繼續下去,我們接下來要做的就是檢查任何標記的單元格是否包含礦井。如果這是真的,我們知道玩家錯誤地預測了礦井位置,並且點擊所有未標記的相鄰小區將以損失結束。我們需要設置本地丟失變量並調用丟失函數。我們在文章前面討論了 損失函數。

如果玩家沒有丟失,那麼我們將需要打開未標記的相鄰小區。我們只需要遍歷它們並在每個上調用handleClick函數。但是,我們必須首先將ctrlIsPressed變量設置為false,以防止錯誤地落入handleCtrlClick函數。

開始一場新遊戲

"
如何使用JavaScript構建掃雷

遊戲規則

  1. 掃雷板是10 x 10平方格。我們可以製作其他尺寸,如經典的Windows版本,但出於演示目的,我們將堅持遊戲的較小的“初學者”版本。
  2. 該板具有預定數量的隨機放置的地雷。玩家無法看到他們。
  3. 雷可以以兩種狀態之一存在:打開或關閉。單擊一個單元格將打開它。如果一個礦山潛伏在那裡,遊戲就以失敗告終。如果小區中沒有地雷,但其一個或多個相鄰小區中有地雷,則打開的小區顯示相鄰的地雷數。當沒有任何小區的鄰居被挖掘時,這些小區中的每一個都被自動打開。
  4. 右鍵單擊一個單元格會用標記標記它。國旗表明玩家知道那裡潛伏著一個雷。
  5. 單擊打開的單元格時按住Ctrl按鈕有一些稍微複雜的規則。如果單元周圍的標誌數與其鄰居的礦數相匹配,並且每個標記的單元實際上包含礦,那麼所有關閉的,未標記的相鄰單元將自動打開。但是,即使其中一個標誌被放置在錯誤的單元格上,遊戲也會失敗。
  6. 如果玩家打開沒有地雷的所有單元格,則玩家贏得遊戲。

數據結構

如何使用JavaScript構建掃雷

  • id:包含行和列的字符串。這個唯一標識符可以在需要時更快地找到單元格。如果你密切注意,你會注意到我有一些與id有關的快捷方式。由於電路板尺寸小,我可以擺脫這些快捷方式,但這些技術無法擴展到更大的電路板。看看你是否能發現它們。如果你這樣做,請在評論中指出它們!
  • row:表示單元格內單元格水平位置的整數。
  • column:一個整數,表示電路板內單元的垂直位置。
  • opened:這是一個布爾屬性,指示單元格是否已打開。
  • flagged:另一個布爾屬性,指示是否已在該單元格上放置一個標誌。
  • mined:另一個布爾屬性,指示單元格是否已被挖掘。
  • neighborMineCount:一個整數,指示包含礦的相鄰單元的數量。

面板

如何使用JavaScript構建掃雷

算法

設置地雷分配

隨機地雷地雷

如何使用JavaScript構建掃雷

在玩掃雷遊戲之前我們必須做的第一件事就是將地雷分配給細胞。為此,我創建了一個函數,將板和所需的礦計數作為參數。

對於我們放置的每個礦井,我們必須生成隨機的行和列。此外,相同的行和列組合永遠不會出現多次。否則我們最終會得到的數量少於我們想要的地雷數量。如果出現重複,我們必須重複隨機數生成。

當生成每個隨機單元座標時,我們將我們的板中相應單元的mined屬性設置為true。

我創建了一個輔助函數,以幫助完成在我們所需範圍內生成隨機數的任務。見下文

如何使用JavaScript構建掃雷

計算鄰居礦井數量

如何使用JavaScript構建掃雷

打開一個單元格

如何使用JavaScript構建掃雷

標記一個單元格

如何使用JavaScript構建掃雷

打開相鄰單元格

如何使用JavaScript構建掃雷

我們已經介紹了打開單元格並用標記標記它們的動作,所以讓我們談談玩家可以採取的最後一個動作:打開已經打開的單元格的相鄰單元格。該handleCtrlClick函數包含邏輯此。此播放器可以通過按住ctrl並左鍵單擊包含相鄰地雷的打開的單元格來執行此操作。

檢查這些條件後我們要做的第一件事就是建立一個相鄰標記單元格的列表。如果標記的單元格的數量與周圍的地雷的實際數量匹配,那麼我們可以繼續。否則,我們什麼也不做,退出該功能。

如果我們能夠繼續下去,我們接下來要做的就是檢查任何標記的單元格是否包含礦井。如果這是真的,我們知道玩家錯誤地預測了礦井位置,並且點擊所有未標記的相鄰小區將以損失結束。我們需要設置本地丟失變量並調用丟失函數。我們在文章前面討論了 損失函數。

如果玩家沒有丟失,那麼我們將需要打開未標記的相鄰小區。我們只需要遍歷它們並在每個上調用handleClick函數。但是,我們必須首先將ctrlIsPressed變量設置為false,以防止錯誤地落入handleCtrlClick函數。

開始一場新遊戲

如何使用JavaScript構建掃雷

在線體驗JS版掃雷

由於頭條審核網址比較嚴,防止他們誤會是推廣,所以大家可以自行搜索體驗

也可以關注我後給我發送 `JS版掃雷`,會自動把在線體驗地址發送給你(做了關鍵字自動回覆)

您知道哪些好的JS實現小遊戲,歡迎評論分享,共同探討學習

如果覺得文章能夠對您有所幫助,可以關注我,你的支持會鼓勵我不斷分享更多更好的優質文章。

"

相關推薦

推薦中...