微信小游戏实战--cocos creator实现wordle游戏（五）

到目前为止我们已经实现了整个游戏的界面以及“空格”和键盘按钮的动画，接下来完成游戏的基础玩法流程。

完整代码

一、初始化游戏

由于在游戏中“空格”的背景和Label会有相应的变化。所以在游戏开始前需要进行一些初始化设置。

1、随机生成一个5个字母的单词。

2、重置“空格”的背景和字体颜色：重置为在Cocos Creator编辑器中的初始设计值。

3、设置“空格”只读：初始状态下，只有第一排可以输入。

4、重置键盘按钮的背景颜色：重置为在Cocos Creator编辑器中的初始设计值。

5、设置当前选中的“空格”。

在gamemanager中实现以上功能，代码如下：

    import { words } from './words';//加载词库
    //根据词库随机生成一个单词
    setCurrentAnswer () {
        let sAnswer = words.getRandomword();
        gamemanager._currentAnswer = sAnswer;
    }

    getCurrentAnswer () {
        return gamemanager._currentAnswer;
    }

    //重置中间方块区域
    resetMiddleBtn () {
        let homeNode = gamemanager.instance.homeNode;
        for (let i = 0; i < 6; i ++){
            let layoutNode = homeNode.getChildByPath('top/Layout_middle' + (i + 1).toString());
            for(let j = 0; j < layoutNode.children.length;j++){
                layoutNode.children[j].getChildByName('Sprite').getComponent(Sprite).spriteFrame = 
                layoutNode.children[j].getChildByName('Sprite').getComponent(Sprite).spriteAtlas.getSpriteFrame('btn_border');
                layoutNode.children[j].getChildByName('Label').getComponent(Label).string = '';
                layoutNode.children[j].getChildByName('Label').getComponent(Label).color = new Color(0,0,0);
            }  
        }  
    }
    //设置中间方块区域只读
    setMiddleBtnReadOnly () {
        let homeNode = gamemanager.instance.homeNode;
        for (let i = 0; i < 6; i ++){
            let layoutNode = homeNode.getChildByPath('top/Layout_middle' + (i + 1).toString());
            if (i === 0) {
                gamemanager.instance.setBtnEnable(layoutNode,true);
            }
            else {
                gamemanager.instance.setBtnEnable(layoutNode,false); 
            }   
        }  
    }
    setBtnEnable(layoutNode,isEnable){
        if(layoutNode) {
            for(let i = 0;i < layoutNode.children.length;i++){
                layoutNode.children[i].getComponent(Button).enabled = isEnable;
            }
        }
    } 
    //重置键盘按钮
    resetKeybordeBG () {
        let homeNode = gamemanager.instance.homeNode;
        for(let i = 0; i < 3; i++){
            let layoutNode = homeNode.getChildByPath('top/Layout_bottom' + (i + 1).toString());
            for(let j = 0; j < layoutNode.children.length; j++){
                    layoutNode.children[j].getComponent(Sprite).spriteFrame = 
                    layoutNode.children[j].getComponent(Sprite).spriteAtlas.getSpriteFrame('keybord_bg');
            }
        }
    }
    //运行“空格”输入动画
    showBtnInputTween (currentBtnNode) {
        currentBtnNode.getComponent('btn_middle').tweenObjLabelInput.start();
    }
    //运行“空格”清除动画
    showBtnClearTween (currentBtnNode) {
        currentBtnNode.getComponent('btn_middle').tweenObjClear.start();
    }

词库是在github上找的原版游戏的词库。词库分为两部分，正确的单词大概有2700多个，允许输入的单词大概有1万个。原版游戏的作者只将常用的英文单词作为正确答案，考虑不通国家的玩家的语言不同又增加了近万个单词允许输入。后续教程写完以后会将原代码以及所用到的素材提供下载，这里就不再贴出来了，太长不好显示。

在home.ts脚本中增加initgame函数来统一管理游戏初始化过程：

    start () {
        this.initgame();
    }
    //初始化游戏
    initgame() {
        let homeNode = gamemanager.instance.getHomeNode();   
        const layoutnode = homeNode.getChildByPath('top/Layout_middle1');
        //设置答案
        gamemanager.instance.setCurrentAnswer();
        //重置中间框格背景，字体颜色
        gamemanager.instance.resetMiddleBtn();
        //设置中间方格只读
        gamemanager.instance.setMiddleBtnReadOnly();
        //重置键盘按钮颜色
        gamemanager.instance.resetKeybordeBG(); 
        //选中第一个方框
        gamemanager.instance.setCurrentLayoutNode(layoutnode); 
        gamemanager.instance.setCurrentBtnNode(layoutnode.children[0]); 
        layoutnode.children[0].getComponent(Button).clickEvents[0].emit(['click']);                     
    }

 二、提交答案

1、获取当前所在第几排，然后将这一排5个字母组合成一个字符串。

2、进行合法性校验：填写的字母够不够5个，是否为有效单词。

3、若未通过校验则显示提示框，提示框为prefab组件。

在home.ts中增加submitAnswer函数，代码如下：

    submitAnswer () {//提交答案
        let currentLayoutNode = gamemanager.instance.getCurrentLayoutNode();
        let err = '';
        let sAnswer = '';

        for (let i = 0;i < currentLayoutNode.children.length; i++) {
            sAnswer += currentLayoutNode.children[i].getChildByName('Label').getComponent(Label).string;
        }
        sAnswer = sAnswer.toLowerCase();
        if (sAnswer.length < 1) {
            err = '请填一个单词';
        }
        else if (sAnswer.length < 5) {
            err = '单词还没有填完';
        }
        else if (words.allwords.indexOf(sAnswer) < 0){//校验单词
            err = '不是有效单词';
        }

        if (err) {//弹出提示框
            Util.showDiolag('prefab/messageBox',homeNode.parent,(newNode) =>