cretor 小游戏获得物品弹窗

Myth丶恋晨 2022-10-17 00:49 126阅读 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() {
           
        },
    });

代码不多，但都是自己的思路，如果有类似的需求可以借鉴。

随便写的 所以样式很丑

[测试项目下载][Link 1]

[Link 1]: https://download.csdn.net/download/qq_38026437/19269026