场景
实现一个完整的扫雷游戏需要一些复杂的逻辑和界面交互。我将为你提供一个简化版的扫雷游戏示例，帮助你入门。请注意，这只是一个基本示例，你可以根据自己的需求进行扩展和改进。
思路
- 创建游戏板（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手写扫雷小游戏感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
