I have a phaser 3 project in which I have a button (in my game scene), this button opens a confirmation modal that implemented in html. when user clicks on confirm button a function from game scene should start spin a wheel. this listener function (spinWheel()) starts but the tween does not. here is my modal code:

<div  id="Modal" onclick="runGameScene()" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
    <div >
      <div >
        <div >
            <div style="text-align:center;">
                Do you want to spin the wheel?
            </div>
            <div >
                <div style="margin:auto">
                    <button type="button"  onclick="startWheelSpin()">yes</button>
                    <button type="button"  onclick="runGameScene()" data-dismiss="modal"> no </button>
                </div>
            </div>
        </div>       
      </div>
    </div>
  </div> 

here is where game starts(game.js file):

var game;

var gameOptions = {
slices: 6,
sliceColors: [0x16A085, 0x2989B9,  0x8E44AD, 0xF39C12, 0xD35400, 0xC0392B],
slicePrizes: ["RED", "GREEN", "BLUE", "WHITE", "CYAN", "YELLOW", "GREY", "PURPLE"],
rotationTime: 3000,
wheelRadius: 100,
spinCounter: 5
}

const ratio = Math.max(window.innerWidth / window.innerHeight, window.innerHeight / window.innerWidth)
const DEFAULT_HEIGHT = 2400 // any height you want
const DEFAULT_WIDTH = ratio * DEFAULT_HEIGHT
var gameConfig = {
   type: Phaser.AUTO,
   width: DEFAULT_WIDTH,
   height: DEFAULT_HEIGHT,
   scale: {
      mode: Phaser.Scale.FIT,
      autoCenter: Phaser.Scale.CENTER_BOTH,
      width: DEFAULT_WIDTH,
      height: DEFAULT_HEIGHT
   },
   backgroundColor: 0xd7eef7,
   scene: [playGame]
 };
 window.onload = function() {
   // game constructor
   game = new Phaser.Game(gameConfig);
 }

and here is my game scene (the spinWheel() function is the function that should run after user confirm):

class playGame extends Phaser.Scene {
constructor(){
    super("PlayGame");
}
create(){
    var sliceDegrees = 360 / gameOptions.slices;
    // making a graphic object without adding it to the game
    var graphics = this.make.graphics({x: 0,y: 0,add: false});
    for(var i = 0; i < gameOptions.slices; i  ){
        graphics.fillStyle(gameOptions.sliceColors[i], 1);
        graphics.slice(gameOptions.wheelRadius, gameOptions.wheelRadius, gameOptions.wheelRadius, Phaser.Math.DegToRad(270   i * sliceDegrees), Phaser.Math.DegToRad(270   (i    1) * sliceDegrees), false);
        graphics.fillPath();
    }
    graphics.generateTexture("wheel", gameOptions.wheelRadius * 2, gameOptions.wheelRadius * 2);

    // creating a sprite with wheel image as if it was a preloaded image
    this.wheel = this.add.sprite(game.config.width / 2, game.config.height / 2, "wheel");
    // spin circle
    this.spinBtn = new RoundedButton(this, game.config.width / 2, game.config.height / 2, 100, "spin", () => {this.confirmSpin()}); // a custom button with confirmSpin() as callback
    this.add.existing(this.spinBtn);
    // the game has just started = we can spin the wheel
    this.canSpin = true;
}

// function to spin the wheel
spinWheel() {
    if(this.canSpin){
        var rounds = Phaser.Math.Between(2, 4);
        var degrees = Phaser.Math.Between(0, 360);
        var prize = gameOptions.slices - 1 - Math.floor(degrees / (360 / gameOptions.slices));

        // now the wheel cannot spin because it's already spinning
        this.canSpin = false;

        this.tweens.add({
            targets: [this.wheel],
            angle: 360 * rounds   degrees,
            duration: gameOptions.rotationTime,
            ease: "Cubic.easeOut",
            callbackScope: this,
            onStart: function() {
                console.log("tween starts.");
            },
            onComplete: function(tween){
                console.log("prize:", prize);
                // player can spin again
                this.canSpin = true;
            }
        });
    }
}
confirmSpin() {
    this.scene.pause('PlayGame');
    $('#spentModal').modal('show');      // open confirm spin modal
}

}

and here is where I call spinWheel() when user confirm:

runGameScene = function() {
   game.scene.run('PlayGame');
}
startWheelSpin = function(){
   $('#Modal').modal('hide');
   runGameScene();
   const scene = game.scene.keys.PlayGame;
   scene.spinWheel();
}

can anyone tell me what is the problem?

CodePudding user response：

I assume the problem is, the in the html-fragment:

 <div  id="Modal" onclick="runGameScene()" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">

just remove onclick="runGameScene()" and it should work, since the event is bubbled up, and this event handler will be executed also.