javascript - Phaser 3 nenačítá obrazové zdroje

Sleduji tento tutoriál http://phaser.io/tutorials/making-your-first-phaser-3-game/part2 a dostal jsem se až k načítání nebe. Bohužel se však obrázek nebe nenačítá. Abych ověřil, že to není problém s kódem, spustil jsem soubor part3.html, který tutoriál poskytuje, a který by měl načíst nebe od začátku, ale bez úspěchu. Jakákoli pomoc bude velmi oceněna! Děkuji :) Obrázek toho, jak to vypadá v prohlížeči

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 3</title>
    <script src="//cdn.jsdelivr.net/npm/[email /dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="module">

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

    import Phaser from 'phaser';

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.image('sky', 'assets/sky.png');
        this.load.image('ground', 'assets/platform.png');
        this.load.image('star', 'assets/star.png');
        this.load.image('bomb', 'assets/bomb.png');
        this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');
    }

    function update ()
    {
    }

</script>

</body>
</html>

Odpověď č. 1

Upravil jsem tvůj kód, teď můžeš vidět, že tvůj kód funguje dobře :)

Poznámka: Musíte nainstalovat rozšíření Live Server pro VSCode, poté otevřít soubor index.html pomocí rozšíření Live Server a nezapomeňte nastavit soubory s prostředky ve správném adresáři

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Making your first Phaser 3 Game - Part 3</title>
    <script src="//cdn.jsdelivr.net/npm/[email /dist/phaser.js"></script>
    <style type="text/css">
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
          preload: preload,
          create: create,
          update: update,
        },
      };

      var game = new Phaser.Game(config);

      function preload() {
        this.load.image("sky", "assets/sky.png");
        this.load.image("ground", "assets/platform.png");
        this.load.image("star", "assets/star.png");
        this.load.image("bomb", "assets/bomb.png");
        this.load.spritesheet("dude", "assets/dude.png", {
          frameWidth: 32,
          frameHeight: 48,
        });
      }

      function create() {
        this.add.image(400, 300, "sky");
      }

      function update() {}
    </script>
  </body>
</html>