Phaser: How to fix the delay of the restart function, i am using window.setTimeout

Question

var config = {
  type: Phaser.AUTO,
  width: 1900,
  height: 1000,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: false
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};
var main = document.getElementById("startBtn")
var gameOver
score = 0;
function start() {
  game = new Phaser.Game(config);
  main.innerHTML = ''
  score = 0;
}

function preload() {
  this.load.image('Background', 'assets/Background.jpg');
  this.load.image('ground', 'assets/platform.png');
  this.load.image('coin', 'assets/coin.png');
  this.load.image('redCoin', 'assets/redCoin.png');
  this.load.spritesheet('monkey',
    'assets/monkey.png',
    { frameWidth: 600, frameHeight: 720 }
  );
}

var platforms;
var score = 0;
var scoreText;

function create() {
  this.add.image(500, 275, 'Background').setScale(3);
  this.w = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W)
  this.a = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A)
  this.s = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S)
  this.d = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D)
  platforms = this.physics.add.staticGroup();

  platforms.create(200, 650, 'ground').setScale(0.15).refreshBody();
  platforms.create(600, 400, 'ground').setScale(0.15).refreshBody();
  platforms.create(1600, 650, 'ground').setScale(0.15).refreshBody();
  platforms.create(750, 100, 'ground').setScale(0.15).refreshBody();
  platforms.create(850, 750, 'ground').setScale(0.15).refreshBody();
  platforms.create(100, 950, 'ground').setScale(0.15).refreshBody();
  platforms.create(400, 950, 'ground').setScale(0.15).refreshBody();
  platforms.create(700, 950, 'ground').setScale(0.15).refreshBody();
  platforms.create(1000, 950, 'ground').setScale(0.15).refreshBody();
  platforms.create(1300, 950, 'ground').setScale(0.15).refreshBody();
  platforms.create(1600, 950, 'ground').setScale(0.15).refreshBody();
  platforms.create(1900, 950, 'ground').setScale(0.15).refreshBody();
  platforms.create(1800, 800, 'ground').setScale(0.15).refreshBody();
  platforms.create(250, 250, 'ground').setScale(0.15).refreshBody();
  platforms.create(1000, 500, 'ground').setScale(0.15).refreshBody();
  platforms.create(1150, 220, 'ground').setScale(0.15).refreshBody();

  player = this.physics.add.sprite(100, 450, 'monkey').setScale(0.075);
  this.physics.add.collider(player, platforms);
  player.setBounce(0.2);
  player.setCollideWorldBounds(true);

  this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('monkey', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });
  this.anims.create({
    key: 'turn',
    frames: [{ key: 'monkey', frame: 4 }],
    frameRate: 20
  });
  this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('monkey', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
  });
  coins = this.physics.add.group({
    key: 'coin',
    repeat: 10,
    setXY: { x: 12, y: 0, stepX: 150 }
  });
  coins.children.iterate(function (child) {
    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
    child.setScale(0.05)
  });
  this.physics.add.collider(coins, platforms);
  this.physics.add.overlap(player, coins, collectCoin, null, this);
  redCoins = this.physics.add.group();
  this.physics.add.collider(redCoins, platforms);
  this.physics.add.collider(player, redCoins, hitredCoin, null, this);

  scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '64px', fill: 'rgb(85, 1, 1)' });
}

function update() {
  cursors = this.input.keyboard.createCursorKeys();

  if (cursors.left.isDown) {
    player.setVelocityX(-160);
    player.anims.play('left', true);
  }
  else if (cursors.right.isDown) {
    player.setVelocityX(160);
    player.anims.play('right', true);
  }
  else {
    player.setVelocityX(0);
    player.anims.play('turn');
  }

  if (cursors.up.isDown && player.body.touching.down) {
    player.setVelocityY(-330);
  }
}
function collectCoin(player, coin) {
  coin.disableBody(true, true);
  score += 1;
  scoreText.setText('Score: ' + score);
  if (coins.countActive(true) === 0) {
    coins.children.iterate(function (child) {

      child.enableBody(true, child.x, 0, true, true);

    });

    var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);

    var redCoin = redCoins.create(x, 16, 'redCoin').setScale(0.05);
    redCoin.setBounce(1);
    redCoin.setCollideWorldBounds(true);
    redCoin.setVelocity(Phaser.Math.Between(-200, 200), 20);

  }
}

function hitredCoin(player, redCoin) {
  this.physics.pause();
  player.setTint(0xff0000);
  player.anims.play('turn');
  gameOver = true;
  window.setTimeout(restart, 3000);
}
function restart () {
  this.scene.stop();
  this.scene.start();
}

This code is my game and it doesn't work because you can not respawn when you die, the delay doesn't work. I would like help fixing the time delay at the end of the hitredcoinfunction that calls the restart function. Please help me with this problem

it may be because I am using a delay thing from javascript, if so please tell me how to swap it out for the phaser version

pls help me with this, I really need my game to work

Answer 1

The problem is that the this context is not set. you can do this simply with the bind function. Here is the link to the documentation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)

Just change the line to this:

window.setTimeout(restart.bind(this), 3000);

the bind function, passes an object/context (in this case the phaser scene) to the function, so that it can be referred to as this.

If you want to use the phaser delayedCall function you have to replace the line with (link to the documentation https://photonstorm.github.io/phaser3-docs/Phaser.Time.Clock.html ):

 this.time.delayedCall(3000, restart, null, this);

• the first parameter is the time in ms: 3000
• the second parameter is the function to call: restart
• the third parameter are arguments, that should be passed to the passed function: null
• the last parameter is the context, for the passed function: this (the current scene)