html写一个扫雷小游戏
下面是一个简单的扫雷小游戏的HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>扫雷小游戏</title>
<style>
.cell {
width: 20px;
height: 20px;
border: 1px solid black;
display: inline-block;
text-align: center;
vertical-align: middle;
font-weight: bold;
background-color: #ccc;
cursor: pointer;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>扫雷小游戏</h1>
<div id="board"></div>
<script>
const board = document.getElementById('board');
const rows = 10;
const cols = 10;
const totalMines = 10;
let mines = [];
let revealed = [];
function createBoard() {
for (let i = 0; i < rows; i++) {
let row = document.createElement('div');
row.className = 'row';
board.appendChild(row);
for (let j = 0; j < cols; j++) {
let cell = document.createElement('div');
cell.className = 'cell';
cell.setAttribute('data-row', i);
cell.setAttribute('data-col', j);
cell.addEventListener('click', handleClick);
row.appendChild(cell);
}
}
}
function generateMines() {
for (let i = 0; i < totalMines; i++) {
let row = Math.floor(Math.random() * rows);
let col = Math.floor(Math.random() * cols);
if (mines.find(mine => mine.row === row && mine.col === col)) {
i--;
} else {
mines.push({row, col});
}
}
}
function handleClick(event) {
let cell = event.target;
let row = parseInt(cell.getAttribute('data-row'));
let col = parseInt(cell.getAttribute('data-col'));
let isMine = mines.find(mine => mine.row === row && mine.col === col);
if (isMine) {
cell.style.backgroundColor = 'red';
cell.innerHTML = 'X';
revealMines();
alert('游戏结束！');
} else {
let count = countMines(row, col);
cell.style.backgroundColor = 'white';
cell.innerHTML = count;
cell.removeEventListener('click', handleClick);
revealed.push({row, col});
if (count === 0) {
revealEmptyCells(row, col);
}
if (revealed.length === rows * cols - totalMines) {
revealMines();
alert('恭喜你，游戏胜利！');
}
}
}
function countMines(row, col) {
let count = 0;
for (let i = row - 1; i <= row + 1; i++) {
for (let j = col - 1; j <= col + 1; j++) {
if (i >= 0 && i < rows && j >= 0 && j < cols) {
let isMine = mines.find(mine => mine.row === i && mine.col === j);
if (isMine) {
count++;
}
}
}
}
return count;
}
function revealEmptyCells(row, col) {
for (let i = row - 1; i <= row + 1; i++) {
for (let j = col - 1; j <= col + 1; j++) {
if (i >= 0 && i < rows && j >= 0 && j < cols) {
let cell = document.querySelector(`[data-row="${i}"][data-col="${j}"]`);
if (!cell.innerHTML) {
cell.click();
}
}
}
}
}
function revealMines() {
for (let mine of mines) {
let cell = document.querySelector(`[data-row="${mine.row}"][data-col="${mine.col}"]`);
cell.style.backgroundColor = 'red';
cell.innerHTML = 'X';
}
}
createBoard();
generateMines();
</script>
</body>
</html>
这个代码创建了一个10x10的游戏棋盘，其中有10个地雷。玩家通过点击方块来探索地雷的位置，当点击到地雷时游戏结束，点击到数字方块时显示周围的地雷数量，点击到空白方块时会自动展开周围的空白方块。当所有非地雷方块都被点击时，游戏胜利。
原文地址: https://www.cveoy.top/t/topic/jglV 著作权归作者所有。请勿转载和采集!