文章目录

实现功能
1.扫雷设计
- 1.1 主界面
- 1.2 扫雷难度
- 1.3 附带功能
2.效果和源码
- 2.1 动态效果
- 2.2 源代码
源码下载

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/127886480

html实现扫雷小游戏(附源码)，html扫雷小游戏，仿制windows xp系统自带的扫雷应用的网页版，使用html+js+css实现。实现了应用版扫雷的基本功能。

实现功能

左键单击
在判断出不是雷的方块上按下左键，可以打开该方块。如果方块上出现数字，则该数字表示其周围3×3区域中的地雷数（一般为8个格子，对于边块为5个格子，对于角块为3个格子。所以扫雷中最大的数字为8）；如果方块上为空（相当于0），则可以递归地打开与空相邻的方块；如果不幸触雷，则游戏结束。
标记
在判断为地雷的方块上按下右键，可以标记地雷（显示为小红旗），重复一次或两次操作可取消标记。
双击
同时按下左键和右键完成双击，当双击位置周围已标记雷数等于该位置数字时操作有效，相当于对该数字周围未打开的方块均进行一次左键单击操作。地雷未标记完全时使用双击无效。若数字周围有标错的地雷，则游戏结束，标错的地雷上会显示一个“ ×”。表情会变成哭脸。

1.扫雷设计

记得最早玩扫雷是在上学那会，那个时候还是windows xp系统，附带的小游戏，就喜欢这个，但是贼费时间。
抽了个闲暇之余，仿照那个扫雷游戏，用html实现了个网页版的。下面上效果图。

1.1 主界面

扫雷的主要的操作功能，都实现，第一次点击没有雷，左右同时点击事件、右键点击事件，标记雷时间，计时，等

1.2 扫雷难度

扫雷难度分为初级（9 * 9，共10个雷）、中级（1616，共40个雷）、高级（3016，共99个雷）、自定义（可以自己配置块数和雷数）。

1.3 附带功能

增加了几个功能点，游戏源码、表白源码，里面有一些好的资源源码，可以提供学习帮助。

2.效果和源码

2.1 动态效果

《扫雷》是一款大众类的益智小游戏，游戏规则是在最短的时间内，根据点击格子出现的数字找出所有非雷格子，同时避免踩雷，踩到一个雷即全盘皆输，但许多玩过扫雷的人却仍然有一些规则不明白。

html实现扫雷

2.2 源代码

这是主界面的代码，其他图片、js、css等代码，见下面的源码下载，里面有所有代码和介绍。

<!-- /***title:html实现扫雷* code url:https://blog.csdn.net/weixin_43151418/article/details/127886480*/  -->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" /> <link rel="icon" type="image/png" href="./images/icon.png" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>扫雷小游戏 - xcLeigh</title><script type="text/javascript" src="./js/index.js"></script><link rel="Stylesheet" type="text/css" href="./css/index.css" />
</head>
<body oncontextmenu="return false;" onselectstart="return false;" unselectable="on" ondragstart="return false;"><div class = "mine-wrap"><div class = "title clearfix"><div class="title-txt">扫雷</div><ul class="window-control"><!-- <li class="window-min"></li><li class="window-max"></li> --><li class="window-close" onclick="window.close()"></li></ul></div><div class="mine-main clearfix"><div class="mine-menu clearfix"><ul class="mine-menu-ul clearfix"><li class="menu-game">游戏关卡<ul class="menu-sub clearfix"><li><span class="menu-sub-left"><input type="radio" name="mine-type"value ="0"></span><span class="menu-sub-right">初级</span></li><li><span class="menu-sub-left"><input type="radio" name="mine-type" value ="1"></span><span class="menu-sub-right">中级</span></li><li><span class="menu-sub-left"><input type="radio" name="mine-type" value ="2"></span><span class="menu-sub-right">高级</span></li><li><span class="menu-sub-left"><input type="radio" name="mine-type" value ="3"></span><span class="menu-sub-right">自定义</span></li></ul></li><li class="menu-game">游戏源码<ul class="menu-sub clearfix"><li><span class="menu-sub-left">人气</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127619801" target="_blank">html实现五子棋</a></span></li><li><span class="menu-sub-left">人气</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127635252" target="_blank">html实现打飞机</a></span></li><li><span class="menu-sub-left">最火</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/126465393" target="_blank">html实现吃月饼</a></span></li><li><span class="menu-sub-left">最火</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127869325" target="_blank">html实现数独</a></span></li><li><span class="menu-sub-left">最新</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/125074948" target="_blank">html实现拼图</a></span></li><li><span class="menu-sub-left">最新</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127631871" target="_blank">html实现贪吃蛇</a></span></li></ul></li><li class="menu-game">表白源码<ul class="menu-sub clearfix"><li><span class="menu-sub-left">最新</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/127814650" target="_blank">html实现爱情纪念册</a></span></li><li><span class="menu-sub-left">最新</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/126099643" target="_blank">html实现爱心告白</a></span></li><li><span class="menu-sub-left">人气</span><span class="menu-sub-right"><a href="https://blog.csdn.net/weixin_43151418/article/details/124970985" target="_blank">html实现浪漫表白求爱</a></span></li></ul></li><li><a href="https://blog.csdn.net/weixin_43151418" target="_blank">关于我</a></li></ul></div><div class="mine-con"><div class="game-tags clearfix"><div class="game-tag-images"><img src="./images/d0.bmp"><img src="./images/d0.bmp"><img src="./images/d0.bmp"></div><div class="game-face"><img src="./images/face_normal.bmp" onclick = "mine1.init()" id="face"></div><div class="game-time-images"><img src="./images/d0.bmp"><img src="./images/d0.bmp"><img src="./images/d0.bmp"></div></div><div class="mine-canvas"><canvas id="mine1" width="" height=""></canvas></div></div></div></div><div style="position:absolute;left:0;top:0; width:80px;height:80px;"><div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0F85F4;z-index:999;"><a href="https://blog.csdn.net/weixin_43151418/article/details/127635252" target="_blank" style="text-decoration:none; font-weight:bold">打飞机</a></div><div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div><div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div style="position:absolute;right:0;top:0; width:80px;height:80px;"><div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0BABC4;z-index:999;"><a href="https://blog.csdn.net/weixin_43151418/article/details/127631871" target="_blank" style="text-decoration:none; font-weight:bold">贪吃蛇</a></div><div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div><div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div style="position:absolute;right:0;bottom:0; width:80px;height:80px;"><div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:red;z-index:999;"><a href="https://blog.csdn.net/weixin_43151418/article/details/127619801" target="_blank" style="text-decoration:none; font-weight:bold">五子棋</a></div><div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div><div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div style="position:absolute;left:0;bottom:0; width:80px;height:80px;"><div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:orange;z-index:999;"><a href="https://blog.csdn.net/weixin_43151418/article/details/126465393" target="_blank" style="text-decoration:none; font-weight:bold;">吃月饼</a></div><div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div><div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'></div></div><div  style="position:absolute;left:0;bottom:0; width:100%;height:80px; line-height:80px; text-align:center; z-index:99;"><a href="https://blog.csdn.net/weixin_43151418" target="_blank" style="text-decoration:none; font-weight:bold;color:white;">xcLeigh | 星空系列 | 扫雷小游戏</a></div>
</body>

源码下载

html实现扫雷小游戏(源码) 点击下载

html实现扫雷小游戏(附源码)相关推荐

【Python游戏】Python基于pygame实现的人机大战的斗兽棋小游戏 | 附源码
前言有粉丝说要我出一期Python版本的斗兽棋,今天宠粉狂魔的我不就来啦!! 虽然是一个简单的小游戏,但是对于新手小伙伴来说还是有一定的小难度的哟!要是不理解都可以找到小编的哈!! 相关文件关注小 ...
整理了30款Python小游戏附源码，五一有的玩了
快到五一了,整理了 30 款 Python 小游戏源码分享给大家,具体内容可以点击下方视频号查看: 点击上方视频后,源码获取方式:①关注上方视频号.②点赞当前视频.③在当前视频评论区扣1 友情提示:获 ...
【Python游戏】基于化学方程式的基础上，用Python实现一个消灭泡泡小游戏 | 附源码
前言 halo,包子们下午好今天实现的这个小游戏呀,说实话化学不太好的小伙伴可能看起来会有点懵逼不过不用担心,咱们今天不是来学化学的,我们是来学习Python的所以呀,不要太担心啦,大家先好好看 ...
【Python游戏】用Python 和 Pyglet 编写一个我的世界小游戏 | 附源码
相关文件想学Python的小伙伴可以关注小编的公众号[Python日志] 有很多的资源可以白嫖的哈,不定时会更新一下Python的小知识的哈!! 需要源码的小伙伴可以在公众号回复我的世界 Pytho ...
【博主推荐】html好看的拼图小游戏(附源码)
拼图目录 html好看的拼图小游戏 1.拼图效果示意图 1.1 第一级九宫格拼图 1.2 第二级十六宫格拼图 1.3 第三级三十二宫格拼图 14 第三级八十一宫格拼图 2.图片切图说明 3.实 ...
一口气用Python写了13个小游戏 (附源码)
大家好,今天给大家分享13个游戏源码,可以自己复现玩玩,研究下里面的编程逻辑,对学习编程(特别是初学者)应该会有很大帮助. 由于文章较长,大家记得滑到文末点个赞哈- 1.吃金币源码分享: impor ...
【Python游戏】基于pygame实现的一个Dino Rush 恐龙宝贝冲冲冲的小游戏 | 附源码
前言 halo,包子们晚上好很久没有更新啦,主要是小编这边最近有点小忙今天给大家整一个Dino Rush 恐龙宝贝冲冲冲的小游戏还是一个比较记经典的小游戏,还记这可谷歌浏览器上没有网也能打发时间 ...
用C语言easyx库来写一个简单的翻翻乐小游戏(附源码素材)
简明目录写在前面 easyx库准备工作新建项目文件分析素材分析上代码吧地图表示开始界面地图初始化(打乱) 游戏过程实现主函数的实现测试优化 1.游戏分数 2.游戏时间 3.nu ...
分享Python开发的13个小游戏(附源码)
导语哈喽哈喽~铁汁萌!愉快的周末到了天气也变好了不知道大家有没有出去玩吖!小编这几天太累了周末就宅在家里啦

html实现扫雷小游戏(附源码)