遵循Phaser3官方教程开发时游戏图片无法加载该如何解决？

问题根源 #

你遇到的问题有两个核心原因：

1. Phaser版本API混用
   你现在用的是Phaser 3版本，但代码末尾加了两行只有Phaser 2才支持的状态管理代码，这会导致你在config里配置的scene场景无法正常初始化，资源预加载逻辑不会执行，自然加载不了图片。
2. 本地文件跨域限制
   直接双击打开本地HTML文件运行时，浏览器出于安全限制会禁止加载本地静态资源，哪怕路径完全正确也会报资源加载失败。

解决步骤 #

• 第一步：删除main.js末尾两行冗余代码：

game.state.add('GameState',GameState);
game.state.start('GameState')

删除后Phaser会自动按照你config里配置的scene生命周期执行preload、create逻辑。

• 第二步：使用本地静态服务启动项目，不要直接打开本地HTML文件，以下方案任选其一即可：
  • 用VS Code开发的话，安装「Live Server」插件，右键index.html选择「Open with Live Server」
  • 安装了Node.js的话，在项目根目录执行npx serve
  • 安装了Python3的话，在项目根目录执行python -m http.server，之后访问http://localhost:8000即可
• 第三步：确认assets文件夹下的图片文件名和你代码中引用的名称完全一致，注意大小写（部分操作系统路径大小写敏感，名称不匹配会加载失败）。

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