纯HTML5制作围绕猫的神经游戏-带源代码下载

《猫游戏中的HTML5环绕神经》网页版是一款基于HTML5、jquery、Typescript等技术的《猫游戏中的神经》。

首先附上演示和源代码下载给大家，点击这里查看演示下载源代码

去年微信朋友圈流行的游戏《猫里环绕神经》，我也尝试过。游戏是用白鹭引擎开发的，因为白鹭是用Typescript语言构建的，所以这里的游戏也是用Typescript开发的。

游戏规则：

点击屏幕上的灰色网格，慢慢包围猫的神经并抓住它。如果猫到达游戏区域的边缘，游戏就会失败。

准备材料

在网上搜索游戏《猫里环绕神经》，打开一个，打开调试界面，从网络或资源上扒下猫、灰圈、橙圈等图片，保存在本地。

需要注意的是，白鹭新的MovieCilp架构设计和movie数据格式标准与早期有些不同，我是从网上扒下来的，已经不适用了。mc按照新的数据格式标准修改后的json文件如下：

{ ' MC ' : { ' stay ' : { ' frame rate ' :20，' labels':[]，' frames ' :[{ ' RES ' : ' stay 0000 '，' x':0，' y':0}，{'res':'stay0001 '，' x':0，' y ' 3:0 }，{ ' RES ' 33600 '

本文主要总结了我在开发过程中遇到的两个主要问题。

问题一，猫怎么逃？

在这个游戏中，每个圆圈可能有三种状态

可通过，用灰色圆圈表示

有路障，这是不可行的，由橙色圆圈表示

被猫占据，灰色圆圈，猫的动画叠加在上面

每当点击一个灰色的圆圈，就会变成橙色的圆圈，也就是路障状态。同时，猫会跟着咔嚓一声，向外围迈一步。

行走方向

游戏区域由9*9个圆圈组成，偶数行缩进圆圈半径的宽度。这种布局的结果是，猫理论上可以朝六个方向行走(一次只能走一步)，分别是左、左上、右上、右、右下和左下。如果这些位置的圆圈是路障，相应的方向是无法通过的。

如果这六个方向的五个邻居都是路障，选择路线很容易，剩下的就是唯一的出路，但显然不可能那么简单。更多的时候，六个方向的邻居中，有的直接处于路障状态(自然，这一步肯定没走)，有的处于可通行状态，但他们对边缘的可达性不同。

比如上图，目前猫咪向左走三步，向右上方和右下方走四步，向左上方和右上方走一步，但遇到路障，向左下方走三步就可以到达边缘。这个时候，当然要优先考虑这六个方向。

优先

我这样设置优先顺序：

一路的方向会有路障，比如这个图中的左、右、右、左、右、左

在一路经过的方向上，越靠近边缘，优先级越高，如图，左右，上下

在路障出现的方向，你能走的步数越多，优先级越高，如下图左、右、左所示

这些约定的可及性将通过用于比较的数值来表示。让该值为可访问性，该值越高，优先级越高。

一路经过的方向

可访问性=1/stepToEdge；///stepToEdge表示离边缘还有几步

哪里会有路障

可访问性=(-1)/stepToBlock；///stepToBlock表示离路障的距离

接下来，考虑一下如果分母为0该怎么办。第一种情况，分母为0，说明猫已经处于边缘，不需要判断优先级，游戏已经失败。第二种情况，如果分母是0，说明你出门的时候会遇到路障。如果不考虑这个方向，永远通不过，所以它的优先级是-1。

在这一轮中，六个方向的可访问性值为：

左：1/3

左上角：-1

右上角：1/4

右：-1

右下：1/4

左下：-1/3

相比之下，优先级应该是左、右、左、右、左、左、左、右。

为什么左上方和右上方，右上方和右下方的数值明显相同，我们还是出了问题？只是因为我们的计算从左边开始顺时针旋转。如果值相同，则取决于它们出现的顺序。

所以在上图的这种情况下，猫会向左走一步。

问题2，如何判断猫被包围了？

在网上玩这个游戏的时候，我发现当猫咪被包围的时候，会变成一个“包围”的动作。那么如何判断猫咪被包围了然后改变它的动作动画呢？

“被包围”不同于“被抓”，比“被抓”更早。当猫无路可走时，它被“抓住”了，游戏就赢了。“被包围”的意思是猫暂时有路可走，但是被包围了，奄奄一息，如下图所示。

我的思路是这样的：

从猫咪现在的位置，找到可以六个方向通过的邻居，然后从这些邻居开始，然后找到自己的邻居，一直这样看下去。一边看，一边判断目前已经找到的邻居有没有在游戏区边缘。如果是这样，那么搜索过程就会提前结束，结果就是猫没有被包围。如果找到所有可接近的邻居，没有一个在游戏区边缘，那么判断结果就是猫被包围了。接下来，这个判断过程由代码实现。

首先，我们需要准备一个判断圆是否在圆的边缘的方法。假设这个方法的名字和参数如下，内部实现比较简单，这里就不贴了。

/*判断传入圆是否在边界上*/private iscircletedge(圆：圆): boolean {.}并准备一个方法让邻居在某个方向绕一个圈。

二等兵getcircleneihbor(圆：圆，方向：方向):圆{.}最后，是判断的核心方法。

/*你能找到从圆位置到边缘的路线吗*/Private Canexitat(圆：圆): Boolean { var ignore arr=[]；//circle设置var to ealtwithrr=[circle]不需要再次处理；//circle set while(true){ if(to dealwitharr . length 1){ return false；} else { var _ first=todailwitharr . shift()；ignore err . push(_ first)；if(_first.getStatus()！==CircleStatus。blocked this . iscircleatedge(_ first)){返回true}else{ for(var i=Direction)。左；I=方向。底部_左侧；I){ var NBR=this . getcircleneighbor(_ first，I)；if(！(ignorerer . indexof(NBR)-1 | | todalwitharr . indexof(NBR)-1))if(NBR . getstatus()！==CircleStatus。可用){ ignore err . push(NBR)；} else { todealwitharr . push(NBR)；} } } } } } }在方法体的开头准备了两个数组，一个用于存储不再需要处理的圆集ignoreArr，另一个用于存储需要判断的圆集toDealWithArr。每次找到一个过得去的邻居，首先要判断它是否第一次出现(因为几个圆可能有共同的邻居，所以一个圆可能因为是多个圆的邻居而被多次发现)。判断的标准是它是出现在ignoreArr还是Todelalwithharr。如果没有，那是第一次。如果它是一个路障，把它插到ignoreArr。如果它不是一个路障，就把它推到托德怀斯哈的尾巴上，然后等待。

在每个循环的开始，我们会从toDealWithArr的头上弹出一个圆形的对象来判断它是否在边缘。如果是这样的话，我们就会真的跳出这个循环，而猫不会被包围。它可以通过一定的路线到达边缘。如果判断后toDealWithArr不在边缘，则返回false，猫被包围，它的直接邻居和许多间接邻居都不在边缘。