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>

相关推荐
大怪v14 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵14 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda14 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机16 小时前
Promise 常见面试题(持续更新中)
前端·javascript
WebDesign_Mu18 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
噢,我明白了18 小时前
前端js 常见算法面试题目详解
前端·javascript·算法
学编程的小虎18 小时前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
做好一个小前端19 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
携欢19 小时前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
勤奋菲菲20 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化