要使用HTML、CSS和JavaScript制作一个简单的扫雷游戏，您可以参考以下示例代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mine Sweeper</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game">
<table>
<!-- Table rows and cells will be added dynamically using JavaScript -->
</table>
</div>
<button id="restart">Restart Game</button>
<script src="script.js"></script>
</body>
</html>CSS (styles.css):
#game {
margin: 10px auto;
border-collapse: collapse;
}
#game table {
border: 1px solid #000;
}
#game td {
width: 20px;
height: 20px;
border: 1px solid #000;
text-align: center;
line-height: 20px;
}
#game td.mine {
color: red;
}
#game td.swept {
background-color: #ccc;
}
#game td.swept-safe {
background-color: #bada55;
}
#restart {
display: block;
margin: 20px auto;
padding: 5px 10px;
cursor: pointer;
}JavaScript (script.js):
const ROWS = 10;
const COLS = 10;
const MINES = 10;
let gameOver = false;
let mines = [];
let safeCells = [];
function initGame() {
let table = document.createElement('table');
document.getElementById('game').appendChild(table);
for (let i = 0; i < ROWS; i++) {
let row = table.insertRow();
for (let j = 0; j < COLS; j++) {
let cell = row.insertCell();
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', sweep);
}
}
placeMines();
}
function placeMines() {
mines = [];
for (let i = 0; i < MINES; i++) {
let row = Math.floor(Math.random() * ROWS);
let col = Math.floor(Math.random() * COLS);
if (!mines.includes(`${row}-${col}`)) {
mines.push(`${row}-${col}`);
document.querySelector(`td[data-row="${row}"][data-col="${col}"]`).classList.add('mine');
}
}
}
function sweep(e) {
if (gameOver) return;
let cell = e.target;
if (cell.classList.contains('mine')) {
alert('Game over!');
gameOver = true;
mines.forEach(mine => {
document.querySelector(`td[data-row="${mine.split('-')[0]}"][data-col="${mine.split('-')[1]}"]`).classList.add('swept');
});
cell.classList.add('swept');
}