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

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

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

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

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

没错,全程左键操作。

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

至于游戏本身呢,就是一个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)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • Allure 安装

    Allure 安装 一、命令行安装:1、Linux:sudoapt-add-repositoryppa:qameta/alluresudoapt-getupdatesudoapt-getinstallallure2、MacOSX:brewinstallallure3、Windows下先安装Scoop,再运行以下命令:scoopinstallallure…

    2022年7月26日
  • PHP实现伪静态方法汇总

    PHP实现伪静态方法汇总

    2021年9月18日
  • Mysql备份——mysqldump

    Mysql备份——mysqldumpMysql备份——mysqldumpMysqldump备份流程一.mysqldump命令备份数据二.mysqldump常用操作示例三.还原MySQL备份内容Mysqldump备份流程mysqldump备份出的文件就是sql文件,其核心就是对每个表执行select,然后转化成相应的insert语句。mysqldump的备份流程大致如下:对某个库下所有表加读锁;循环备份备份表数据;释放读锁;循环上面三个步骤;备份完毕。一.mysqldump命令备份数据在MySQ

    2022年6月17日
  • 深度学习笔记(三):激活函数和损失函数

    深度学习笔记(三):激活函数和损失函数这一部分来探讨下激活函数和损失函数。在之前的logistic和神经网络中,激活函数是sigmoid,损失函数是平方函数。但是这并不是固定的。事实上,这两部分都有很多其他不错的选项,下面来一一讨论3.激活函数和损失函数3.1激活函数关于激活函数,首先要搞清楚的问题是,激活函数是什么,有什么用?不用激活函数可不可以?答案是不可以。激活函数的主要作用是提供网络的非线性建模能力。如果没有激活函数,那么

    2022年7月14日
  • matlab aic sic,请教ADF检验时AIC准则和SIC准则不一致时怎么办?

    matlab aic sic,请教ADF检验时AIC准则和SIC准则不一致时怎么办?SIC最小准则下的检验结果如下,显示不能拒绝原假设,即数据有单位根。NullHypothesis:LAUShasaunitrootExogenous:Constant,LinearTrendLagLength:2(AutomaticbasedonSIC,MAXLAG=11)t-StatisticProb.*AugmentedDickey-Fullertes…

    2022年5月10日
  • 04 _ 可扩展架构案例(一):电商平台架构是如何演变的?[通俗易懂]

    04 _ 可扩展架构案例(一):电商平台架构是如何演变的?[通俗易懂]本章,我就针对最近十几年电商平台的架构变化过程,来具体说明下,为了支持业务的快速发展,架构是如何一步步演进的。从2003年淘宝上线开始,国内电商平台经历了高速的发展,在这个过程中,系统遇到了很多的挑战,比如说:如何针对当前的业务现状,选择合适的架构呢?如何在业务发展过程中,升级改造架构,并保证系统的平滑过渡呢?接下来,我会结合自己的工作实践,和你一起探讨架构的演变历程,你可以从中了解到各种架构的优劣点和适用性,然后在实际工作中选择合适的架构。这里,我总结了国内电商平台架构发展的大致过程,你可以结合图片

    2022年6月16日

发表回复

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

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