JS實現掃雷

一個近期學習JavaScript的小專案~

• 專案github地址
• 掃雷試玩（github page，部分操作會有點延時）

效果圖

大體思路

掃雷基本

• 地雷：用隨機數隨機生成
• 數字：在地雷生成之後，數在當前格子周圍的地雷數生成
• 雷數和地圖大小：
  • 初級：10個雷，9*9
  • 中級：40個雷，16*16
  • 高階：99個雷，16*30

檔案組織

• images資料夾存放圖片
  • 本專案使用的圖片來源：阿里巴巴向量相簿
• index.html做展示出來的頁面
• index.css做頁面的樣式
• index.js做頁面的邏輯程式碼

用於展示地圖的標籤

• 使用<table></table>展示地圖
• table中的行/列（行<tr></tr>列<td></td>）使用JS動態生成、改變

基本邏輯

• 單擊左鍵
  在未開啟的區域點開數字：如果是數字0，則需遞迴到炸彈或數字的邊界處開啟
• 單擊右鍵
  • 在未開啟的區域插旗
  • 在插旗的區域放問號
  • 在問號的區域恢復未開啟狀態
• 左右鍵同時按下
  • 高亮當前所指方格周圍的8個格子中，還未開啟的區域
• 左右鍵同時抬起
  • 高亮恢復
  • 若當前所指為開啟的數字，且周圍的雷數已被滿足，遞迴開啟數字部分，基本邏輯同單擊左鍵開啟的邏輯

總結

• 本專案的實現邏輯很簡單（僅涉及遞迴），但能明白JS涉及的一些滑鼠操作、檔案的組織。
• 當把網頁部署到伺服器上使用nginx代理時，發現操作瞬間順滑了許多，比github page上更流暢…