场景
实现一个完整的扫雷游戏需要一些复杂的逻辑和界面交互。我将为你提供一个简化版的扫雷游戏示例,帮助你入门。请注意,这只是一个基本示例,你可以根据自己的需求进行扩展和改进。
思路
-
创建游戏板(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文章来源:https://www.toymoban.com/news/detail-645341.html
.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手写扫雷小游戏感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞
收藏谢谢~!
关注收藏博客 作者会持续更新…文章来源地址https://www.toymoban.com/news/detail-645341.html
到了这里,关于原生JS手写扫雷小游戏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!