使用js+html+css完成扫雷
时间: 2023-08-07 17:04:10 浏览: 59
你可以使用 JavaScript、HTML 和 CSS 来完成一个简单的扫雷游戏。以下是一个基本的实现示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>扫雷游戏</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="board"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS(style.css):
```css
#board {
display: grid;
grid-template-columns: repeat(10, 30px);
grid-template-rows: repeat(10, 30px);
}
.cell {
border: 1px solid #ccc;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.hidden {
background-color: #ccc;
}
.mine {
background-color: red;
}
```
JavaScript(script.js):
```javascript
document.addEventListener('DOMContentLoaded', () => {
const board = document.getElementById('board');
const size = 10;
const mineCount = 10;
let cells = [];
function createBoard() {
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener('click', handleCellClick);
board.appendChild(cell);
cells.push(cell);
}
}
}
function generateMines() {
const mines = Array(mineCount).fill(null);
mines.forEach(() => {
let randomCell = cells[Math.floor(Math.random() * cells.length)];
while (randomCell.classList.contains('mine')) {
randomCell = cells[Math.floor(Math.random() * cells.length)];
}
randomCell.classList.add('mine');
});
}
function handleCellClick(event) {
const cell = event.target;
if (cell.classList.contains('mine')) {
revealMines();
alert('Game Over!');
} else {
const row = parseInt(cell.dataset.row);
const col = parseInt(cell.dataset.col);
const mineCount = countAdjacentMines(row, col);
if (mineCount > 0) {
cell.textContent = mineCount;
} else {
cell.classList.add('hidden');
revealEmptyCells(row, col);
}
}
}
function countAdjacentMines(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 < size && j >= 0 && j < size) {
const adjacentCell = cells.find(cell => cell.dataset.row == i && cell.dataset.col == j);
if (adjacentCell && adjacentCell.classList.contains('mine')) {
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 < size && j >= 0 && j < size) {
const adjacentCell = cells.find(cell => cell.dataset.row == i && cell.dataset.col == j);
if (adjacentCell && !adjacentCell.classList.contains('hidden') && !adjacentCell.classList.contains('mine')) {
adjacentCell.classList.add('hidden');
const adjacentMineCount = countAdjacentMines(i, j);
if (adjacentMineCount === 0) {
revealEmptyCells(i, j);
} else {
adjacentCell.textContent = adjacentMineCount;
}
}
}
}
}
}
function revealMines() {
cells.forEach(cell => {
if (cell.classList.contains('mine')) {
cell.classList.add('hidden');
}
});
}
createBoard();
generateMines();
});
```
这是一个简单的实现,通过点击格子来揭示内容。你可以根据自己的需求进行扩展和改进。希望对你有所帮助!