[Egret] 对对碰H5小游戏

最新推荐文章于 2021-08-29 14:01:55 发布

libins

最新推荐文章于 2021-08-29 14:01:55 发布

阅读量2.6k

点赞数

分类专栏： egret

本文链接：https://blog.csdn.net/libins/article/details/60136530

版权

本文介绍了使用Egret框架开发对对碰H5小游戏的过程，主要包括UI界面设计、程序结构搭建和核心代码实现。游戏结构简单，主要由Card和Main、StartGame类组成。在代码部分，重点讲解了如何初始化卡片布局和实现连连看的匹配算法，包括直线、一个拐点和两个拐点的连线规则。文章适合初学者和教学使用。

摘要由CSDN通过智能技术生成

游戏界面大致是这样（很丑，但是有内涵）：

【第一步：UI界面】

【第二步：程序结构】

这个结构相对上一篇贪吃蛇更简单，因为没有控制UI层了

Card：就是每个图片框

Main：是程序的主入口，资源配置和游戏的启动

StartGame:是游戏的入口，里面包含了连连看的一些连线算法，因为是年前给同事做的简单教材，所以就没有细分程序逻辑了

【第三步：部分代码】

Main.ts 这个类，上一篇文章有简单介绍，基本是程序自动生成默认的，就多了一个StartGame的引入

private createGameScene():void{  
        this.addChild(new StartGame());  
}

StartGame.ts

这个是连连看的主类，也简单，里面就2个关键点需要注意

（1）因为连连看，是以一对对应类型的卡片而存在的，所以生成的时候，就要注意，就1个类型有2个卡片这种关系形式而存在。

（2）就是连连看的算法，玩过类似游戏的就明白，卡片可以消亡，有几种连线方式：

一：直线连线，即没有一个拐点

二：只有一个拐点的连线

三：最多只有2个拐点的连线

明白上述的关键因素之后，我们就对（1）（2）两个关键点的代码分析了：

（1）初始化卡片的代码

private createCard():void{
        var total:number = this.cardXNum*this.cardYNum;

        var addTimes:number = total*.5;
        this.cardArr        = new eui.ArrayCol