当前位置： 首页 > news >正文

原生JS手写扫雷小游戏

news 2026/2/11 1:00:12

场景

实现一个完整的扫雷游戏需要一些复杂的逻辑和界面交互。我将为你提供一个简化版的扫雷游戏示例，帮助你入门。请注意，这只是一个基本示例，你可以根据自己的需求进行扩展和改进。
在这里插入图片描述

思路

  • 创建游戏板（Grid）：

    创建一个二维数组来表示游戏板格子，每个格子包含信息如是否是地雷、周围地雷数量、是否被揭示等。

  • 生成地雷：

    在游戏板上随机生成指定数量的地雷位置，确保不重复。

  • 计算周围地雷数量：

    遍历游戏板格子，对每个格子计算周围八个格子中地雷的数量，用于显示数字。

  • 揭示格子：

    实现点击格子的交互，点击时根据格子状态进行不同操作。
    如果是地雷，游戏结束。
    如果是数字，显示数字。
    如果是空白格子，递归地揭示周围的空白格子。

  • 标记地雷：

    允许玩家标记可能的地雷格子，以帮助他们辨认哪些格子是地雷。
    确保标记的数量与实际地雷数量一致。

  • 计时器：

    开始计时器当游戏开始，停止计时器当游戏结束。
    显示游戏进行的时间。

  • 游戏状态检测：

    每次揭示格子或标记地雷后，检查游戏是否胜利或失败。

  • 胜利条件：所有非地雷格子都被揭示。

  • 失败条件：揭示到地雷格子。

  • 重新开始功能：

    提供一个重新开始按钮，用于重置游戏状态。

  • 界面设计：

    创建游戏界面，包括游戏板、计时器、标记地雷数等元素。
    点击事件、按钮交互等用户界面交互。

  • 游戏难度设置（可选）：

    允许玩家选择不同的难度，调整地雷数量和游戏板大小。

  • 游戏结束界面：

    在游戏结束时，显示一个弹出窗口或提示信息，展示游戏胜负结果。

代码

HTML

<body><div class="header"><div class="timer" id="timer">Time: 0</div><button class="restart-button" id="restartButton">Restart</button></div><div class="board" id="board"></div>
</body>

JS

 const board = document.getElementById('board');
const restartButton = document.getElementById('restartButton');
const timerDisplay = document.getElementById('timer');
const rows = 10;
const cols = 10;
const mines = 20;
let minePositions = [];
let revealedCells = 0;
let timer;
let seconds = 0;function createBoard() {for (let i = 0; i < rows; i++) {for (let j = 0; j < cols; j++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.row = i;cell.dataset.col = j;board.appendChild(cell);cell.addEventListener('click', () => revealCell(cell));}}
}function generateMines() {minePositions = [];while (minePositions.length < mines) {const row = Math.floor(Math.random() * rows);const col = Math.floor(Math.random() * cols);const position = `${row}-${col}`;if (!minePositions.includes(position)) {minePositions.push(position);}}
}function startTimer() {timer = setInterval(() => {seconds++;timerDisplay.textContent = `Time: ${seconds}`;}, 1000);
}function stopTimer() {clearInterval(timer);
}function revealCell(cell) {const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);const position = `${row}-${col}`;if (minePositions.includes(position)) {cell.textContent = '💣';console.log(cell.textContent,"cell");alert('炸弹💣');setTimeout(()=>{resetGame();},1000)} else {const minesAround = countMinesAround(row, col);cell.textContent = minesAround;cell.classList.add('revealed');revealedCells++;}// ...// 之前的 revealCell 函数代码不变if (revealedCells === rows * cols - mines) {stopTimer();alert('Congratulations! You win!');resetGame();}
}
function countMinesAround(row, col) {let count = 0;for (let i = -1; i <= 1; i++) {for (let j = -1; j <= 1; j++) {const newRow = row + i;const newCol = col + j;const position = `${newRow}-${newCol}`;if (minePositions.includes(position)) {count++;}}}return count;
}
function resetGame() {board.innerHTML = '';revealedCells = 0;seconds = 0;timerDisplay.textContent = `Time: ${seconds}`;stopTimer();generateMines();createBoard();startTimer();
}restartButton.addEventListener('click', resetGame);generateMines();
createBoard();
startTimer();

CSS

 .header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;
}.timer {font-size: 18px;
}.restart-button {padding: 5px 10px;font-size: 16px;background-color: #007bff;color: white;border: none;cursor: pointer;
}
.board {display: grid;grid-template-columns: repeat(10, 30px);gap: 2px;
}.cell {width: 30px;height: 30px;border: 1px solid #ccc;text-align: center;line-height: 30px;font-size: 18px;cursor: pointer;
}

在这里插入图片描述
以上就是js手写扫雷小游戏感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…

相关文章：

原生JS手写扫雷小游戏

场景 实现一个完整的扫雷游戏需要一些复杂的逻辑和界面交互。我将为你提供一个简化版的扫雷游戏示例&#xff0c;帮助你入门。请注意&#xff0c;这只是一个基本示例&#xff0c;你可以根据自己的需求进行扩展和改进。 思路 创建游戏板&#xff08;Grid&#xff09;&#xff1…...

编程日记 2023/8/11 22:21:55

网络安全进阶学习第十五课——Oracle SQL注入

文章目录 一、Oracle数据库介绍二、Oracle和MySQL的语法差异&#xff1a;三、Oracle的数据库结构四、Oracle的重点系统表五、Oracle权限分类1、系统权限2、实体权限3、管理角色 六、oracle常用信息查询方法七、联合查询注入1、order by 猜字段数量2、查数据库版本和用户名3、查…...

编程日记 2023/8/11 22:20:54

线程池死循环系统卡住

案例&#xff1a; 同一个线程池。 首先核心线程数是8&#xff0c;我一次提交了 > 8个主任务&#xff0c;然后主任务又各自开启了几个子任务。 所以子任务没有核心线程来跑&#xff0c;只能放进阻塞队列等。 但主任务又等待子任务的结果&#xff0c;不释放占用线程&#xff…...

编程日记 2023/8/11 22:19:52

多用户微商城多端智慧生态电商系统搭建

多用户微商城多端智慧生态电商系统的搭建步骤如下&#xff1a; 系统规划&#xff1a;在搭建多用户微商城多端智慧生态电商系统之前&#xff0c;需要进行系统规划。包括确定系统的目标、功能、架构、技术选型、开发流程等方面。市场调研&#xff1a;进行市场调研&#xff0c;了…...

编程日记 2023/8/11 22:18:49

基于Kubeadm部署k8s集群：下篇

继续上篇内容 目录 7、安装flannel 8、节点管理命令 三、安装Dashboard UI 1、部署Dashboard 2、开放端口设置 3、权限配置 7、安装flannel Master 节点NotReady 的原因就是因为没有使用任何的网络插件&#xff0c;此时Node 和Master的连接还不正常。目前最流行的Kuber…...

编程日记 2023/8/11 22:17:47

【Python matplotlib】鼠标右键移动画布

在 Matplotlib 中&#xff0c;鼠标右键移动画布的功能通常是通过设置交互模式来实现的&#xff0c;例如使用 mpl_connect 方法。以下是一个示例代码&#xff0c;展示如何在 Matplotlib 中使用 mpl_connect 方法来实现鼠标右键移动画布的功能&#xff1a; import numpy as np …...

编程日记 2023/8/11 22:16:46

Sleuth+Zipkin服务链路追踪

微服务架构是一个分布式架构&#xff0c;它按业务划分服务单元。一个分布式系统往往有很多个服务单元。由于服务单元数量众多&#xff0c;业务的复杂性&#xff0c;如果出现了错误和异常&#xff0c;很难去定位。主要体现在&#xff0c;一个请求可能需要调用很多个服务&#xf…...

编程日记 2023/8/11 22:15:45

100G光模块的应用案例分析：电信、云计算和大数据领域

100G光模块是一种高速光模块&#xff0c;由于其高速率和低延迟的特性&#xff0c;在电信、云计算和大数据领域得到了广泛的应用。在本文中&#xff0c;我们将深入探讨100G光模块在这三个领域的应用案例。 一、电信领域 在电信领域&#xff0c;100G光模块被广泛用于构建高速通…...

编程日记 2023/8/11 22:14:44

MongoDB安装和配置

一、MongoDB安装和配置 1、进入官网下载你所需要的安装版本&#xff0c;点击直通官网 Step1&#xff1a;进入官网后&#xff0c;将看到如下界面&#xff0c;点击上方导航栏Products&#xff0c;找到Community Server Step2&#xff1a;选择自己需要的版本、系统和压缩方式 2、下…...

编程日记 2023/8/11 22:13:42

解决createRoot is not a function

报错&#xff1a; 出现的原因&#xff1a;在于把react18使用的vite构建&#xff0c;在开发中因react版本太高与其他库不兼容&#xff0c;而在降级的时候&#xff0c;出现以上dom渲染出现报错。 解决&#xff1a;将 src/index.j文件改成如下 import React from react; import…...

编程日记 2023/8/11 22:12:41

【Windows 常用工具系列 6 -- CSDN字体格式（字体、颜色、大小）、背景色设置】

文章目录 背景字体大小设置字体颜色设置字体类型背景色 背景 Markdown是一种轻量级标记语言&#xff0c;它的目标是实现“易读易写”。创立于2004年&#xff0c;由约翰格鲁伯&#xff08;John Gruber&#xff09;和亚伦斯沃茨&#xff08;Aaron Swartz&#xff09;共同设计。 …...

编程日记 2023/8/11 22:11:40

带着问题学习分布式系统

写在前面 听过很多道理&#xff0c;却依然过不好这一生。 看过很多关于学习的技巧、方法&#xff0c;却没应用到自己的学习中。 随着年纪变大&#xff0c;记忆力越来越差&#xff0c;整块的时间也越来越少&#xff0c;于是&#xff0c;越来越希望能够更高效的学习。学习是一种习…...

编程日记 2023/8/11 22:10:39

element vue2 动态添加 select+tree

难点在 1 添加一组一组的渲染 是往数组里push对象 循环的&#xff1b;但是要注意对象的结构! 因为这涉及到编辑完成后&#xff0c;表单提交时候的 校验&#xff01; 是校验每一个select tree里边 是否勾选 2 是在后期做编辑回显的时候 保证后端返回的值 是渲染到 select中的tr…...

编程日记 2023/8/11 22:09:38

MySQL Linux自建环境备份至远端服务器自定义保留天数

环境准备 linux下安装mysql请看 Linux环境安装单节点mysql8.0.16 系统版本: CentOS 7 软件版本： mysql8.0.16 备份策略与实现方法 此次备份依赖mysql自带命令mysqldump与linux下crontab命令（定时任务） mysqldump mysqldump客户实用程序执行 逻辑备份，产生一组能够被执行…...

编程日记 2023/8/11 22:08:35

2023下半年软考改成机考，对考生有哪些影响？

软考改革成无纸化考试已经实锤。根据陕西软考办官网的消息&#xff0c;从2023年11月起&#xff0c;软考的所有科目都将改为机器考试形式。详情请参阅&#xff1a; 那么软考考试改为机考后&#xff0c;对我们会有哪些影响呢&#xff1f;我来简单概括一下。 1、复习的方法可以根…...

编程日记 2023/8/11 22:07:34

MySQL存储结构及索引

文章目录 MySQL结构1.2存储引擎介绍1.3存储引擎特点InnoDB逻辑存储结构 MyISAMMemory区别及特点存储引擎选择 索引索引概述索引结构BTreeHash索引分类聚集索引&二级索引索引语法SQL性能分析索引优化最左前缀法则范围查询字符串不加引号模糊查询or连接条件数据分布影响覆盖索…...

编程日记 2023/8/11 22:06:33

2023 RISC-V中国峰会 安全相关议题汇总

目录 1、The practical use cases of the RISC-V IOPMP 2、构建安全可信、稳定可靠的RISC-V安全体系 3、Enhancing RISC-V Debug Security with hardware-based isolation 4、Closing a side door: Designing high-performance RISC-V core resilient to branch prediction…...

编程日记 2023/8/11 22:05:31

要过软考，务必先搞清楚这3点

前段时间软考成绩出来了&#xff0c;大家都过了没&#xff1f; 我看好多人都说早上的题目稳过&#xff0c;下午的好多都挂了。 软考每年这个通过率&#xff0c;确实是一言难尽。 到底怎么样才能过&#xff0c;自学、培训&#xff0c;各种诀窍&#xff0c;五花八门。 但考不过…...

编程日记 2023/8/11 22:04:30

windows常用shell命令大全

简介 基于鼠标操作的后果就是OS界面外观发生改变&#xff0c; 就得多花学习成本。更主要的是基于界面引导Path与命令行直达速度是难以比拟的。另外Geek很大一部分是键盘控&#xff0c;而非鼠标流的。 整理Windows的常用Shell命令&#xff0c;一方面帮助深入学习Mysql&#xf…...

编程日记 2023/8/11 22:03:25

skywalking忽略调用链路中的指定异常

文章目录 一、介绍二、演示项目介绍1. 支付服务2. 订单服务 三、项目演示1. 未忽略异常2. 忽略异常修改配置使用注解 四、结论 往期内容 一、skywalking安装教程 二、skywalking全链路追踪 三、skywalking日志收集 一、介绍 在前面介绍在微服务项目中使用skywalking进行全链…...

编程日记 2023/8/11 22:02:24

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/2/8 20:42:48

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2026/2/5 3:41:42

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2026/2/3 12:56:31

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46