React集成Phaser+GridEngine后游戏重启报错，求销毁重启方案

错误根源 #

你遇到的两个错误本质是同一问题：销毁游戏时未彻底清理GridEngine插件的注册信息和实例，导致重启时插件Key重复注册，且场景中this.gridEngine未正确初始化。

具体解决步骤 #

1. 完善销毁函数，彻底清理插件

修改你的destroy函数，在销毁游戏实例前，手动移除GridEngine插件的注册并清理场景中的插件实例：

const destroy = () => {
  if (gameRef.current) {
    const gameInstance = gameRef.current.game;
    if (gameInstance) {
      // 从游戏插件管理器中移除GridEngine场景插件
      gameInstance.plugins.removeScenePlugin('GridEngine');
      // 遍历所有场景，清理GridEngine实例
      const scenes = gameInstance.scene.getScenes();
      scenes.forEach(scene => {
        if (scene.gridEngine) {
          // 如果GridEngine提供了destroy方法，调用它做内部清理
          if (typeof scene.gridEngine.destroy === 'function') {
            scene.gridEngine.destroy();
          }
          // 删除场景中的gridEngine引用
          delete scene.gridEngine;
        }
      });
    }
    // 销毁游戏实例
    gameRef.current.destroy();
  }
  setInitialize(false);
}

2. 在场景中添加销毁钩子，清理实例

给你的游戏场景添加destroy方法，确保场景销毁时自身的GridEngine实例被清理：

const scene = {
  preload,
  create,
  update,
  // 场景销毁时的钩子
  destroy() {
    if (this.gridEngine) {
      if (typeof this.gridEngine.destroy === 'function') {
        this.gridEngine.destroy();
      }
      delete this.gridEngine;
    }
  }
}

// 更新游戏配置中的scene字段
const game = {
  width: 800,
  height: 600,
  type: Phaser.AUTO,
  scene: scene,
  plugins: {
    scene: [
      {
        key: 'GridEngine',
        plugin: GridEngine,
        mapping: 'gridEngine'
      },
    ],
  },
}

3. 可选：确保游戏配置每次初始化都是新对象（避免引用残留）

如果上述步骤仍有问题，可以在触发初始化时生成新的游戏配置对象，确保插件配置是全新的：

const handleInitialize = () => {
  // 每次初始化都创建新的游戏配置
  const newGameConfig = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    scene: {
      preload,
      create,
      update,
      destroy() {
        if (this.gridEngine) {
          if (typeof this.gridEngine.destroy === 'function') {
            this.gridEngine.destroy();
          }
          delete this.gridEngine;
        }
      }
    },
    plugins: {
      scene: [
        {
          key: 'GridEngine',
          plugin: GridEngine,
          mapping: 'gridEngine'
        },
      ],
    },
  };
  // 用状态存储新配置，传递给IonPhaser
  setGameConfig(newGameConfig);
  setInitialize(true);
}

最终效果 #

修改后，点击Destroy按钮会彻底清理GridEngine的所有注册和实例，再次点击Initialize时就能正常重新初始化游戏，不会出现插件冲突和实例未定义的错误，满足你在同一页面切换不同游戏或关卡的需求。

内容的提问来源于stack exchange，提问作者Sinan A