Phaser.js报错：Cannot read property 'add' of undefined，game.state.add()异常

嘿，我太懂这种报错的烦躁了！你碰到的这个Uncaught TypeError，核心原因就是你调用game.state.add()的时候，game这个Phaser核心对象根本没被正确初始化——相当于你想给一辆还没造出来的车装轮子，肯定会报错嘛。

先看看你给出的代码片段，里面处理了socket连接、屏幕尺寸设置，但完全没看到创建Phaser.Game实例的代码，这就是问题的关键！咱们一步步来修复：

第一步：先初始化Phaser.Game对象 #

Phaser的所有游戏操作都依赖这个核心实例，必须在调用任何game.xxxAPI之前创建它。比如：

// 优先创建Phaser.Game实例，这是游戏的基础！
var game = new Phaser.Game(
    window.innerWidth, // 用你设置的canvas_width也可以
    window.innerHeight,
    Phaser.AUTO, // 自动选择Canvas或WebGL渲染
    'game-container', // 可选：挂载到页面上的DOM元素ID
    { preload: preload, create: create, update: update } // 初始状态的回调（可选）
);

// 再处理你的socket逻辑
var socket;
socket = io.connect();

// 现在game对象已经存在，就可以正常调用state.add了
game.state.add('MainGame', MainGameState);
game.state.start('MainGame');

// 示例游戏状态对象
var MainGameState = {
    preload: function() {
        // 这里预加载游戏资源，比如图片、音频
    },
    create: function() {
        // 初始化游戏场景元素
    },
    update: function() {
        // 每帧更新游戏逻辑
    }
};

还要注意这几个常见坑点 #

• 代码顺序不能乱：一定要先创建game实例，再处理socket、调用game.state.add这类方法。很多人会把socket或其他逻辑写在前面，导致game还没初始化就被调用。
• 作用域要对：如果game变量是在某个函数内部定义的（比如init()函数里），那在全局作用域或者其他函数里调用game.state.add就会找不到它。要确保game在你需要调用它的作用域里是可访问的——要么设为全局变量，要么通过闭包传递。
• 检查Phaser版本：如果你用的是Phaser 3，那game.state这个API已经被移除了！Phaser 3改用Scene系统，写法完全不同。比如Phaser 3的基础初始化是这样的：

  var config = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      scene: { preload: preload, create: create, update: update }
  };
  var game = new Phaser.Game(config);
  

按照上面的步骤调整后，应该就能解决这个报错了～

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