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

原生JS手写扫雷小游戏

news 2026/2/10 11:44:49

场景

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

思路

  • 创建游戏板（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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/9 2:42:51

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/22 16:15:42

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09