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

完整代码

游戏流程分析

1、游戏中需要玩家输入一个5个字母的单词，一个“空格”里面输入一个字母。输入完成后点击“ENTER”键进行提交。

2、根据游戏规则校验玩家提交的单词。

3、若猜中单词则结束游戏，若未猜中单词则在下一排继续输入单词。

4、重复1,2,3步骤，若6次机会用完还没猜中即输了。

基础功能分析

1、“空格”选中效果：这里说的“空格”就是上一篇中制作的prefab（btn_middle），在cocos creator编辑器中已经将btn_middle的背景（子节点Sprite）设置为一个灰色边框，当玩家选中这个btn_middle可以将其背景设置为一个黑色的边框以表示选中状态，或者高级一点实现一个动画。

2、gamemanager中需要增加CurrentLayoutNode，CurrentBtnNode，用来记录当前在第几排（前面在布局中使用了6个Layout组件来实现6排输入区域），当前选中的btn_middle。

3、输入效果：玩家点击下方的键盘按钮，在当前选中的btn_middle中设置被点击的键盘按钮的内容。

4、玩家点击“ENTER”提交动画效果：根据游戏规则判断用户猜测的单词，变换btn_middle的背景并实现翻转动画。

功能实现

一、在gamemanager中添加currentLayoutNode和currentBtnNode属性。

代码如下：

    
    private static _currentLayoutNode : Node;
    private static _currentBtnNode : Node;


    setCurrentLayoutNode (aNode) {
        gamemanager._currentLayoutNode = aNode;
    }

    getCurrentLayoutNode () {
        return gamemanager._currentLayoutNode;
    }

    setCurrentBtnNode(aNode) {
        gamemanager._currentBtnNode = aNode;
    }

    getCurrentBtnNode () {
        return gamemanager._currentBtnNode;
    }

二、btn_middle动画效果实现：

在cocos creator的资源管理器中新建btn_middle.ts脚本文件，然后双击打开该脚本文件，删除默认的注释代码，实现选中，输入，清空，翻转动画。

使用cocos creator提供的缓动组件tween来实现动画效果。

选中动画：玩家选中某个btn_middle后，可以简单的将该btn_middle的浅色背景框替换成深色的背景框来实现选中效果，为了使得游戏更生动所以改为实现一个动画效果。实现的效果就是让btn_middle“抖动”一下，再闪烁几下。实现代码如下：

    //抖动动画
    tween(this.node)
    .to(0.05,{scale : new Vec3(1.03,1.03,1)},{easing : 'backOut'})
    .to(0.05,{scale : new Vec3(1,1,1)})       
    .union()
    .repeat(2)
    //闪烁动画
    let spriteNode = this.node.getChildByName('Sprite');
    tween(spriteNode.getComponent(UIOpacity))
    .to(0.5,{opacity : 100})
    .to(0.5,{opacity : 255})
    .to(0.5,{opacity : 100})
    .union()

这里简单介绍一下tween缓动组建的使用，tween缓动组件需要传递一个节点，并且可以在设置的时间内，改变传入节点的属性从而达到动画的效果。以上面的代码为例，btn_middle.ts脚本文件挂载到btn_middle这个prefab上，当btn_middle被加载的时候，btn_middle.ts中的类也被实例化了，此时类中的this.node就是指该btn_middle节点。所以tween(this.node)表示在btn_middle节点上的动画，.to(0.05,{scale : new Vec3(1.03,1.03,1)},{easing : 'backOut'}) 表示在0.05秒内，将节点的scale属性变化到1.03,1.03,1，scale属性在属性检查器中如下：

scale可以理解为大小，默认为Vec3(1,1,1)也就是原始大小，x代表横轴上的变化，y代表纵轴上的变化，在2d游戏中可以不考虑Z。可以手动设置x,y,z的大小来观察组件在场景编辑器中的变化从而确定在代码中要实现的效果。{easing : 'backOut'} 代表在大小变化完成时的一个修饰，为了让动画更“圆润”一点，这个设置代表大小变化完了之后有个快速收缩并复原的效果。所以.to(0.05,{scale : new Vec3(1.03,1.03,1)},{easing : 'backOut'}) 是实现了在0.05秒将节点增大3%,并且完成时有个收缩并复原的效果。同理： .to(0.05,{scale : new Vec3(1,1,1)}) 实现了在0.05秒内将节点大小还原的效果。.union() 表示将这两个动作联合在一起，.repeat(2)代表执行两次。所以结合起来的效果就是btn_middle节点在0.1秒内变大3%又变回去，执行了两次。看上去就是“抖动”了一下。tween缓动组件基本上可以实现传入节点的任意属性的改变，以上图为例，若要改变btn_middle的位置，就在.to中设置position属性即可

闪烁动画的设计原理：改变sprite的透明度。由于node节点的属性只有上图中的4个，所以要实现透明度的改变则需要在sprite节点上挂载UIOpacity组件，如下图所示：

let spriteNode = this.node.getChildByName('Sprite'); 通过getChildByName()获取btn_middle节点下的Sprite子节点。

tween(spriteNode.getComponent(UIOpacity))，在tween中传入sptite节点的UIOpacity组件，就可以实现 Opacity属性的变化了。Opacity默认255代表不透明，0代表完全透明。

        .to(0.5,{opacity : 100})

        .to(0.5,{opacity