javascript - 我无法在 Phaser 3 中加载 PC 上的图像

Question

所以我目前正在使用 Phaser 为学校项目编写游戏。我对 Phaser 很陌生，而且对 JavaScript 几乎一无所知。我在网上查找了很多可能的修复方法，但似乎没有一个对我有用。我附上了我的代码，以防我遗漏了什么。当我将图像目录更改为图像链接时，它工作得很好，但我的电脑上的任何图像都不会加载。

var gameState = {}

function preload() {
  this.load.image('monkey', 'https://vignette.wikia.nocookie.net/jungle-thick/images/0/0c/Monky.png/revision/latest?cb=20190826180942');
  this.load.image('full', 'C:/Users/Public/Trash Monkey/Trash Monkey Website/Assets/Images')
  ;
}

function create() {
  var style = {
    fill: '#FFF',
    font: 'Bold 32px Arial'
  }



  gameState.cursors = this.input.keyboard.createCursorKeys();
  gameState.menuBox = this.add.rectangle(200, 250, 150, 80, 0xB5CF16);
  gameState.menu = this.add.text(147.5, 231, 'START', style);

  gameState.menuBox.setInteractive();

  gameState.menuBox.on('pointerup', function() {
    gameState.menuBox.x = 600
    gameState.menu.x = 600
    if(gameState.randomizer == 0) {
      gameState.monkey.x = 200;
      gameState.monkey.y = 0;
    }
    });
      gameState.randomizer = Math.floor(Math.random());
      if(gameState.randomizer == 0) {
        gameState.monkey = this.add.sprite(2000, 0, 'monkey');
        }
    gameState.fullHealth = this.add.sprite(300, 37.5, 'full');
}

function update() {
  if(gameState.randomizer == 0) {
    gameState.monkey.y += 3;
    if (gameState.cursors.right.isDown) {
      gameState.monkey.x = 300;
    }
    if (gameState.cursors.left.isDown) {
      gameState.monkey.x = 100;
    }
    if (gameState.cursors.up.isDown) {
      gameState.monkey.x = 200;
  }
    if (gameState.cursors.down.isDown) {
      gameState.monkey.y += 15;
  }
    if (gameState.monkey.y >= 500) {
      gameState.monkey.y = 0;
  }
  }
}

var config = {
    type: Phaser.AUTO,
    width: 400,
  height: 500,
  backgroundColor: "#2191E8",
  parent: 'my-game',
  scene: {
    preload,
    create,
    update
    }
}

var game = new Phaser.Game(config);

Answer 1

你需要调整你的发展方式。问题的关键在于，您正尝试通过浏览器的 JavaScript 上下文在本地计算机上加载文件，但由于安全隐患，这显然是不允许的。

参见:

• Access to local files only work with local HTML file

解决方案是使用静态服务器(例如 Apache、NGINX、node.js 等)为您的项目提供服务。哪一个并不重要。您不需要复杂的解决方案。您只需要一些能够在本地计算机上为您的工作服务的东西，这样您就可以很好地解决浏览器的安全问题。

处理使用静态服务器的需求的最直接方法是使用集成开发环境 (IDE)，因为许多人都会为您执行此操作。同样，哪一个并不重要，只要它能满足您的内容即可。 Eclipse和 Netbeans两者都有静态项目的项目模板，并且相当容易设置。 VSCode有一个 Live Server 扩展，让您只需右键单击即可提供文件夹服务。