原生JS手写扫雷小游戏
场景
实现一个完整的扫雷游戏需要一些复杂的逻辑和界面交互。我将为你提供一个简化版的扫雷游戏示例,帮助你入门。请注意,这只是一个基本示例,你可以根据自己的需求进行扩展和改进。
思路
-
创建游戏板(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手写扫雷小游戏
场景 实现一个完整的扫雷游戏需要一些复杂的逻辑和界面交互。我将为你提供一个简化版的扫雷游戏示例,帮助你入门。请注意,这只是一个基本示例,你可以根据自己的需求进行扩展和改进。 思路 创建游戏板(Grid)࿱…...
网络安全进阶学习第十五课——Oracle SQL注入
文章目录 一、Oracle数据库介绍二、Oracle和MySQL的语法差异:三、Oracle的数据库结构四、Oracle的重点系统表五、Oracle权限分类1、系统权限2、实体权限3、管理角色 六、oracle常用信息查询方法七、联合查询注入1、order by 猜字段数量2、查数据库版本和用户名3、查…...
线程池死循环系统卡住
案例: 同一个线程池。 首先核心线程数是8,我一次提交了 > 8个主任务,然后主任务又各自开启了几个子任务。 所以子任务没有核心线程来跑,只能放进阻塞队列等。 但主任务又等待子任务的结果,不释放占用线程ÿ…...
多用户微商城多端智慧生态电商系统搭建
多用户微商城多端智慧生态电商系统的搭建步骤如下: 系统规划:在搭建多用户微商城多端智慧生态电商系统之前,需要进行系统规划。包括确定系统的目标、功能、架构、技术选型、开发流程等方面。市场调研:进行市场调研,了…...
基于Kubeadm部署k8s集群:下篇
继续上篇内容 目录 7、安装flannel 8、节点管理命令 三、安装Dashboard UI 1、部署Dashboard 2、开放端口设置 3、权限配置 7、安装flannel Master 节点NotReady 的原因就是因为没有使用任何的网络插件,此时Node 和Master的连接还不正常。目前最流行的Kuber…...
【Python matplotlib】鼠标右键移动画布
在 Matplotlib 中,鼠标右键移动画布的功能通常是通过设置交互模式来实现的,例如使用 mpl_connect 方法。以下是一个示例代码,展示如何在 Matplotlib 中使用 mpl_connect 方法来实现鼠标右键移动画布的功能: import numpy as np …...
Sleuth+Zipkin服务链路追踪
微服务架构是一个分布式架构,它按业务划分服务单元。一个分布式系统往往有很多个服务单元。由于服务单元数量众多,业务的复杂性,如果出现了错误和异常,很难去定位。主要体现在,一个请求可能需要调用很多个服务…...
100G光模块的应用案例分析:电信、云计算和大数据领域
100G光模块是一种高速光模块,由于其高速率和低延迟的特性,在电信、云计算和大数据领域得到了广泛的应用。在本文中,我们将深入探讨100G光模块在这三个领域的应用案例。 一、电信领域 在电信领域,100G光模块被广泛用于构建高速通…...
MongoDB安装和配置
一、MongoDB安装和配置 1、进入官网下载你所需要的安装版本,点击直通官网 Step1:进入官网后,将看到如下界面,点击上方导航栏Products,找到Community Server Step2:选择自己需要的版本、系统和压缩方式 2、下…...
解决createRoot is not a function
报错: 出现的原因:在于把react18使用的vite构建,在开发中因react版本太高与其他库不兼容,而在降级的时候,出现以上dom渲染出现报错。 解决:将 src/index.j文件改成如下 import React from react; import…...
【Windows 常用工具系列 6 -- CSDN字体格式(字体、颜色、大小)、背景色设置】
文章目录 背景字体大小设置字体颜色设置字体类型背景色 背景 Markdown是一种轻量级标记语言,它的目标是实现“易读易写”。创立于2004年,由约翰格鲁伯(John Gruber)和亚伦斯沃茨(Aaron Swartz)共同设计。 …...
带着问题学习分布式系统
写在前面 听过很多道理,却依然过不好这一生。 看过很多关于学习的技巧、方法,却没应用到自己的学习中。 随着年纪变大,记忆力越来越差,整块的时间也越来越少,于是,越来越希望能够更高效的学习。学习是一种习…...
element vue2 动态添加 select+tree
难点在 1 添加一组一组的渲染 是往数组里push对象 循环的;但是要注意对象的结构! 因为这涉及到编辑完成后,表单提交时候的 校验! 是校验每一个select tree里边 是否勾选 2 是在后期做编辑回显的时候 保证后端返回的值 是渲染到 select中的tr…...
MySQL Linux自建环境备份至远端服务器自定义保留天数
环境准备 linux下安装mysql请看 Linux环境安装单节点mysql8.0.16 系统版本: CentOS 7 软件版本: mysql8.0.16 备份策略与实现方法 此次备份依赖mysql自带命令mysqldump与linux下crontab命令(定时任务) mysqldump mysqldump客户实用程序执行 逻辑备份,产生一组能够被执行…...
2023下半年软考改成机考,对考生有哪些影响?
软考改革成无纸化考试已经实锤。根据陕西软考办官网的消息,从2023年11月起,软考的所有科目都将改为机器考试形式。详情请参阅: 那么软考考试改为机考后,对我们会有哪些影响呢?我来简单概括一下。 1、复习的方法可以根…...
MySQL存储结构及索引
文章目录 MySQL结构1.2存储引擎介绍1.3存储引擎特点InnoDB逻辑存储结构 MyISAMMemory区别及特点存储引擎选择 索引索引概述索引结构BTreeHash索引分类聚集索引&二级索引索引语法SQL性能分析索引优化最左前缀法则范围查询字符串不加引号模糊查询or连接条件数据分布影响覆盖索…...
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…...
要过软考,务必先搞清楚这3点
前段时间软考成绩出来了,大家都过了没? 我看好多人都说早上的题目稳过,下午的好多都挂了。 软考每年这个通过率,确实是一言难尽。 到底怎么样才能过,自学、培训,各种诀窍,五花八门。 但考不过…...
windows常用shell命令大全
简介 基于鼠标操作的后果就是OS界面外观发生改变, 就得多花学习成本。更主要的是基于界面引导Path与命令行直达速度是难以比拟的。另外Geek很大一部分是键盘控,而非鼠标流的。 整理Windows的常用Shell命令,一方面帮助深入学习Mysql…...
skywalking忽略调用链路中的指定异常
文章目录 一、介绍二、演示项目介绍1. 支付服务2. 订单服务 三、项目演示1. 未忽略异常2. 忽略异常修改配置使用注解 四、结论 往期内容 一、skywalking安装教程 二、skywalking全链路追踪 三、skywalking日志收集 一、介绍 在前面介绍在微服务项目中使用skywalking进行全链…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...

