纯HTML5制作的一个猫源下载游戏

纯HTML5制作的一个猫源下载游戏
HTML5将猫网页游戏是一个游戏,是基于HTML5、jQuery、Typescript等。

首先给你一个演示和源代码下载,点击这里查看演示下载源码。

去年,微信朋友圈在猫的游戏,我想做一点。游戏是白鹭引擎开发的,因为白鹭是建立在记录语言,所以这里的游戏也开发了Typescript。

游戏规则:

点击屏幕上的灰色网格,慢慢地包围猫。如果猫到达游戏区域的边缘,游戏就失败了。

准备材料

搜索互联网,搜索周围紧张的猫游戏。打开一个并打开调试接口。从网络或资源中删除猫、灰色圆圈、橙色圆圈和其他图片的图片,并保存到本地区域。

应该指出的是,白鹭的新moviecilp架构设计和影片剪辑的标准数据格式不同于以前的。我还没能从网上找到。根据新的数据格式标准,修改后的MC的JSON文件如下所示:
{MC:{
保持:{
帧率:20,
标签:{ },
帧:{
{分辨率:stay0000
{分辨率:stay0001
{分辨率:stay0002
{分辨率:stay0003
{分辨率:stay0004
{分辨率:stay0005
{分辨率:stay0006
{分辨率:stay0007
{分辨率:stay0008
{分辨率:stay0009
{分辨率:stay0010
{分辨率:stay0011
{分辨率:stay0012
{分辨率:stay0013
{分辨率:stay0014
{分辨率:stay0015
}
} },
:{
stay0000 :{X):0、Y:0、W:61,H:93 },
stay0001 :{X):61、Y:0、W:61,H:93 },
stay0002 :{X):122、Y:0、W:61,H:93 },
stay0003 :{X):183、Y:0、W:61,H:93 },
stay0004 :{X):0、Y:93、W:61,H:93 },
stay0005 :{X):61、Y:93、W:61,H:93 },
stay0006 :{X):122、Y:93、W:61,H:93 },
stay0007 :{X):183、Y:93、W:61,H:93 },
stay0008 :{X):0、Y:186、W:61,H:93 },
stay0009 :{X):61、Y:186、W:61,H:93 },
stay0010 :{X):122、Y:186、W:61,H:93 },
stay0011 :{X):183、Y:186、W:61,H:93 },
stay0012 :{X):0、Y:279、W:61,H:93 },
stay0013 :{X):61、Y:279、W:61,H:93 },
stay0014 :{X):122、Y:279、W:61,H:93 },
stay0015 :{X):183、Y:279、W:61,H:93 }
} }
写代码

我在开发过程中遇到的两个问题的主要摘要。

问题一,猫是怎样逃跑的

在这个游戏中,每个圆圈可能有三个状态。

尚可,灰色圆圈表示法

有一道路障,行不通,橙色圆圈

被猫占据,一个灰色圆圈,和猫的动画叠加在上面。

每次你点击灰色圆圈,它就会变成一个橙色圆圈,街垒,猫会跟着点击的动作。

行走的方向

该游戏由9×9个圆,半径的圆线,甚至宽度,所以布局的结果,猫理论可以有6个方向(只步),分别,左,左,右,右,右,左,如圆圈的位置是街垒状态,相应的方向是不合格的。

如果六个方向中有五个是路障,当然,选择路线是很好的。剩下的是唯一的出路,但是很明显,情况不可能这么简单,我们遇到的更多。在六个方向的邻居,有一个国家的直接路障(自然不采取这一步)。这是可以接受的,但彼此之间的可及性是不同的。
例如,在上面的图片中,目前,猫的左方向可以通过三个步骤达到的边缘,和四个步骤,可以实现在顶部,右侧和底部,和左、右方向迈出一步,但道路障碍会遇到,和左下国家将采取三个步骤来满足路障。当然,我们应该在这个时候这六个方向的优先顺序。

优先

我以这种方式设定优先顺序:

道路交通方向>会出现路障方向,所以左、右、右、右、左>左

在道路交通的方向上,从边缘靠近更高的优先权,所以左右两侧的右下方>

在步骤号的方向上会有路障,可以采取更高的优先级,所以左下角>左上左右

比较这些约定的可访问性,其值是可访问性,且值越高,优先级越高。

道路的方向

可访问性= 1 / / / steptoedge;steptoedge表明几步之遥的边缘
将有一个路障的方向

Accessibility = (-1) /stepToBlock; //stepToBlock represents the distance from the roadblock

接下来,考虑分母是否为0。做这件事最好的方法是什么在第一种情况下,分母为0。这意味着猫已经在边缘,所以它不需要判断优先级。游戏失败了。在第二种情况下,分母为路障的0。这个方向不需要考虑,它的优先级是- 1。

这样,六个方向的可访问性值是:

左:1 3
左上角:- 1
右上角:1 4
权利:- 1
右下角:1 4
左下角:- 1 3
优先级应该是左>右>右>下到右>左>左>右。

为什么我们仍然处于左、右、右上、右两个组的顺序呢因为我们从左方向计算顺时针旋转。如果值相同,看看外观的顺序。
所以在这种情况下,猫会走一步。

问题二,你如何判断这只猫被包围了
当我在网上玩这个游戏时,我发现当一只猫被包围时,它会变成一个封闭的动作。我们如何告诉猫被包围和改变它的动画
被包围与被捕获不一样。它比被抓的状态早,当猫无路可走的时候,它会被抓住,游戏获胜。
我的想法是:

从猫的当前位置为六个方向可以通过邻居,然后从邻居,找到自己差强人意的邻居,始终低着头,在寻找的过程中,虽然没有判断被发现在当前周边地区对游戏的边缘,如果有,那么期待结束结果判断:这只猫不是包围。如果发现所有通行的邻居和他们没有在比赛区的边缘,结果,猫被包围。

接下来,这个过程是用代码实现的。
首先,我们需要准备一个方法来决定圆是否在圆的边缘。假设该方法的名称和参数如下所示。内部实现相对简单,所以不会在这里粘贴。
*
确定传入的圆是否在边界上。
* /
私人iscircleatedge(圆:圆):布尔{

}

找到一个方法让邻居在一个圆圈的方向上。
私人getcircleneighbor(圆:圆,方向:方向):圆{

}
最后,它是判断的核心方法。

*
你能在圆的位置找到通往路线边缘的路线吗
* /
私人canexitat(圆:圆):布尔{
无功ignorearr = {}; / /不必处理循环采集
无功todealwitharr = {圆}; / /判断循环采集的需要
当(真){
如果(todealwitharr。长度<1){
返回false;
其他{ }
无功_first = todealwitharr.shift();
IgnoreArr.push(_first);
如果(_first.getstatus()!= = circlestatus.blockedthis.iscircleatedge(_first)){
返回true;
其他{ }
对于(var i = direction.left;我< = direction.bottom_left;i++){
VaR NBR = this.getcircleneighbor(_first,我);
如果(!(ignorearr.indexof(NBR)> 1 | | todealwitharr.indexof(NBR)> 1))
如果(nbr.getstatus()!= = circlestatus。可用){
IgnoreArr.push(NBR);
其他{ }
ToDealWithArr.push(NBR);
}
}
}
}
}
}
在方法体的开始,两个阵列的制备,一个用于存储界集ignorearr不重新处理,和其他存储界todealwitharr需要进一步判断。每找到一个过得去的邻居,我们必须首先确定它是不是第一次(因为几圈可能有共同的邻居这么一圈,可能是因为它是一个圆的邻居发现多次),判断标准是它有没有出现在ignorearr或todealwitharr,如果没有这是第一次,如果就这样塞进路障,ignorearr,如果不是那么成路障,todealwitharr尾等待判决。

在每个周期的开始,我们将圈一圈对象从todealwitharr头,判断它是否是在边缘或不。如果是,则返回true以跳出圈外,那只猫是不是包围,它能通过一定的途径到达边缘。如果todealwitharr并不都是在判断的边缘,然后返回false,而猫包围。没有直接邻居和许多间接邻居在边缘。

tag:下载游戏电脑软件

相关内容