html+js+css做的扫雷

做了个扫雷💣 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>

相关推荐
不坑老师10 分钟前
macOS、Linux上的WPS终于有不坑盒子了,安装很简单,一行命令完成!
vue.js·html
十年_H14 分钟前
Cesium 顶点着色器的数据来源
javascript·webgl·cesium
玉宇夕落16 分钟前
🌌用CSS3打造“星球大战”片头:前端是代码界的导演,让文字在星空中翻滚
前端·javascript
gustt17 分钟前
CSS3 动画实战:打造星球大战开场动画
前端·css
colorFocus18 分钟前
Promise与async/await的接口串联和并联
前端·javascript
Happy coder24 分钟前
【avalonia教程】17mvvm简介、command
前端·javascript·vue.js
烟袅27 分钟前
CSS Animation 全面解析:从入门到实战,打造丝滑动效
前端·css
老前端的功夫30 分钟前
Webpack 优化:你的构建速度其实还能快10倍
前端·javascript
Lsx_34 分钟前
ECharts 全局触发click点击事件(柱状图、折线图增大点击范围)
前端·javascript·echarts
不吃香菜的猪41 分钟前
构建时变量注入:Vite 环境下 SCSS 与 JavaScript 的变量同步机制
前端·javascript·scss