SVG + Javascript 实现的五边形的扫雷游戏

原创 2013年10月22日 09:43:20

国庆期间,写了个SVG + Javascript 实现的五边形的扫雷游戏,在QQ群和微博公布了一下,一直懒得写到blog上面来,现在补上来。

这个是10月5号晚上写的,在QQ群发出来之后,根据朋友们的体验,以及自己的想法,后面几天又陆续修了一些bug,增加了一些功能。

没有截图的,都是耍流氓!

所以我先发个图,现在看起来是这样子:



有兴趣的可以戳开这里玩一玩:SVG + Javascript 实现的五边形的扫雷游戏

(有朋友说要翻墙才能打开,我这里倒是不用翻墙都能打开。打不开的话,试试这个:网址(2)


五边形的扫雷你可能没有玩过吧,推理难度降低了,但是没有方块扫雷那么直观,挑战一下头脑吧。


和一般JS版的扫雷游戏相比,我这个扫雷游戏的特点:

  1. 这个扫雷游戏的每个格子都是五边形的。几何方面来讲,五边形是不能全等密铺的,这与六边形、四边形、三角形不同。
  2. 图形采用SVG来显示,带来的好处很多,处理任意形状的点击区域很方便,可以任意缩放还保持清晰,自动满窗显示,不需要图片文件了,红旗和地雷都是svg代码实现的。
  3. 地雷的生成放在了第一次点击之后,这样做的好处是避免了第一次就点击到雷的情况。
  4. 第一次点击,保证不触雷且一定会挖开一片区域,这样做避免了开始就要猜的情形。Win7的扫雷也是这样的,但XP的扫雷不是。
  5. 显示剩余要挖开的格子数!扫雷是否完成,主要是看这个数是否到0的,大部分js扫雷游戏的判胜逻辑是错的。
  6. 支持双键/双击翻雷,这个也提一下,虽然我扫雷很少用这个功能。
  7. 非递归实现。好处是可以高效处理更大局面而不会使浏览器卡死。
  8. 扫雷失败(触雷)后,显示答案。触雷的格子、所有不是雷但标了雷的、是雷而没有标雷的,都会区别显示出来。其实是很基本的功能。

没有标记可疑格子的功能,实在觉得这个不需要。

其它没有的功能,因为忙,因为懒。


关于程序的实现,也简介一下。

因为是五边形,就是上面图片那个形状,和经典的方块表格有很大的不同,导致了编程和数据结构都要比经典扫雷复杂一些。

因为全等五边形不能密铺平面,而六边形可以,所以我采用了将一个六边形切分为四个五边形,再由多个六边形构成整个局面。

扫雷游戏关键的一环是求一个格子的所有相邻格子,这四个五边形的相邻情况都不一样,需要区别对待,有别于经典扫雷。

数据结构采用了三维object的形式,每个格子的位置用3个量来表示,对这3个量进行加减,就能得到周围格子的度量。经典方格扫雷或者是六边形扫雷都是只需要行和列2个量的。

对于第一次点击保证不触雷且挖开一片的处理:点击后,生成随机的雷,对点击的格子以及相邻的几个格子进行判断,如果有雷,则随机交换到其它不是雷的格子去。


HTML5游戏开发 QQ群 216313608 欢迎互相交流


补充说明(2013/11/29):

看这个图:

红圈里的数字3,有好几位朋友认为这个是bug,觉得只剩下A和C是和它相邻边了,呵呵,这个真心不是bug啊。扫雷游戏的数字从来都不是按边算的,都是按照有共用顶点就算相邻的,还记得经典方格扫雷不,矩形是4个边,但数字最大到8,如果只算共边的话,最大数字只能到4。

对于上面的图,A,C和数字3的格子是共用2个顶点(1边),而B和数字3的格子是共用1个顶点,都算是“相邻”,所以这里的数字3没错!

不理解的朋友可以随便找个经典扫雷游戏体验一下,比如我很久以前写的一个扫雷游戏:JavaScript扫雷游戏,仿Windows扫雷


我的Javascript游戏合集

__

SVG图像绘制多边形

在线演示原始图为图一;鼠标滑过使SVG图形上移30px,如图二; html: Hello If you...pain. ...
  • erdouzhang
  • erdouzhang
  • 2017年05月10日 12:59
  • 830

SVG + Javascript 实现的五边形的扫雷游戏

扫雷游戏都玩过,五边形的扫雷你玩过么?国庆期间,写了个SVG + Javascript 实现的五边形的扫雷游戏,根据朋友们的体验,以及自己的想法,后面几天又陆续修了一些bug,增加了一些功能。推理难度...
  • cuixiping
  • cuixiping
  • 2013年10月22日 09:43
  • 4816

如何利用SVG应用到手机游戏开发 以及 SVG相关介绍

作者:chenjieb520(两片森林) 利用SVG应用到手机游戏开发 1、 利用SVG主要的好处就是,目前有SVG动画的编辑器,可以省去自己写动画编辑器的所花费的劳力。并且随着SVG...
  • chenjieb520
  • chenjieb520
  • 2012年03月03日 19:12
  • 4710

Web版 扫雷 JS实现

这几天中毒了,无比迷恋扫雷游戏(摔!明明是机房机器渣到只能玩扫雷),于是在上网络互联与路由课的时候,写了个Web版的扫雷游戏,起码能玩了,嘿嘿,晚上又增加了一些有趣的东东,还有个彩蛋。DEMO:htt...
  • Jesounao
  • Jesounao
  • 2016年05月26日 11:03
  • 2738

JS实现网页版扫雷游戏

楼主学网页设计不久,这是第一个稍微比较复杂的JS事件小游戏,我知道在算法上肯定会有许多冗余的地方,楼主正在努力奋斗修改中,望各位大神加以指正,第一次发博文,代码又没有优化就不多啰嗦了,代码里有一些注释...
  • Barret2016
  • Barret2016
  • 2016年02月02日 09:26
  • 2026

8个炫酷的HTML5动画、应用和游戏

随着Web技术的不断发展,呈现在我们眼前的Web页面不仅有着越来越丰富的网页元素,而且网页之间的交互也越来越炫酷了。很多开发者已经利用HTML5开发了不少HTML5动画、应用和游戏,本文也主要分享这些...
  • ccc20134
  • ccc20134
  • 2015年01月19日 14:57
  • 1054

《HTML5游戏开发实践指南》[PDF电子书]

  • 2013年03月29日 17:05
  • 5.83MB
  • 下载

扫雷小游戏的设计与实现

完成JAVA版扫雷的基本实现后,其实发现这并不难,做这个小游戏,也是希望自己能有一些收获,以及看看自己能做什么。到现阶段,暂且总结下自己的成果和心得。        代码还是有些繁琐,算法是完全自己设...
  • swallowing_
  • swallowing_
  • 2015年08月31日 11:31
  • 1001

JavaScript扫雷游戏,仿Windows扫雷

javascript版仿windows扫雷游戏,单个HTML文件。 CSDN下载:http://download.csdn.net/source/1513308 在线试玩:http://jsgame....
  • cuixiping
  • cuixiping
  • 2007年04月13日 17:39
  • 3745

三字棋小游戏

头文件模块:#define _CRT_SECURE_NO_WARNINGS 1 #include #include #include #ifndef __GAME_H__ #define _...
  • double_happiness
  • double_happiness
  • 2016年07月30日 02:09
  • 1061
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SVG + Javascript 实现的五边形的扫雷游戏
举报原因:
原因补充:

(最多只允许输入30个字)