成语json_cocos creator实战(2)成语小秀才ts版

最新推荐文章于 2020-12-13 21:37:12 发布

weixin_39631572

最新推荐文章于 2020-12-13 21:37:12 发布

阅读量845

点赞数 1

文章标签：成语json

本文链接：https://blog.csdn.net/weixin_39631572/article/details/111323515

版权

本文详细介绍了如何使用Cocos Creator 2.3.2和TypeScript开发一款类似成语小秀才的游戏，包括游戏逻辑、界面设计、代码结构和关卡数据的处理。难点在于生成随机关卡算法，目前采用本地JSON数据，实际应用中可能需要服务端支持。游戏界面分为关卡信息、成语区和选词区，通过触摸事件和逻辑判断实现填词和过关效果。

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

1 分析

公司要求做h5小游戏之前，想要做的一款类似成语小秀才的小游戏。学了一段时间ccc后回头填坑，尝试仿制一波，刚好发现论坛有套开源的ui素材。花了两天做的demo。做完后发现最难的是生成随机关卡，由于益智类小游戏动辄几百上千关，编写较高质量的关卡随机算法还是很有难度的。

玩法：每个成语最多空缺两个位置，选择对应的词填入成语中，全对即可过关。

界面分三部分，顶部关卡信息、成语区、选词区。

成语区实际上是9*9的布局，共81的格子，只显示了有词的格子，开启调试模式可以显示所有的格子。
选词区显示成语中空缺的词

2 代码结构

2.1 关卡数据结构

正式上线的话，需要开发服务端用于返回关卡数据和保存用户信息。客户端通过http请求获取关卡数据，同时可以上传分数等信息。demo中没有用到服务端，直接本地挂载关卡数据，关卡数据保存在json文件中。

id    ---> 成语id，对应成语库中的成语
grids ---> 保存成语中四个字的位置
           id ---> 所处的格子位置
           space ---> 该字是否为空缺
{
     
    "id": 4959,
    "grids": [
        {
     
            "id": 18,
            "space": false
        },
        {
     
            "id": 27,
            "space": true
        },
        {
     
            "id": 36,
            "space": false
        },
        {
     
            "id": 45,
            "space": true
        }
    ]
}

2.2 词条数据对象

用一个类来描述成语词条的基本数据，它对应词库中的一条成语。

// IdiomData.ts
export class IdiomData {
     
    public id: number = 0;          // 词条id
    public chars: string = null;    // 完整成语，例如"一马当先"
    public pinyin: string = null;   // 词条拼音
    public note: string = null;     // 词条出处和释义
}

2.3 词条对象

用一个类来描述关卡中出现的每一条成语对象。

记录占用的格子
保存词条数据对象

// Idiom.ts
export class Idiom {
     
    public grids = [];      // 记录占用的格子
    public data = null;     // 词条数据
    public constructor(grids, idiomdataObj) {
     
        this.data = idiomdataObj;
        for (let i = 0; i             this.grids.push(grids[i]);
        }
    }
}

2.4 格子对象

用一个类来描述每个格子的状态和行为。

记录格子id
该格子使用状态
保存完整的成语数据
格子上需要填写的字符
保存被哪些词条对象使用
格子是否为空缺状态
格子填词是否成功，用来判断填词是否成功
当前格子上的词id

// Grid.ts
    public gridId: number = 0;                  // 格子id
    public isUsed: boolean = false;             // 是否是被使用的格子
    public data: string = null;                 // 完整的成语
    public char: string = "";                   // 使用的成语字符࿰