場景
實現一個完整的掃雷游戲需要一些復雜的邏輯和界面交互。我將為你提供一個簡化版的掃雷游戲示例，幫助你入門。請注意，這只是一個基本示例，你可以根據自己的需求進行擴展和改進。
思路
-
創建游戲板（Grid）：
創建一個二維數組來表示游戲板格子，每個格子包含信息如是否是地雷、周圍地雷數量、是否被揭示等。
-
生成地雷：
在游戲板上隨機生成指定數量的地雷位置，確保不重復。
-
計算周圍地雷數量：
遍歷游戲板格子，對每個格子計算周圍八個格子中地雷的數量，用于顯示數字。
-
揭示格子：
實現點擊格子的交互，點擊時根據格子狀態進行不同操作。
如果是地雷，游戲結束。
如果是數字，顯示數字。
如果是空白格子，遞歸地揭示周圍的空白格子。 -
標記地雷：
允許玩家標記可能的地雷格子，以幫助他們辨認哪些格子是地雷。
確保標記的數量與實際地雷數量一致。 -
計時器：
開始計時器當游戲開始，停止計時器當游戲結束。
顯示游戲進行的時間。 -
游戲狀態檢測：
每次揭示格子或標記地雷后，檢查游戲是否勝利或失敗。
-
勝利條件：所有非地雷格子都被揭示。
-
失敗條件：揭示到地雷格子。
-
重新開始功能：
提供一個重新開始按鈕，用于重置游戲狀態。
-
界面設計：
創建游戲界面，包括游戲板、計時器、標記地雷數等元素。
點擊事件、按鈕交互等用戶界面交互。 -
游戲難度設置（可選）：
允許玩家選擇不同的難度，調整地雷數量和游戲板大小。
-
游戲結束界面：
在游戲結束時，顯示一個彈出窗口或提示信息，展示游戲勝負結果。
代碼
HTML
<body><div class="header"><div class="timer" id="timer">Time: 0</div><button class="restart-button" id="restartButton">Restart</button></div><div class="board" id="board"></div>
</body>
JS
const board = document.getElementById('board');
const restartButton = document.getElementById('restartButton');
const timerDisplay = document.getElementById('timer');
const rows = 10;
const cols = 10;
const mines = 20;
let minePositions = [];
let revealedCells = 0;
let timer;
let seconds = 0;function createBoard() {for (let i = 0; i < rows; i++) {for (let j = 0; j < cols; j++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.row = i;cell.dataset.col = j;board.appendChild(cell);cell.addEventListener('click', () => revealCell(cell));}}
}function generateMines() {minePositions = [];while (minePositions.length < mines) {const row = Math.floor(Math.random() * rows);const col = Math.floor(Math.random() * cols);const position = `${row}-${col}`;if (!minePositions.includes(position)) {minePositions.push(position);}}
}function startTimer() {timer = setInterval(() => {seconds++;timerDisplay.textContent = `Time: ${seconds}`;}, 1000);
}function stopTimer() {clearInterval(timer);
}function revealCell(cell) {const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);const position = `${row}-${col}`;if (minePositions.includes(position)) {cell.textContent = '💣';console.log(cell.textContent,"cell");alert('炸彈💣');setTimeout(()=>{resetGame();},1000)} else {const minesAround = countMinesAround(row, col);cell.textContent = minesAround;cell.classList.add('revealed');revealedCells++;}// ...// 之前的 revealCell 函數代碼不變if (revealedCells === rows * cols - mines) {stopTimer();alert('Congratulations! You win!');resetGame();}
}
function countMinesAround(row, col) {let count = 0;for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;const position = `${newRow}-${newCol}`;if (minePositions.includes(position)) {count++;}}}return count;
}
function resetGame() {board.innerHTML = '';revealedCells = 0;seconds = 0;timerDisplay.textContent = `Time: ${seconds}`;stopTimer();generateMines();createBoard();startTimer();
}restartButton.addEventListener('click', resetGame);generateMines();
createBoard();
startTimer();CSS
.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;
}.timer {font-size: 18px;
}.restart-button {padding: 5px 10px;font-size: 16px;background-color: #007bff;color: white;border: none;cursor: pointer;
}
.board {display: grid;grid-template-columns: repeat(10, 30px);gap: 2px;
}.cell {width: 30px;height: 30px;border: 1px solid #ccc;text-align: center;line-height: 30px;font-size: 18px;cursor: pointer;
}
以上就是js手寫掃雷小游戲感謝大家的閱讀
如碰到其他的問題 可以私下我 一起探討學習
如果對你有所幫助還請 點贊 收藏謝謝~！
關注收藏博客 作者會持續更新…
-瀏覽哆啦a夢的四次元口袋)
)
