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游戏合集

__

相关文章推荐

Git使用入门,使用原理解读及如何在GitLab、GitHub或者Stash上管理项目(一)

写这篇文章主要是出于一个个人认为比较普遍的现象,就是很多开发者虽然都在用Git管理的项目,但是大多数人都只是在“傻瓜式”地在用,而且经常不知道自己在干什么,究竟自己的项目发生了什么。 就我们公司现在...

CSS绝对定位中bottom参照点问题

原文链接:http://www.cnblogs.com/2050/archive/2013/04/11/3014901.html 绝对定位时关于bottom的参照点的一些问题 ...

SVG扫雷小游戏

  • 2012年11月15日 17:23
  • 9KB
  • 下载

扫雷游戏,html和javascript写的

扫雷 var table; var tableLen; var bombNum; function doOnload(){ table = document.getElemen...

用javascript写的扫雷游戏

  • 2013年08月31日 17:23
  • 4KB
  • 下载

扫雷游戏C语言模拟实现

头文件game.h #ifndef __ADD_H__ #define __ADD_H__ #include #include #include #include //9*9棋盘,周围多一圈方...

Java语言实现的扫雷游戏(一)

Java类库中提供了用于GUI的swing开发工具包,我们可以利用swing设计出一些简单的经典小游戏,如扫雷,推箱子,俄罗斯方块等.接下来我就简单分享一下用Java设计扫雷游戏的思路与过程.   ...

小游戏之扫雷的实现

扫雷程序的c语言实现和思路解析,可拓展。。。。
  • WRNGT
  • WRNGT
  • 2017年01月21日 14:15
  • 309

JS实现网页版扫雷游戏

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

用C实现的扫雷小游戏

菜鸟新手,希望各位大神多多指教
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SVG + Javascript 实现的五边形的扫雷游戏
举报原因:
原因补充:

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