原生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中移除了这个游戏。

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

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

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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Vb.net/VB 声明API功能父窗口功能[亲测有效]

    Vb.net/VB 声明API功能父窗口功能

    2021年12月17日
    43
  • python和java哪个更值得学_java和python

    python和java哪个更值得学_java和python从去年到现在IA人工智能热度一直都是上升,而且很多有经验的程序员也打出“2018年不学习Python还能学习哪种编程语言“的口号,可对于初学者来说,Python相对比较简单。Python的语法类似于伪

    2022年7月5日
    22
  • expdp时遇到ORA-31693&amp;ORA-02354&amp;ORA-01466

    expdp时遇到ORA-31693&amp;ORA-02354&amp;ORA-01466

    2022年1月21日
    99
  • 电商网站开发语言_电商平台架构图

    电商网站开发语言_电商平台架构图现在有这么一个需求1,一个电商平台要做多语言支持,主要就是商品要支持多种语言,也就是说,有一个商品id为100,默认显示简体中文,当我点击英文版的时候就显示该id为100的英文版本。所有的商品多种语言的商品id是不会变的,会变的只是显示的语言变了而已。不能分为多个网站来使用。只能是在一个域名下。3.数据库应该如何设计?求大神们给点思路,谢谢回复内容:现在有这么一个需求1,一个电商平台要做多语言支持…

    2022年9月27日
    3
  • hive sql语句和mysql用法区别存档

    hive sql语句和mysql用法区别存档写在前面以下功能版本:mysql版本:5.6.17hive版本:2.2.41、GROUP_CONCAT先看下面数据表test_group:(1)简单情况需求如下:写出一个sql语句,按照category分组,并把组内的name使用“;”分隔符连接。①mysql中SELECT category, GROUP_CONCAT(nameSEPARATOR&amp;amp;amp;amp;quot;;&amp;amp;amp;amp;quo

    2022年10月2日
    4
  • matlab interp1 pchip,matlab多项式插值interp1深入研究(1)「建议收藏」

    matlab interp1 pchip,matlab多项式插值interp1深入研究(1)「建议收藏」学习matlab不久,遇到了多项式插值interp1,在网上没有找到研究其插值方法的文章,在此,对其中插值方法做了一些研究,属于matlab范畴之外,但是无聊研究一下总的来说不会有坏处。interp1的具体运用也比较低,个人理解主要属于样本丢失,补充样本用,所以最后还介绍了傅里叶增值法。正文:首先介绍一个多项式插值函数:Y=interp1(x,y,X,’mothod’)本文主要讨论’mothod…

    2022年4月30日
    142

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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