做了个扫雷💣 8×8大小 源代码在文章最后
界面
先点击蓝色开局按钮
然后就可以再扫雷的棋盘上玩
0代表该位置没有雷
其他数字代表周围雷的数量
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扫雷游戏</title>
<style>
/* CSS代码开始 */
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.title {
text-align: center;
font-size: 2em;
margin-bottom: 20px;
}
.start-game-btn {
display: block;
margin: 0 auto 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.start-game-btn:hover {
background-color: #0056b3;
}
td {
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
border: 1px solid #ddd;
cursor: pointer;
}
/* CSS代码结束 */
</style>
</head>
<body>
<div class="container">
<h1 class="title">扫雷</h1>
<button id="startGameBtn" class="start-game-btn">开局</button>
<table id="mineField"></table>
</div>
<script>
/* JavaScript代码开始 */
document.getElementById('startGameBtn').addEventListener('click', startGame);
function startGame() {
const mineField = document.getElementById('mineField');
mineField.innerHTML = '';
const rows = 8, cols = 8;
const mines = 10;
for (let i = 0; i < rows; i++) {
let row = document.createElement('tr');
for (let j = 0; j < cols; j++) {
let cell = document.createElement('td');
cell.addEventListener('click', () => revealCell(i, j));
row.appendChild(cell);
}
mineField.appendChild(row);
}
let mineLocations = [];
while (mineLocations.length < mines) {
let x = Math.floor(Math.random() * rows);
let y = Math.floor(Math.random() * cols);
if (!mineLocations.includes(x + ',' + y)) {
mineLocations.push(x + ',' + y);
document.getElementById('mineField').rows[x].cells[y].setAttribute('data-mine', 'true');
}
}
function revealCell(row, col) {
let cell = document.getElementById('mineField').rows[row].cells[col];
if (cell.getAttribute('data-revealed') === 'true') return;
cell.setAttribute('data-revealed', 'true');
if (cell.getAttribute('data-mine') === 'true') {
alert('失败！');
resetGame();
} else {
cell.textContent = getAdjacentMinesCount(row, col);
if (cell.textContent === '0') {
revealAdjacentCells(row, col);
}
checkWin();
}
}
function getAdjacentMinesCount(row, col) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
if (i === 0 && j === 0) continue;
let r = row + i, c = col + j;
if (r >= 0 && r < rows && c >= 0 && c < cols) {
if (document.getElementById('mineField').rows[r].cells[c].getAttribute('data-mine') === 'true') {
count++;
}
}
}
}
return count;
}
function revealAdjacentCells(row, col) {
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
if (i === 0 && j === 0) continue;
let r = row + i, c = col + j;
if (r >= 0 && r < rows && c >= 0 && c < cols) {
revealCell(r, c);
}
}
}
}
function checkWin() {
let revealedCells = 0;
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
if (document.getElementById('mineField').rows[i].cells[j].getAttribute('data-revealed') === 'true') {
revealedCells++;
}
}
}
if (revealedCells === rows * cols - mines) {
alert('成功！');
resetGame();
}
}
function resetGame() {
window.location.reload();
}
}
/* JavaScript代码结束 */
</script>
</body>
</html>