无法使用kaboomjs在replit之外加载精灵答案

【问题标题】：cannot load sprites outside of replit using kaboomjs无法使用kaboomjs在replit之外加载精灵
【发布时间】：2021-09-10 07:20:37
【问题描述】：

过去几天我一直在使用 kaboomjs 库开发一个有趣的小游戏，当我从 replit 编写和运行它时它按预期工作，但是如果我尝试在 vs 代码中使用实时服务器运行它我不断得到

   failed to load ~/Desktop/Javascript/kaboom/sprites/baddie.kbmsprite
   Bt@https://kaboomjs.com/lib/0.5.0/kaboom.js:56:3338
   @http://127.0.0.1:5500/game.js:12:18
   J@https://kaboomjs.com/lib/0.5.0/kaboom.js:55:14756
   je/<@https://kaboomjs.com/lib/0.5.0/kaboom.js:56:396
   H/O<@https://kaboomjs.com/lib/0.5.0/kaboom.js:55:3425

这是我正在使用的代码如何加载精灵的示例：

kaboom({
  global: true,
  fullscreen: true,
  scale: 1,
  debug: true,
  clearColor: [0, 0, 0, 0.75],
});
loadRoot("~/Desktop/Javascript/kaboom/sprites/");
loadSprite("baddie", "baddie.kbmsprite");

scene("main", () => {
  const b = add([sprite("baddie"), pos(80,80)]);
});

start("main", 0);

它只是在 HTML 文件的正文中调用

...
<body>
    <script src="https://kaboomjs.com/lib/0.5.0/kaboom.js"></script>
    <script src="game.js"></script>
  </body>
</html>

我仍在研究 JS，因此非常感谢任何帮助或指导！

【问题讨论】：

标签： javascript html game-development kaboom

【解决方案1】：

您可以尝试在您的 sprite 末尾添加扩展名（即 .png）吗？

我正在使用带有 vs 代码的 Wamp64，今晚我将测试它是否适用于没有扩展的我。

【讨论】：

我尝试将其转换为 .png 并尝试从 imgur 网址加载，但没有成功。 .kbmsprite 是在 repli 时从 Kaboom 的 sprite 构建器导出的文件类型。
你能在 replit 上链接你的项目吗？我会尝试复制它
我用 png 在实时服务器中测试了你的代码，它工作正常，我认为你的 loadRoot 有问题。在 VS Code 中右键单击您的图像，然后单击“复制相对路径”并将其添加到您的 loadSprite 中。您需要将破折号从 \ 更改为 /，它应该可以工作。

【解决方案2】：

直接打开index.html，live server给我报错

【讨论】：

这对我有用。非常感谢！

【解决方案3】：

<script src="https://unpkg.com/kaboom@2000.0.0-beta.24/dist/kaboom.js"></script>

在 HEAD 标签中使用这个脚本。在精灵上使用 .png 文件。您的精灵会出现一些错误。但最简单的方法是打开 REPLİT kaboom-ligth 版本并将其直接复制到您的 VScode。

【讨论】：

【解决方案4】：

如果您在 Google Chrome 中使用广告拦截器扩展程序，请尝试将其关闭。虽然 uBlock Origins 在后台阻止 javascript 代码，但它也可能阻止 Kaboom.js。我通过关闭 uBlock Origins 解决了这个问题。

【讨论】：