网页扫雷html css js,GitHub - zsr204/Sweep: js + html + css 实现一个简单的扫雷~~ 附加难度选择计时计雷数开始重新开始功能...

Sweep

js + html + css 实现一个简单的扫雷游戏~~ 附加难度选择计时计雷数开始重新开始功能

用户手册：

上方有两个按钮Start 和 Restart分别用来开始游戏和刷新页面重新开始

按钮的右侧是一个下拉框用于选择难度模式，分别有Easy 、Medium 、Hard 三种模式，分别对应了6 * 6、10 * 10、15 * 15的区域大小，其中分别包含6、10、15个雷~

上方左侧有两个标签span 标签 Mine 和 Time 分别用来表示剩余的雷数和已用时间

实现过程：

首先，该程序由几个模块组成，各功能如图所示:

其中的customize_Alert的js和css是我在网上找的一个蛮好看的alert美化代码，直接在html主体Sweep.html中引入即可，然后将所有的alert换成swal即可！

1.html主体Sweep.html

其中的部分就引入了我们前面所述的几个模块

在部分定义了两个span标签用来计时和计雷数，一个button用来开始游戏绑定了start()函数，另一个按钮用来重新开始游戏绑定了restart()函数，然后还有一个下拉框用来选择三种难度

在部分首先定义了几个常量，然后是start()函数的定义，其中是一个switch语句，读取下拉框选中的值，对应不同的难度，进行不同的初始化。最后就是restart()函数，用来刷新页面。

2.最重要的三个函数

1. initial_Ground.js

这个函数用于初始化，将场地转换为一个二维数组ground返回

2. block_Click.js

这个函数用于处理点击方格事件，函数的形参分别代表方格对应二维数组的横坐标和纵坐标以及鼠标事件

其中分为三种情况：

如果方格已经打开，则直接退出

点击了鼠标左键，且方格没有打开，判断是不是第一次打开，如果是的话，则随机生成对应的雷数，并用接下来要讲的的block_open打开方格

点击了鼠标右键，如果该方格不是红旗，则将该方格内容置为红旗，如果是红旗，则将该方格内容置为空

最后遍历整个二维数组，根据对应的红旗数减去对应的剩余雷数，并且判断游戏是否结束，如果结束了则停止计时

3. block_Open.js

这个函数用来打开方格，形参为方格对应二维数组ground的坐标其中分了三种情况讨论

如果打开的方格是雷，则显示雷的图片，并且遍历整个二维数组找到所有的雷并显示，并停止计时，输出游戏结束

如果打开的方格周围雷数为0，则遍历该方格周围一圈的8个方格，递归调用block_Open函数，打开所有雷数为0的方格

如果打开的方格周围雷数不为0，则显示该方格周围的雷数

网页扫雷html css js,GitHub - zsr204/Sweep: js + html + css 实现一个简单的扫雷~~ 附加难度选择计时计雷数开始重新开始功能...相关推荐

C语言编写一个简单的扫雷
C语言编写一个简单的扫雷 # include <stdio.h> # include <stdlib.h> # include <math.h> # include ...
js实现一个简单的扫雷
目录先看下最终的效果: 首先来分析一个扫雷游戏具有哪些功能分析完成后我们就开始一步步的实现 1. 相关html和css 2. 我们使用类来完成相应功能 3. 之后我们则是要定义一个地图 4. 对地 ...
js 获得明天0点时间戳_js实现一个简单钟表动画(javascript+html5 canvas)
自己学生时代的代码,发现还保存着,今天拿出来分享下. 用js和html5 canvas对象实现一个简单钟表程序主要用到的就是h5的canvas对象 canvas对象本人也不是很熟,大致看了几个常用的 ...
用C语言实现一个简单的扫雷游戏
初学者学习了一些c语言基础用法以后需要尝试实战练习,扫雷小游戏就十分适合.因为他能用到很多以前学习的知识,用来巩固再好不过了废话不多说开干我们首先要有一个清晰的思路和其他游戏一样我们打开游戏第 ...
Java写一个简单的扫雷游戏
〇.目录一.前言二.过程中遇到的困难三.代码四.成品图五.代码存在的bug 六.完善建议七.结语一.前言这个学期学习了Java,课程的最后一项作业就是做一个扫雷游戏和一个计算器,经历一 ...
用C语言实现一个简单的扫雷小游戏（附全代码及教程）
本文实例为大家分享了C语言实现扫雷游戏的具体代码,供大家参考,具体内容如下: 首先,创建一个text.c文件: 编写主函数: int main() {test();return 0; } 定义test ...
js 排列组合的一个简单例子
最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入比 ...
一个友好的扫雷程序————C初学者都能会的简单扫雷（一）
一.思路整理 (一).两个数组,我们设定两个数组来存放和显示,数组ying[][]用来存放 0和1,其中0代表无雷,1代表有雷.先进行数组初始化,开始时将数组内元素全部赋值为0 数组xian[][]用 ...
用C++写一个小游戏——扫雷（1）
一.项目准备 1.安装VS2022 (1)从官网下载Visal Studio(Community 2022): Visual Studio 2022 IDE - 适用于软件开发人员的编程工具 (mic ...
HTML5网页设计期末大作业 ~金福普洱茶叶网页设计成品6页面带视频留言验证(HTML+CSS+JS)~ 学生hbuilder网页设计作业成品源码
作品介绍 1.网页作品简介 :采用html+css+js表单验证 2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW.HBuilder.NotePAD .Vscode .Sublime ...

网页扫雷html css js,GitHub - zsr204/Sweep: js + html + css 实现一个简单的扫雷~~ 附加难度选择计时计雷数开始重新开始功能...

网页扫雷html css js,GitHub - zsr204/Sweep: js + html + css 实现一个简单的扫雷~~ 附加难度选择计时计雷数开始重新开始功能...相关推荐

最新文章

热门文章

网页扫雷html css js,GitHub - zsr204/Sweep: js + html + css 实现一个简单的扫雷~~ 附加 难度选择 计时 计雷数 开始 重新开始 功能...

网页扫雷html css js,GitHub - zsr204/Sweep: js + html + css 实现一个简单的扫雷~~ 附加 难度选择 计时 计雷数 开始 重新开始 功能...相关推荐

最新文章

热门文章

网页扫雷html css js,GitHub - zsr204/Sweep: js + html + css 实现一个简单的扫雷~~ 附加难度选择计时计雷数开始重新开始功能...

网页扫雷html css js,GitHub - zsr204/Sweep: js + html + css 实现一个简单的扫雷~~ 附加难度选择计时计雷数开始重新开始功能...相关推荐