Phaser 3游戏无法加载精灵始终显示绿方块该如何解决

Phaser 显示绿色方块是精灵资源加载失败触发的默认占位逻辑，按以下步骤排查修复即可：

• 先移除重复引入的Phaser库
  你的代码中同时引入了phaser.js和phaser.min.js，二者是同一个库的开发版和压缩版，重复引入可能引发运行冲突，保留其中一个即可，推荐留体积更小的压缩版：

  <!-- 删掉这行 -->
  <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
  <!-- 保留这行 -->
  <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
  

• 补全缺失的父容器
  你的配置项中指定了渲染父容器parent: 'phaser-example'，但页面中没有对应ID的元素，可能引发渲染异常，在<body>标签开头添加对应容器：

  <body>
    <div id="phaser-example"></div>
    <!-- 原有script代码 -->
  </body>
  

• 修正资源路径与静态资源配置
  1. 不要使用本地绝对路径：浏览器有安全限制，禁止网页直接读取本地磁盘的绝对路径（比如C:\xxx\worm.png），所有资源必须通过web服务访问
  2. 把资源路径改成站点绝对路径，避免相对路径随页面路由变化失效：

     // 把相对路径 'assets/worm.png' 改成开头带斜杠的绝对路径
     this.load.image('worm', '/assets/worm.png');
     

  3. 确认你的后端服务（比如Express、Koa）已经把assets文件夹所在的目录配置为静态资源目录，以Express为例：

     // 假设assets放在项目根目录的public文件夹下
     app.use(express.static('public'))
     

• 加错误监听排查问题
  在preload函数中添加资源加载错误监听，打开浏览器F12控制台即可直观看到加载失败的资源地址，方便定位问题：

  function preload ()
  {
      // 资源加载错误监听
      this.load.on('loaderror', (file) => {
          console.log('资源加载失败：', file.key, file.url);
      })
      this.load.image('worm', '/assets/worm.png');
  }
  

补充说明：如果是本地直接打开HTML文件调试，会触发浏览器跨域限制导致资源加载失败，需要用本地服务启动项目，比如用VS Code的Live Server插件，或者执行npx serve命令在项目根目录启动临时web服务。

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