原生JS 扫雷游戏 自动插旗子 自定义雷区大小 雷数可调

原生JS 扫雷游戏 自动插旗子 自定义雷区大小 雷数可调《扫雷》是Microsoft于1992年附带在Windows3.1操作系统中的单机游戏,它通过点击方格并以出现数字来判断附近雷的数量,将全部地雷做上标记即可胜利。最后在2015年7月发布的Windows10中移除了这个游戏。随机变换雷区颜色,以及其它CSS样式,动画效果全是CSS。点击网页上的元素触发游戏事件打开雷区。如果对于一个方格,其周围未打开的方格恰好全都有雷,那么这些雷将全部自动被标记为小红旗,而玩家只需要一直点击雷区直至雷区全被打开并胜利呈现YOUWIN~没错,全程左键操作。在地

大家好,又见面了,我是你们的朋友全栈君。

能随机背景颜色自动插旗子自定义雷区大小和难度的扫雷游戏

随机变换雷区颜色,以及其它CSS样式,动画效果全是CSS。点击网页上的元素触发游戏事件打开雷区。如果对于一个方格,其周围未打开的方格恰好全都有雷,那么这些雷将全部自动被标记为小红旗,而玩家只需要一直点击雷区直至雷区全被打开并胜利呈现YOU WIN~

没错,全程左键操作。

在地址栏中设置widthheightmines参数来调整游戏难度,这些参数分别对应雷区宽度、高度和难度。

至于游戏本身呢,就是一个HTML文件,浏览器要允许这些陌生的文件中的脚本执行,然后用浏览器打开文件就可以玩啦。正是因为这个因素,不光电脑,手机平板凡是有浏览器并能执行JS的设备都能让这个扫雷跑起来。


诶哟图丢了

游戏里那些彩色的数字们,并不是字,而是SVG图。整个文档中body也就一点点:

<body>
    <div class="screen">
        <div class="square">
            <div id="map">
            <!-- 没错,就这 -->
            </div>
        </div>
    </div>
    <div id="board"></div>
</body>

剩下全是CSS和脚本。启动之后就会往那个叫map的标签里插入一片雷区。

《扫雷》是Microsoft于1992年附带在 Windows 3.1 操作系统中的单机游戏,它通过点击方格并以出现数字来判断附近雷的数量,将全部地雷做上标记即可胜利。最后在2015年7月发布的Windows 10中移除了这个游戏。

但是注意,扫雷中的雷不是地雷。经典扫雷中一不小心点到雷的时候会显示一个黑色带刺球体,那是水雷。从百度上搜索一下地雷,地雷长得像一个圆饼而不是一个球。而水雷的形状虽然也不是一个球,但它至少从前是的,最早的水雷是一个球,扫雷扫的是水雷,而那些插着红旗的土堆也并不是什么土堆,而是露出海面的浮标。玩扫雷的时候想像扫雷艇开着声纳在海面上转来转去吧。

那么扫雷艇难道不应该直接把雷起走么⁉ ?

还是不要纠结这些了,下载代码?并打开它,开始打游戏吧。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132613.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 图像降噪算法——从BM3D到VBM4D

    图像降噪算法——从BM3D到VBM4D图像降噪算法——BM3D图像降噪算法——BM3D1.基本原理2.C++代码实现3.结论图像降噪算法——BM3DBM3D是目前非AI降噪算法中最优的算法之一,其降噪效果确实非常惊艳,网上的资料也相对较多,我觉得写得最好的一篇博客是通俗语言说BM3D,这个博主应该是个搞图像处理的大佬,对原理理解得比较深,这里我对BM3D进行一个简单总结,然后扒了一个C++实现对接口进行了修改,移植到我自己的工程里(因为实在是忙得没时间自己复现一遍)1.基本原理2.C++代码实现3.结论…

  • C语言中的所有运算符用法及总结[通俗易懂]

    C语言中的所有运算符用法及总结[通俗易懂]简单明了的讲解各种运算符的用法及实例

  • 支持外链的免费相册地址集合

    支持外链的免费相册地址集合国内的:1.http://www.yupoo.com稳定.相册初始空间是61M.以后每月新增加61M空间.空间大小不断累计.不用担心不够用的说~~~关键在于…这个不加它们的网站LOGO-.-单张最大可传2M的图.外链速度稳定.{偶在用…所以清楚-。-}现在已经支持批量上传以及客户端上传等模式啦~[3月的补充说明:因为YUPOO升级,但仍然提供外链地址.请点击"原图",然后图片上…

  • 罗技g933使用教程_罗技键盘如何连接电脑

    罗技g933使用教程_罗技键盘如何连接电脑罗技K380蓝牙键盘是罗技比较经典的一款外设产品,最近,罗技新推出了k380芍药白和茱萸粉两种新配色,让我们来一起看一下。其中粉色介于粉色和裸色之间,相比粉色增加了一丝灰色。极客之选本次拿到的是白色版本,颜色也非亮白,而是与粉色类似较柔和,两种颜色整体都非常素雅,因此也适合在各种场合使用。外观上,罗技K380延续了一贯的设计风格,圆润的边框设计配合圆形按键,整体看起来非常小巧精致,不同…

    2022年10月16日
  • Nginx+keepalived+tomcat实现tomcat高可用性负载均衡

    Nginx+keepalived+tomcat实现tomcat高可用性负载均衡

  • java字符串转换为json对象6_Json对象与Json字符串的转化、JSON字符串与Java对象的转换…

    java字符串转换为json对象6_Json对象与Json字符串的转化、JSON字符串与Java对象的转换…一.Json对象与Json字符串的转化1.jQuery插件支持的转换方式:$.parseJSON(jsonstr);//jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象2.浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器:JSON.stringify(obj)将JSON转为字符串。JSON.par…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号