cretor 小游戏获得物品弹窗-蒲公英云

cretor 小游戏获得物品弹窗

Myth丶恋晨 2022-10-17 00:49 212阅读 0赞

因我们需求是一次最多显示5个分批显示，所以我先写了一个小模板

两种方式显示一种是每次显示5个另一种是每次显示一个慢慢向上飘

cc.Class({
    extends: cc.Component,
    properties: {
        mainNode: cc.Node,
        itemNode: cc.Node,
        btn: cc.Button,
        QieHuanBtn: cc.Button,
        currLabel: cc.Label,
    },
    // use this for initialization
    onLoad() {
        window.log = function () {
            this.apply(window, arguments);
        }.bind(console.log);
        this.itemPool = new cc.NodePool();
        this.updateTimer = 0;//更新时间累加
        this.updateInterval = 0.1;//更新间隔
        Object.defineProperty(this, "getGainType", {
            get: function () {
                return this.value
            },
            set: function (newValue) {
                this.value = newValue;
                this.currLabel.string = `当前：${this.getGainType}`;
                let layout = this.mainNode.getComponent(cc.Layout);
                switch (newValue) {
                    case 1:
                        this.updateInterval = 1.4;
                        layout.enabled = true;
                        break;
                    case 2:
                        this.updateInterval = 0.3;
                        layout.enabled = false;
                        break;
                }
            }
        })
        this.getGainType = 2;//1:一次显示5个  2: 一次显示1个
        this.mainNode.removeAllChildren();
        this.itemArr = [1, 2, 3, 4, 5, 6];
        this.btn.node.on('click', () => {
            this.addItem(~~(Math.random() * 10))
        })
        this.QieHuanBtn.node.on('click', () => {
            this.getGainType = this.getGainType == 1 ? 2 : 1;
        })
    },
    addItem(num) {
        log('添加物品：', num)
        //解析操作
        while (num > 0) {
            this.itemArr.push(~~(Math.random() * 100))
            num--;
        }
    },
    //对象池
    getItemNode() {
        let node = null;
        if (this.itemPool.size() > 0) {
            node = this.itemPool.get();
        } else {
            node = cc.instantiate(this.itemNode);
        }
        node.y = 0;
        return node;
    },
    //回收复用
    removeItemNode(node) {
        this.itemPool.put(node)
    },
    //增加item
    addItemNode(item) {
        let node = this.getItemNode();
        this.setItemNode(node, item)
        if(this.getGainType == 1){
            node.setScale(1);
        }else{
            node.setScale(0.2);
        }
        node.opacity = 0;
        // this.mainNode.insertChild(node, 0);
        this.mainNode.addChild(node);
        this.tweenNode(node);
    },
    //设置节点信息
    setItemNode(node, item) {
        let label = node.getChildByName('label');
        label.getComponent(cc.Label).string = `物品${item} X ${item}`;
    },
    //移动规则
    tweenNode(node) {
        if (this.getGainType == 1) {
            cc.tween(node)
                .to(0.2, { opacity: 255 })
                .delay(0.6)
                .to(0.5, { opacity: 0 })
                .call(() => {
                    this.removeItemNode(node);
                })
                .start()
        } else {
            cc.tween(node)
                .to(0.1, { opacity: 255, scale: 1 })
                .to(0.5, { position: cc.v2(0, 100) })
                .to(0.5, { position: cc.v2(0, 200), opacity: 0, scale: 0.2 })
                .call(() => {
                    this.removeItemNode(node)
                })
                .start()
        }
    },
    update(dt) {
        this.updateTimer += dt;
        if (this.updateTimer < this.updateInterval) return; // 节流
        this.updateTimer = 0;
        this._updateItem(dt);
    },
    _updateItem() {
        if (this.itemArr.length) {
            if (this.getGainType == 1) {
                this.updateInterval = 1.4;
                let arrLen = this.itemArr.length;
                this.itemArr.forEach((item, index) => {
                    if (index < 5) {
                        this.addItemNode(item)
                    }
                })
                if (arrLen > 5) {
                    this.itemArr.splice(0, 5);
                } else {
                    this.itemArr.splice(0, arrLen);
                }
                log('splice', this.itemArr)
            } else {
                this.addItemNode(this.itemArr[0])
                this.itemArr.splice(0, 1);
            }
        } else {
            // if (this.isStart) {
            //     let node = this.mainNode.getChildByName('itemNode')
            //     if (!node) {
            //         this.close();
            //     }
            // }
        }
    },
    close() {
        this.destroyNode();
    },
    destroyNode() {
        log('销毁')
        // this.itemPool.clear();
        // this.node.removeFromParent();
        // this.node.destroy();
    },
    onDestroy() {
    },
});