单一canvas

Game.vue

@@ -2,22 +2,18 @@
   <div id="gameContainer" :style="containerStyle"></div>
 </template>
 <script>
-import ballMove from "./games/game-ballmove/game";
-import flappyBird from "./games/game-flipbird/game";
-import game2048 from "./games/game2048/game";
-import rect from "./games/game-rect/game";
-import floodFill from "./games/game-flood-fill/game";
-const games = { ballMove, flappyBird, game2048, rect, floodFill };
+import phaserGames from "./phaser";
+const games = phaserGames;
 const STATE_RUNNING = 0;
 const STATE_LOSE = 1;
 const STATE_WON = 2;
 const STATE_PAUSED = 3;
 export default {
-  props: ["name", "containerStyle"],
+  props: ["name", "containerStyle", "debug"],
   data() {
     return {
       state: STATE_RUNNING,
-      gameInstance: null,
+      game: null,
       containerId: "gameContainer",
     };
   },
@@ -31,39 +27,30 @@ export default {
   },
   methods: {
     pause() {
-      this.gameInstance.scene.scenes.forEach((scene) => {
-        scene.scene.pause();
-      });
+      this.game.pause();
       this.state = STATE_PAUSED;
       this.$emit("paused");
     },
     resume() {
       if (this.state === STATE_PAUSED) {
-        this.gameInstance.scene.scenes.forEach((scene) => {
-          scene.scene.resume();
-        });
+        this.game.resume();
         this.state = STATE_RUNNING;
         this.$emit("resumed");
       }
     },
     restart() {
-      this.gameInstance.restart();
+      this.game.restart();
       this.state = STATE_RUNNING;
     },
     dispose() {
-      for (const key in this.gameInstance.scene.keys) {
-        if (this.gameInstance.scene.keys.hasOwnProperty(key)) {
-          this.gameInstance.scene.stop(key); //停止渲染
-          this.gameInstance.scene.keys[key] = undefined;
-        }
-      }
-      this.gameInstance.destroy(false);
+      this.game.dispose();
+      this.game.destroy(false);
       const container = document.getElementById("gameContainer");
-      const canvas = this.gameInstance.canvas;
+      const canvas = this.game.canvas;
       if (canvas.parentNode === container) container.removeChild(canvas);
     },
     reload(name) {
-      this.gameInstance = games[name]({
+      this.game = games[name]({
         containerId: this.containerId,
         onLose: () => {
           if (this.state !== STATE_LOSE) this.$emit("lost");

phaser.js

@@ -0,0 +1,38 @@
+import ballMove from "./games/game-ballmove/game";
+import flappyBird from "./games/game-flipbird/game";
+import game2048 from "./games/game2048/game";
+import rect from "./games/game-rect/game";
+import floodFill from "./games/game-flood-fill/game";
+const canvas = document.createElement("canvas");
+const attachMethods = (fn) => (config) =>
+  Object.assign(fn(Object.assign(config, { canvas })), {
+    pause() {
+      this.scene.scenes.forEach((scene) => {
+        scene.scene.pause();
+      });
+    },
+    resume() {
+      this.scene.scenes.forEach((scene) => {
+        scene.scene.resume();
+      });
+    },
+    dispose() {
+      for (const key in this.scene.keys) {
+        if (this.scene.keys.hasOwnProperty(key)) {
+          this.scene.stop(key); //停止渲染
+          this.scene.keys[key] = undefined;
+        }
+      }
+    },
+  });
+const games = Object.entries({
+  ballMove,
+  flappyBird,
+  game2048,
+  rect,
+  floodFill,
+})
+  .map(([name, fn]) => ({ [name]: attachMethods(fn) }))
+  .reduce((acc, nxt) => Object.assign(acc, nxt), {});
+
+export default games;