Question

我有三个这样的按钮：

astroid: function() {

    astroid1 = this.add.button(15, 80, 'astroid1', this.astroid1Clicked, this);
    astroid2 = this.add.button(200, 10, 'astroid2', this.astroid2Clicked, this);
    astroid3 = this.add.button(400, 40, 'astroid3', this.astroid3Clicked, this);
    astroid4 = this.add.button(622, 90, 'astroid4', this.astroid4Clicked, this);
},

并且点击每个按钮都有功能：

// Observing which asteroid is clicked and checking answer accordingly.
astroid1Clicked: function() {
    this.fire();

    //console.log(astroidContains[0]);
    // console.log(answear);
    //this.isCorrectAnswerHit(25, 100);
    if (astroidContains[0] == answear) {
        setTimeout(function() {
            //50 and 100 are the axis of astroid1
            Game.isCorrectAnswerHit(50, 100);
        }, 500);
    } else {
        this.isWrongAnswerHit();
    }
    allowClick = false;

    return false;
},

astroid2Clicked: function() {

    this.fire();

    //console.log(astroidContains[1]);
    //console.log(answear);
    if (astroidContains[1] == answear) {
        setTimeout(function() {
            Game.isCorrectAnswerHit(260, 10);
        }, 500);
    } else {
        this.isWrongAnswerHit();
    }

    allowClick = false;
    return false;
},

astroid3Clicked: function() {

    this.fire();

    //console.log(astroidContains[2]);
    //console.log(answear);
    if (astroidContains[2] == answear) {
        setTimeout(function() {
            Game.isCorrectAnswerHit(450, 40);
        }, 500);
    } else {
        this.isWrongAnswerHit();
    }
    allowClick = false;
    return false;
},

astroid4Clicked: function() {

    this.fire();
    //bullets.destroy();
    //console.log(astroidContains[3]);
    //console.log(answear);
    if (astroidContains[3] == answear) {
        setTimeout(function() {
            Game.isCorrectAnswerHit(620, 100);
        }, 500);
    } else {
        this.isWrongAnswerHit();
    }
    allowClick = false;
    return false;
},

我希望当用户点击一个按钮时，所有按钮都将被禁用，包括用户点击的按钮，所有功能都将执行，然后用户可以点击任何按钮。请帮助我，我尝试了很多东西，但它们没有按照我的意愿工作，而且应该没有jQuery。

Answer 1

为什么不使用你已经拥有的旗帜？

astroid4Clicked: function() {
  if (this.allowClick == true) {
  effect...
  this.allowClick = false;
  }
}

然后你必须决定何时以及在什么情况下将标志恢复为真。

最好是检查update（）函数中的标志，而不是在每个函数中分开。

是的，你有很多代码在重复......

Answer 2

我的建议是使用回调而不是使用按钮类。

// Assuming `this` is the Phaser.State -- this is for callback safety
let thisState = this
var myFireFunction = function(event) {
    thisState.fire() 
    // ...

    // Add a delay timer (or, this could be a callback when the bullet strikes the target)
    var delay = thisState.game.time.create(true)
    delay.duration = 500 //milliseconds

    // add the callback to the input again
    delay.onComplete.addOnce( function() {
        thisState.input.onDown.addOnce(myFireFunction)
    })
    delay.start()
}

// Add the callback ONCE to the `onDown` event
this.input.onDown.addOnce(myFireFunction)

这将阻止用户快速点击屏幕并在多个线程上调用多个事件。然后，您可以在游戏处理完第一个事件后将回调添加到onDown信号。

查看Phaser's powerful Signal Class和Timer Class以及相关教程，了解如何扩展此想法。

使用javaScript在phaser.io中单击一次后禁用单击

2 个答案: