石頭剪刀布功能：介面一開啟，石頭剪刀布三個圖示就會迴圈滾動。點選挺就會對比下標，計算結果

遊戲介面：

 程式碼實現：

import UI_Base from "./UI_Base";
import { SlideCell } from "../Common/UI/LoopSlide";
import { G_TurntableData } from "../Data/TurntableData";
import { SmallGameType, SmallGameResType } from "../Net/MsgDefine";
import { ConfigManger } from "../Manager/ConfigManager";
import { Util } from "../Common/Util";

const { ccclass, property } = cc._decorator;

@ccclass
export default class UI_ShiTouJIanDao extends UI_Base {
    slotList: UI_ShiTouJIanDaoItem[] = new Array<UI_ShiTouJIanDaoItem>()
    button: cc.Button
    curSprite: cc.Sprite
    playerIcon: cc.Sprite
    item_icon: cc.Sprite
    fansName: cc.Label

    private speed: number = 1000
    private btnArr: cc.Node[] = [];
    private hRange: cc.Vec2
    private yMax: number = -88
    private yMin: number = -616
    private size: cc.Vec2 = new cc.Vec2(176, 176)
    private isRun: boolean = false
    private isPause: boolean = false

    finishedCallBack: Function
    // 1石頭 2剪刀 3布
    slotDataList: number[] = [1, 2, 3, 1, 1, 2, 3, 2, 3, 1, 3, 3, 2, 2, 1, 2, 3, 2, 2, 1, 2, 3, 3, 2, 1]
    spriteFrame = {}
    targetType: number = 2
    onLoad() {
        this.item_icon = this.findSpriteByName(this.node, "item_icon")
        this.playerIcon = this.findSpriteByName(this.node, "playIcon")
        this.curSprite = this.findSpriteByName(this.node, "Result/icon")
        this.button = this.findButtonByName(this.node, "okButton")
        this.addButtonClick(this.button, () => {
            this.OnStop()
        })
        this.fansName = this.findLabelByName(this.node, "fensi_expdi/fansName")
        for (let i = 1; i <= 4; i++) {
            let node = this.findChildByName(this.node, "view/content/item_" + i)
            let slotItem = node.addComponent(UI_ShiTouJIanDaoItem)
            slotItem.OnInit(node, this)
            slotItem.index = i
            this.slotList.push(slotItem)
            this.btnArr.push(node)
        }

        this.spriteFrame[1] = this.slotList[0].img.spriteFrame
        this.spriteFrame[2] = this.slotList[1].img.spriteFrame
        this.spriteFrame[3] = this.slotList[2].img.spriteFrame

        //隨機一個目標
        this.targetType = Util.getRandomInt(1, 3)
        this.curSprite.spriteFrame = this.spriteFrame[this.targetType]

    }

    start() {
        let film_random_config = ConfigManger.GetTable("film_random_portrait")
        let array = []
        for (var v in film_random_config) {
            let item = film_random_config[v]
            let iconImage: string = item.portrait
            if (iconImage.search("woman") > 0) {
                array.push(item)
            }
        }

        let index = Util.getRandomInt(0, array.length - 1)
        this.loadTextureByName(this.playerIcon, "sprites/wxusericon/" + array[index].portrait)

        let configTable = ConfigManger.GetTable("game_fingleguess")
        let config;
        for (let v in configTable) {
            config = configTable[v]
        }

        //計算獎勵數量
        let itemId: number = 0
        let itenNum: number = 0
        for (var v in config.currencyAward) {
            itemId = Number(v)
        }
        let itemConfig = ConfigManger.GetTableConfigByKey("item_base", itemId)
        this.loadTextureByName(this.item_icon, itemConfig.icon)
        this.RandomFansName()
    }

    RandomFansName() {
        this.fansName.string = ConfigManger.GetTableConfigRandom("nickname_female").name;
    }

    curY: number = 0
    waitTime: number = 0
    update(dt) {
        if (this.isRun) {
            if (this.waitTime <= 0) {
                this.curY += 22
                this.movePosition(22)
                if (this.curY % this.size.y == 0) {
                    if (this.isPause) {
                        this.isRun = false
                        this.ShowSelectItem()
                        return
                    }
                    this.waitTime = 0.13
                }
            }
            else {
                this.waitTime -= dt
            }
        }
    }

    ShowSelectItem() {
        for (let i = 0; i < this.btnArr.length; i++) {
            if (this.btnArr[i].y == -264) {
                let ui_item: UI_ShiTouJIanDaoItem = this.btnArr[i].getComponent(UI_ShiTouJIanDaoItem)
                let curType = this.slotDataList[ui_item.index - 1]
                ui_item.OnSelect()
                let result = SmallGameResType.FG_RES_FAIL
                console.error(this.targetType, curType)

                if (this.targetType == 1) {
                    //石頭
                    if (curType == 1)  //石頭  平局
                    {
                        result = SmallGameResType.FG_RES_DRAW
                    }
                    else if (curType == 2) { //剪刀 失敗
                        result = SmallGameResType.FG_RES_FAIL
                    }
                    else if (curType == 3) { //布 勝利
                        result = SmallGameResType.FG_RES_SUCCESS
                    }
                }
                else if (this.targetType == 2) {
                    //剪刀
                    if (curType == 1)  //石頭  勝利
                    {
                        result = SmallGameResType.FG_RES_SUCCESS
                    }
                    else if (curType == 2) { //剪刀 平局
                        result = SmallGameResType.FG_RES_DRAW
                    }
                    else if (curType == 3) { //布  失敗
                        result = SmallGameResType.FG_RES_FAIL
                    }
                }
                else if (this.targetType == 3) {
                    //布
                    if (curType == 1)  //石頭  失敗
                    {
                        result = SmallGameResType.FG_RES_FAIL
                    }
                    else if (curType == 2) { //剪刀 勝利
                        result = SmallGameResType.FG_RES_SUCCESS
                    }
                    else if (curType == 3) { //布  平局
                        result = SmallGameResType.FG_RES_DRAW
                    }
                }

                if (result == SmallGameResType.FG_RES_SUCCESS) {
                    console.error("勝利")
                }
                else if (result == SmallGameResType.FG_RES_DRAW) {
                    console.error("平局")
                }
                else if (result == SmallGameResType.FG_RES_FAIL) {
                    console.error("失敗")
                }
                G_TurntableData.RequestGameAward(SmallGameType.GAME_FINGLEGUESS, result)

                //延遲兩秒
                this.scheduleOnce(() => {
                    if (this.finishedCallBack != null) {
                        this.finishedCallBack()
                    }
                }, 1)
            }
        }
    }

    private movePosition(y: number) {

        if (y == 0) return
        this.btnArr.forEach(element => {
            element.setPositionY(element.position.y + y)
        });

        let maxidx: number = 0;
        let minidx: number = 0;
        let miny: number = this.btnArr[0].position.y
        let maxy: number = this.btnArr[0].position.y

        if (y > 0) {   //向上移動
            for (let index = 1; index < this.btnArr.length; index++) {
                let element = this.btnArr[index];
                if (miny > element.y) {
                    miny = element.y;
                }
                if (maxy < element.y) {
                    maxy = element.y;
                    maxidx = index;
                }
            }
            if (maxy > this.yMax) {
                this.btnArr[maxidx].setPositionY(miny - this.size.y);
                let operationcell: SlideCell = this.btnArr[maxidx].getComponent(UI_ShiTouJIanDaoItem)
                let idx: number = operationcell.index;
                idx = idx + 1;
                if (idx > this.slotDataList.length) {
                    idx = 1;
                }
                operationcell.refreshCellData(idx);
            }
        }
        else if (y < 0) {  //向下移動
            for (let index = 1; index < this.btnArr.length; index++) {
                let element = this.btnArr[index];
                if (miny > element.y) {
                    miny = element.y;
                    minidx = index;
                }
                if (maxy < element.y) {
                    maxy = element.y;
                }
            }

            if (miny < this.yMin) {
                this.btnArr[minidx].setPositionY(maxy + this.size.y);
                let operationcell: UI_ShiTouJIanDaoItem = this.btnArr[minidx].getComponent(UI_ShiTouJIanDaoItem)
                let idx: number = operationcell.index;
                idx = idx - 1;
                if (idx < 1) {
                    idx = this.slotDataList.length;
                }
                operationcell.refreshCellData(idx);
            }
        }
    }

    Play(callback) {
        this.finishedCallBack = callback
        this.node.active = true
        this.isRun = true
        this.isPause = false
        this.unscheduleAllCallbacks()
    }

    OnStop() {
        if (this.isPause == false) {
            this.isRun = true
            this.isPause = true
        }
    }

    // update (dt) {}
}

class UI_ShiTouJIanDaoItem extends SlideCell {
    node: cc.Node
    ui: UI_ShiTouJIanDao
    curPosition
    targetPosition
    img: cc.Sprite

    isPlay = false

    OnInit(_node: cc.Node, _ui: UI_ShiTouJIanDao) {
        this.node = _node
        this.ui = _ui
        this.img = _ui.findSpriteByName(this.node, "icon")
        this.curPosition = new cc.Vec2(0, -50)
        this.targetPosition = new cc.Vec2(0, 0)
    }

    OnSelect() {
        let action1 = cc.scaleTo(0.5, 1.2)
        let action2 = cc.scaleTo(0.2, 0.8)
        let action3 = cc.scaleTo(0.3, 1)

        this.img.node.runAction(cc.sequence(action1, action2, action3))
    }

    refreshCellData(p_index: number) {
        super.refreshCellData(p_index)
        this.img.spriteFrame = this.ui.spriteFrame[this.ui.slotDataList[p_index - 1]]
    }
}

export class SlideCell extends cc.Component {
    index: number

    refreshCellData(p_index: number) {
        this.index = p_index
    }
}
 

大 ``