我无法在 Phaser 3 中从我的 PC 加载图像

Question

所以我目前正在使用 Phaser 为学校项目编写游戏。我对 Phaser 很陌生，我几乎不知道 JavaScript。我在网上查找了很多可能的修复方法，但 none 似乎对我有用。我附上了我的代码以防我遗漏了什么。当我将图像的目录更改为图像 link 时，它工作正常，但我的 PC 中的任何图像都不会加载。

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 上下文在本地计算机上加载文件，由于安全隐患，这显然是不允许的。

参见：

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

处理静态服务器需求的最直接方法是使用集成开发环境 (IDE)，因为许多人会为您做这件事。同样，只要它能为您的内容提供服务，哪个并不重要。 Eclipse and Netbeans both have project templates for static projects and are fairly easy to set up. VSCode 有一个 Live Server 扩展，让您只需右键单击即可提供文件夹。

我无法在 Phaser 3 中从我的 PC 加载图像

I cannot load images from my PC in Phaser 3

javascript

phaser-framework