I’ve been encountering an issue with phaser. so i made a copy of flappy bird game it works fine but i been failing at the gameover section. what i need is that when the bird detects collison i need it to play an audio and also display the gameover message and also i need to pause the game. I have acheived the game to pause and to play the audio file but i’ve failed to display the the image of gameover. here is the code:

import Phaser, { Game } from "phaser";
import * as Matter from "matter-js";
import { async } from "postcss-js";
let score = 0;
const config = {
  type: Phaser.AUTO,
  width: 600,
  height: 700,
  physics: {
    default: "matter",
    matter: {
      gravity: { y: 0.3 },
      debug: false,
    },
  },
  scene: {
    preload: preload,
    create: create,
    update: update,
  },
};

const game = new Phaser.Game(config);

function preload() {      // THE ASSETS
  this.load.image("background", "Game Objects/background-day.png");
  this.load.image("ground", "Game Objects/base.png");
  this.load.image("pipe", "Game Objects/pipe-green.png");
  this.load.image("flappyupflap", "Game Objects/yellowbird-upflap.png");
  this.load.image("flappymidflap", "Game Objects/yellowbird-midflap.png");
  this.load.image("flappydownflap", "Game Objects/yellowbird-downflap.png");
  this.load.image("ui", 'message.png');
  this.load.image('0', 'Numbers/0.png')
  this.load.image('1', 'Numbers/1.png')
  this.load.image('2', 'Numbers/2.png')
  this.load.image('3', 'Numbers/3.png')
  this.load.image('4', 'Numbers/4.png')
  this.load.image('5', 'Numbers/5.png')
  this.load.image('6', 'Numbers/6.png')
  this.load.image('7', 'Numbers/7.png')
  this.load.image('8', 'Numbers/8.png')
  this.load.image('9', 'Numbers/9.png')
  this.load.image('gameover', 'gameover.png')
  // AUDIO FILES BELOW ----
  this.load.audio('hit', 'hit.ogg')
  this.load.audio('die', 'die.ogg')
  this.load.audio('point', 'point.ogg')
  this.load.audio('wing', 'wing.ogg')

}

function create() {
  this.add.image(300, 300, "background").setScale(2.1);       // THE BACKGROUND IMAGE

  this.anims.create({         // THE ANIMATION OF THE BIRD FLAPPIPNG
    key: "flap",
    frames: [
      { key: "flappyupflap" },
      { key: "flappymidflap" },
      { key: "flappydownflap" },
    ],
    frameRate: 10,
    repeat: -1,
  });
  let ui = this.add.image(300, 300, "ui").setScale(2).setVisible(true);         // THE SCREEN WHEN YOU START THE GAME

  let flappu = this.matter.add.sprite(300, 400, "flappyupflap").setScale(1.4);   // THE BIRD
  flappu.anims.play("flap", true);    // ADDING THE ANIMATION TO THE BIRD

  let falpupdown = this.tweens.add({         // THE UP AND DOWN OF THE BIRD WHEN ON THE FIRST SCREEN
    targets: flappu,
    y: 295,
    duration: 1000,
    ease: "Quad.easeInOut",
    yoyo: true,
    repeat: -1,
    onCompleteScope: this,
  });



  let pipe1 = this.matter.add.image(-20, 700, "pipe").setScale(1.5).setStatic(true);     // THE BELOW PIPE
  let pipe2 = this.matter.add.image(-20, 50, "pipe").setScale(1.5).setStatic(true);       // THE UPPER PIPE


  pipe2.angle = 180;      // THE UPPER IS ROTATED 180 DEG

      var randomNum;              // THE RANDOM NUM
      function getRandomInt() {      // FUNCTION TO GET THIS RANDOM NUMBER
        let randomNum = Math.floor(Math.random() * (9 - 5) + 5) + "00";
        return randomNum;
      }

      pipe1.x = 800;                   // THE X-AXIS OF THE PIPE1
      pipe2.x = 800;                   // THE X-AXIS OF THE PIPE2
      let rect1 = this.add.rectangle(300, 375, 20, 1000, 0x00FFFF, 0);       // THE INVISIBLE RECTANGLE TO INCREMENT THE SCORE SO THAT WHEN THE BIRD PASSES THROUGH THE PIPES THE SCORE GETS INCREMENTED CHANGE THE LAST VALUE FOR VISIBLITY

      rect1.x = 800      // X-AXIS OF THE RECTANGLE
      let pipx1 = -40;    // X-AXIS OF THE PIPE
      let durationBatch1 = 4000;     // DURATION OF THE ANIMATION

      let tween1 = this.tweens.add({     // THE ANIMATION FOR THE PIPE1 COMING CLOSER TO THE BIRD
        targets: pipe1,
        x: pipx1,
        duration: durationBatch1,
        ease: "Linear",
        repeat: -1,
        ab: function () {
          randomNum = getRandomInt();
          pipe1.y = randomNum
        }
        ,
        onCompleteScope: this,
      });

      let tween2 = this.tweens.add({         // THE ANIMATION OF THE PIPE2 COMING CLOSER TO THE BIRD
        targets: pipe2,
        x: pipx1,
        duration: durationBatch1,
        ease: "Linear",
        repeat: -1,
        ab: function () {
          pipe2.y = pipe1.y - 650;
        },
        onCompleteScope: this,
      });

      let rect = this.tweens.add({        // THE ANIMATION OF THE RECTANGLE COMING WITH THE PIPE INCREASE THE LAST VALUE IN THE REC1 TO SEE THE RECTANGLE
        targets: rect1,
        x: pipx1 + 50,
        duration: durationBatch1,
        ease: "Linear",
        repeat: -1,
        onCompleteScope: this,
      });

      let digit, digit1, digit2;

      this.input.on("pointerdown", function () {   // CLICK EVENT LISTENER TO START THE GAME
        let audio = this.sound.add('wing');   // THE FLAP SOUND
        audio.play();
        let scorestr = score.toString();

        if (digit1) digit1.destroy();
        if (digit2) digit2.destroy();
        if (digit) digit.destroy();

        if (scorestr.length > 1) {
          digit1 = this.add.image(300, 100, scorestr[0]);
          digit2 = this.add.image(320, 100, scorestr[1]);
        } else {
          digit = this.add.image(300, 100, scorestr[0]);
        }

        falpupdown.pause()    // TO STOP THE BIRD FROM GOING UP AND DOWN AND TO START THE GAME
        ui.setVisible(false)  // MAKE THE UI INVISIBLE
        let birdY = flappu.y;
        let tween = this.tweens.add({
          targets: flappu,
          y: birdY - 70,
          duration: 500,
          ease: "Quad.easeOut",
          onUpdate: function (tween) {
            if (tween.progress > 0.1) {
              flappu.angle = -20;
            }
          },
          onComplete: function () {
            console.log("Transition to y -100 completed!");
            flappu.angle = 0;
          },
          onCompleteScope: this,
        });
},
this
);

tween1.pause()      // PAUSED THE ANIMATION OF THE PIPE1
tween2.pause()      // PAUSED THE ANIMATION OF THE PIPE2
rect.pause()      // PAUSED THE ANIMATION OF THE RECTANGLE

this.input.on("pointerdown", function(){
  tween1.resume()   // RESUMING THE PIPE ANIMATION AFTER THE USER CLICKS TO PLAY THE GAME
  tween2.resume()   // RESUMING THE PIPE ANIMATION AFTER THE USER CLICKS TO PLAY THE GAME
  rect.resume()   // RESUMING THE RECTANGLE ANIMATION AFTER THE USER CLICKS TO PLAY THE GAME

})

let ground = this.matter.add.image(300, 750, "ground").setScale(2.1).setStatic(true);   // THE GROUND ANIMATION

this.matter.world.on('collisionstart', (event) => {     // COLLISION DETECTION
  const pairs = event.pairs;
  pairs.forEach(pair => {
    const bodyA = pair.bodyA;
    const bodyB = pair.bodyB;
    if(bodyA.gameObject === flappu && (bodyB.gameObject === pipe1 || bodyB.gameObject === pipe2 || bodyB.gameObject === ground) || (bodyA.gameObject === pipe1 || bodyA.gameObject === pipe2 || bodyA.gameObject === ground) && bodyB.gameObject === ground){


    }
    if ((bodyA.gameObject === flappu && bodyB.gameObject === rect1) ||
        (bodyA.gameObject === rect1 && bodyB.gameObject === flappu)) {
      score++;
      console.log(score);
      let audio = this.sound.add('point');
      audio.play();
    }
    // Check if the objects involved in the collision are flappu and pipe1 or pipe2
    else if ((bodyA.gameObject === flappu && (bodyB.gameObject === pipe1 || bodyB.gameObject === pipe2)) ||
    ((bodyA.gameObject === pipe1 || bodyA.gameObject === pipe2) && bodyB.gameObject === flappu)) {
     let audio = this.sound.add('hit');
     audio.play();
     this.world.pause()
    }

    else{
      let audio = this.sound.add('die');
        audio.play
        this.add.image(300, 200, 'gameover').setScale(2)   // THE GAMEOVER MESSAGE
        audio.play();
        this.world.pause()

      }
  });
});
}


function update() {
// NOTHIN IN HERE!!!!
// BY VISHAL :)
}

The main error is in the collison detection section in the if, else if and else block. I’ve given the code so it is easy to follow up!.

So what i tried was the this.world.pause() and also the game.destroy() but it didn’t work. And i am a newbie to the javscript, matter-js and the phaser framework. I thought of using async await but i couldn’t figure it out