qmgame/Game.vue

<template>
  <div id="gameContainer" :style="containerStyle"></div>
</template>
<script>
import ballMove from "./games/game-ballmove/game";
const games = { ballMove };
const STATE_RUNNING = 0;
const STATE_LOSE = 1;
const STATE_WIN = 2;
const STATE_PAUSED = 3;
export default {
  props: ["name", "containerStyle"],
  data() {
    return {
      state: STATE_RUNNING,
      gameInstance: null,
      containerId: "gameContainer",
    };
  },
  methods: {
    pause() {
      this.gameInstance.scene.scenes.forEach((scene) => {
        scene.scene.pause();
      });
      this.state = STATE_PAUSED;
      this.$emit("paused");
    },
    resume() {
      if (this.state === STATE_PAUSED) {
        this.gameInstance.scene.scenes.forEach((scene) => {
          scene.scene.resume();
        });
        this.state = STATE_RUNNING;
        this.$emit("resumed");
      }
    },
    restart() {
      this.gameInstance.restart();
      this.state = STATE_RUNNING;
    },
  },
  async mounted() {
    this.gameInstance = games[this.name]({
      containerId: this.containerId,
      onLose: () => {
        if (this.state !== STATE_LOSE) this.$emit("lost");
        this.state = STATE_LOSE;
      },
    });
  },

  destroyed() {
    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);
  },
};
</script>

<style>
</style>