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

原生JS手写扫雷小游戏

news 2025/6/16 13:29:55

场景

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

思路

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

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/6/15 4:00:01

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/11 15:58:14

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/6/14 20:41:37

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/6/15 20:32:53

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/6/15 5:25:46

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/6/15 4:09:04

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/6/15 23:23:39

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/6/16 11:39:36

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/6/16 11:49:14

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/16 11:45:57