cocos2d js 3.0 弹出框的实现

最新推荐文章于 2021-09-29 15:07:30 发布

dayday_up2

最新推荐文章于 2021-09-29 15:07:30 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： cocos2d js

本文链接：https://blog.youkuaiyun.com/dayday_up2/article/details/39671653

cocos2d js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了在Cocos2d-js 3.0中创建弹出框的方法，关键在于利用`swallowTouches: true`属性来屏蔽背景图层的点击事件，确保弹出框交互的正常进行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹出框的实现主要矛盾在于如何屏蔽被遮挡图层的点击事件。而为了实现这个，我们可以再弹出框成设置吞噬事件，也就是设置swallowTouches: true,

代码如下，

var BaseLayer = cc.LayerColor.extend({
    listener:null,
    ctor:function(){
        this._super(cc.color(0,0,0,180),640,960);
        //使得下层的点击事情无效
        this.listener = cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: function (touch, event) {
                return true;
            },
            onTouchEnded: function (touch, event) {
            }
        });

        cc.eventManager.addListener(this.listener, this);

    },

    destory:function(){
        console.log("baselayer.");
        cc.eventManager.removeListener(this.listener);
    }
});/**
 * Created by Administrator on 2014/9/29.
 */

然后具体类再继承此方法，即可实现遮挡下层的事件

var WinGameUI = BaseLayer.extend({
    listener:null,
    btnListener:null,
    num:0,
    share:null,
    playAgain:null,
    mainUI:null,
    time:null,
    desprition:null,//获胜描述
    ctor:function(mainUI,time){
        this._super(cc.color(0,0,0,180),640,960);

        this.mainUI = mainUI;
        this.time = time;


        this.share = new cc.Sprite(res.share);
        this.addChild(this.share);
        this.share.x = WINSIZE.width/2 - 68;
        this.share.y = WINSIZE.height/2;

        this.playAgain = new cc.Sprite(res.playAgain);
        this.addChild(this.playAgain);
        this.playAgain.x = this.share.x + 150;
        this.playAgain.y = this.share.y;


        var str = "太棒了，你用时"+this.time.toFixed(2)+"秒完成游戏";
        this.desprition = new cc.LabelTTF(str, "Verdana", 24);
        this.addChild(this.desprition);
        this.desprition.x =  WINSIZE.width/2;
        this.desprition.y = this.share.y + 100;

        var self = this;
        this.btnListener = cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: function (touch, event) {
                var target = event.getCurrentTarget();
                var locationInNode = target.convertToNodeSpace(touch.getLocation());
                var s = target.getContentSize();
                var rect = cc.rect(0, 0, s.width, s.height);

                if (cc.rectContainsPoint(rect, locationInNode)) {
                    target.opacity = 180;
                    return true;
                }
                return false;
            },
            onTouchEnded: function (touch, event) {
                var target = event.getCurrentTarget();
                target.setOpacity(255);
                if(target ==  self.playAgain){
                    self.mainUI.start();
                    self.destroy();
                }
                console.log("logged!:"+(++self.num));
            }
        });

        cc.eventManager.addListener(this.btnListener, this.share);
        cc.eventManager.addListener(this.btnListener.clone(), this.playAgain);
    },
    destroy:function(){
        BaseLayer.prototype.destory.apply(this,arguments);
        this.removeChild(this.desprition);
        this.removeChild(this.playAgain);
        this.removeChild(this.share);
        cc.eventManager.removeListener(this.btnListener);
        this.removeFromParent();
    }
});