原生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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 点击按钮,回到页面顶部的5种写法

    点击按钮,回到页面顶部的5种写法1.锚点方式:2.scrollTop:scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素

    2022年7月3日
    35
  • mac用什么软件录屏_macbookair录屏快捷键

    mac用什么软件录屏_macbookair录屏快捷键录屏软件哪个好?你是否遇到过需要记录手机或者电脑屏幕的时候,就像是打着游戏、看着剧,突然想要记录此时屏幕上的内容。其实很多的场景都可以使用录屏软件来记录屏幕上的内容,像是工作、学习、娱乐上的内容。那有什么好用的录屏软件和方法,一起来看看下面有关的方法介绍!分享录屏软件一、手机专业录制软件如果你在手机上查看视频的话,除了使用手机中的屏幕录制方法。还可以使用专业的录屏软件。如借助手机中的“嗨格式录屏大…

    2025年11月25日
    3
  • ROC曲线及AUC值[通俗易懂]

    ROC曲线及AUC值[通俗易懂]ROC曲线参考文献:【ROC曲线与AUC值】1.介绍及引入ROC的全名叫做ReceiverOperatingCharacteristic,其主要分析工具是一个画在二维平面上的曲线——ROCcurve。平面的横坐标是falsepositiverate(FPR),即假阳性率(1−Sp1-Sp1−Sp);纵坐标是truepositiverate(TPR),即真阳性率(SnSnSn)。对某个分类器而言,我们可以根据其在测试样本上的表现得到一个TPR和FPR点对。这样,此分类器就可以映射成

    2022年5月16日
    60
  • JavaWeb-过滤器Filter学习(四)敏感词过滤实例

    JavaWeb-过滤器Filter学习(四)敏感词过滤实例通过Filter来实现留言板的敏感词过滤…思路很简单,我们这里的敏感词是直接先放进去的,实际项目中,肯定是存在数据库中。在Filter过滤器中,我们先拿到用户提交的留言,如果出现了敏感词,我们就用*号来替换。代码演示:index.jsp:<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%><%@taglibur

    2022年5月27日
    35
  • 如何查看python源码_python判断路径是否存在

    如何查看python源码_python判断路径是否存在1.潜在误区2.本质原因及正确查看方法3.总结今天有个新来的实习生让我帮他看个问题,他想通过找到python源码位置来学习官方源码,但是却不幸报错。他想查看的是collections模块中Counter类所处的文件路径,直接使用代码却出现错误AttributeError:typeobject’Counter’hasnoattribute’__file__’。在我的谆谆教导下,不仅帮助他解决了问题,而且通过发现本质更加深入的理解了几个核心概念。

    2022年8月23日
    11
  • 浅析Nginx与Apache的区别[通俗易懂]

    浅析Nginx与Apache的区别[通俗易懂]Nginx:1.轻量级,采用C进行编写,同样的web服务,会占用更少的内存及资源2.抗并发,nginx以epollandkqueue作为开发模型,处理请求是异步非阻塞的,多个连接对应一个进程,负载能力比apache高很多,而apache则是同步多进程模型,只能一个连接对应一个进程,当压力过大时,它是会被阻塞型的。在高并发下nginx能保持低资源低消耗高性能,而apache在PHP处…

    2022年6月11日
    40

发表回复

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

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