簡易的切換場景(使用滑鼠 click 事件)

var currentScene = 1;
var sceneDraw; // this is the only draw function i'll reassign

// never reassign draw! only reassign sceneDraw!
draw = function() {
    // put stuff I always want to do before drawing the scene here
   sceneDraw();
   // put stuff I always want to do after drawing the scene here
}

var drawScene1 = function() {
    // stuff for drawing scene 1
}

var drawScene2 = function() {
    //stuff for drawing scene 2
}

sceneDraw = drawScene1; // start with scene 1

mouseClicked = function () {
     if (currentScene === 1) {
        sceneDraw = drawScene2;
    } else if (currentScene ===2) {
        sceneDraw = drawScene1;
    }
}

在奔跑吧！台北：程式幕後分享文中有提到設計場景管理器

1. 將所有場景在遊戲開始前都先以 ScenesManager.createScene(…) 建立，備存在 ScenesManager.scenes 裡但不做任何更新或渲染。
2. 要開始某場景時執行 ScenesManager.setScene(sceneName)，會觸發該 Scene 的 init() 方法，所以場景開始更新。接著會把場景加進 renderer stage 開始渲染。
3. 要過場時，會呼叫 ScenesManager.connect(nextSceneName, connector)，將下一個場景加到渲染最底層，並將指定的過場畫面 connector 由右往左飛入後飛出，隨即進入下一關。

先大致揣摩，可能不太正確，之後會再研究補上

// 場景管理器
class ScenesManager {
  constructor () {
     this.queue = []  // {name: ‘’, instance: {}}
   }
   init () => {}
   createScene	 = () => {} 
   setScene = (sceneName) => {
      const target = this.queue.find(_scene => _scene.name === sceneName)
       // 場景開始更新
       target.init()
       // 場景 開始渲染
      this.renderStage(target)
   }
   renderStage = (target) => {}
   connect = (nextSceneName, connector) => {}
}

// 場景
class Scenes {

}

奔跑吧！台北：程式幕後分享

Khan Academy Advanced JS: Games & Visualizations

Egret场景切换管理类切换和单例使用方法

How to set and load your assets on different screen resolutions using JavaScript and PixiJS

Tutorial : Handling game scenes and screen scaling with Pixi