用webgl打造自己的3D迷宫游戏

518 查看

背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路的小游戏,可以消(bao)遣(fu)时(she)间(hui)

没有使用threejs,就连glMatrix也没有用,纯原生webgl干,写起来还是挺累的,不过代码结构还是挺清晰的,注释也挺全的,点开全文开始迷宫之旅~

毕竟要赚一点PV,所以开头没有贴地址,现在贴地址:

github:https://github.com/westAnHui/3Dmaze

在线试玩:https://westanhui.github.io/3Dmaze/3Dmaze2.html

游戏操作:鼠标控制方向,w前进,s后退,切记方向键没用啊!

迷宫本身的比较简陋,没加光和阴影啥的,挺赶的一个demo。不过这篇文章不是介绍webgl技术为主的,主要是讲解整个游戏开发的情况,let’s go~

 

1、生成2D迷宫

迷宫游戏嘛,肯定迷宫是主体。大家可以从游戏中看到,我们的迷宫分为2D迷宫和3D迷宫,首先说2D迷宫,它是3D迷宫的前提

生成迷宫有三种方式

a)深度优先

一言不合贴源码:https://github.com/westAnHui/3Dmaze/blob/master/maze1.html

先看一下用深度优先法生成迷宫的图吧

13-300x227

我们看下迷宫的特点,发现有一条很明显的主路,是不是能理解算法名中“深度优先”的含义了。简单介绍一下算法的原理:

22-300x173

知道了原理,我们着手来制造2D迷宫~

首先得确定墙和路的关系,考虑到迷宫转化为3D之后墙立体一点,我们就不要用1px的线来模拟墙了,那样3D之后不够饱满~

这里我们设置墙的厚度为路的宽度,都是10px,然后我们的底图应该是这样子的(注:理解这幅图最为关键):

32

白色部分是路,也可以理解为原理中所说的邻格,这是可以达到的

灰色部分是墙,这个墙可能会打通,也可能没有打通

黑色部分是墙,这个墙是不可能打通的!!

如果脑子没转过来就看下图,转化理解

42

红线就是玩家的路径啦,其中我们看到穿过了三个黑色的矩形,这就是上面所说的灰色格,可能打通,也可能没打通,蓝色那块就是没打通的情况;而黑色部分正对应上面的黑色格,这是不可能打通的,如果把墙看成一个面(灰色蓝色部分再压缩),黑色就变成一个点,是横墙与竖墙的交点,玩家不会走交点上面走的~

好,下面就是套算法的过程啦,写的过程中我把墙的部分给省略了,全部考虑成路

以宽度来解释,Canvas宽度390px,有18列的路(20列的墙暂时被我无视),不理解的可以对照图看一下

initNeighbor方法是获得邻格用的,注意最后有一个随机,将它的邻格打乱,这样我们在getNeighbor 中获取邻格就很方便了

这里比较核心,注释给的也比较全,结合前面的原理图应该很好懂

再看下maze里面的findPath方法,在这里面调用的getNeighbor方法

可以看到parent和children属性是不是本能的就反应起树的概念了,那不就是深度的思想么~

核心的代码讲解了,其他的画图部分就不介绍了,在drawPath方法里面,原理就是先画一个节点(一个格子),然后它的children格和它打通(前面图中灰色格子转为白色),再去画children格……

注:开头给的试玩demo用的不是深度优先算法,下面这个是深度优先生成的迷宫游戏,可以感受一下,这样与开头的有一个对比

https://westanhui.github.io/3Dmaze/3Dmaze1.html

b)广度优先(prim随机)

一言不合贴源码:https://github.com/westAnHui/3Dmaze/blob/master/maze2.html

再看一下广度优先生成的迷宫图~可以和上面的对比一下

16-300x225

前面说的深度优先算法挺好理解的,人类语言表达出来就是“一直走,能走多远走多远,发现不通了,死路了,再回去想想办法”。

但是,用深度优先算法在迷宫游戏中有很致命的一个缺点,就是简单,那条明显的主路让玩家不看2D地图都能轻松的绕出来(路痴退散),这明显不符合开头所说的消(bao)遣(fu)时(she)间(hui)的主题,那么正主来啦~

prim(普里姆)算法是传统迷宫游戏的标准算法,岔路多,复杂。我觉得有广度优先的思想,所有自己也称广度优先算法,正好和上一个对应上。贴原理图~

52-280x300

人类语言表达出来就是“随机的方式将地图上的墙尽可能打通”,还记得这个底图么,照着这个底图我解释一下

62

选择1为起点,并标记。1的邻墙有2,3,放入数组中。

此时数组[2, 3],随机选择一个,比如我们选到了2,2的对面格是4,此时4没有被标记过,打通2(将2由灰变成白色),并将4标记,并把5,6放入数组

此时数组[2, 3, 5, 6],继续随机……

结合一下源码,发现这次写法和上次的完全不同了,在深度优先中我们直接没考虑墙的存在,主体是路(白色的格子),将他们变成树的结构即可,在后面绘制部分再会考虑墙的位置

而在广度优先中,我认为主体是墙(灰色的格子),所以算法中一定要把墙的概念带上,在initNeighbor方法中路(白色格)的邻格已经是+2而不是之前的+1了,因为+1是墙(灰色格)

再看重要的getNeighbor方法