如何停止 Phaser 游戏并将其从页面中删除？

Question

I have a single webpage that I want to be able to run three JavaScript games, sequentially. I start one with

//jQuery to start a game
$(document).ready(() => {
  //When the logo image is clicked
  $("#logo").click(() => {
    //Get the archery game
    $.getScript('archery.js', () => {
      //Start it
      startArchGame();
      //Remove the image from the HTML doc
      $("#logo").remove();
    });
  })
})

Then, inside archery.js , once a condition is met, the following code is executed

$.getScript('skateboarding.js', () => {
  startSkateGame();
});
game.destroy();

The game.destroy(); stops the game from running in Phaser 3, but the next game is just loaded below the first one, so you can't see it. How can I fix this? Is it possible to delete the first script I got entirely?

Answer 1

I was able to solve this issue within the Phaser framework.

I changed game.destroy() to game.destroy(true, false) . The first argument of the destroy method, true , says that I want to remove the game from the canvas element of the page when I destroy the game. The second argument, false , says to NOT remove all of Phaser and its plugins for the page. I set this to false because I want to create another game in Phaser on the page after I destroy my first one.