图像不动（第 3 阶段）答案

【问题标题】：Images doesn't move (Phaser 3)图像不动（第 3 阶段）
【发布时间】：2022-09-25 03:19:13
【问题描述】：

我一直在关注有关如何使用 Phaser 3 (https://www.youtube.com/watch?v=jVlNZgX5fV8&list=PLDyH9Tk5ZdFzEu_izyqgPFtHJJXkc79no&index=4) 的 YouTube 教程，但我无法移动我的图像。我复制了他的代码，但我得到的唯一结果是静态图像和 DevTools 控制台上关于 AudioContext 的警告/通知（参考自动播放策略）。

class Scene2 extends Phaser.Scene {
    constructor() {
        super(\"playGame\");
    }

    create() {
        // 4.1 make the background a tile sprite
        //this.background = this.add.image(0, 0, \"background\");
        this.background = this.add.tileSprite(0, 0, config.width, config.height, \"background\");
        this.background.setOrigin(0, 0);

        this.ship1 = this.add.image(config.width / 2 - 50, config.height / 2, \"ship\");
        this.ship2 = this.add.image(config.width / 2, config.height / 2, \"ship2\");
        this.ship3 = this.add.image(config.width / 2 + 50, config.height / 2, \"ship3\");

        this.add.text(20, 20, \"Playing game\", {
            font: \"25px Arial\",
            fill: \"yellow\"
        });

    }

    // 0 add the update function
    update() {

        // 1.1 call a function to move the ships vertically
        this.moveShip(this.ship1, 1);
        this.moveShip(this.ship2, 2);
        this.moveShip(this.ship3, 3);

        // 4.2 scroll the background
        this.background.tilePositionY -= 0.5;

    }

    // 1.2 create the function to move the ships
    moveShip(ship, speed) {
        // increase the position of the ship on the vertical axis
        ship.y += speed;
        // if the ship hits the bottom of the screen call the reset function
        if (ship.y > config.height) {
            // 2.1 call a reset position function
            this.resetShipPos(ship);
        }
    }

    // 2.2 create the reset position function
    resetShipPos(ship) {
        // put the ship on the top
        ship.y = 0;
        // put the ship on a random position on the x axis
        var randomX = Phaser.Math.Between(0, config.width);
        ship.x = randomX;
    }
}

标签： javascript phaser-framework

【解决方案1】：

那么'音频'警告，你忽略。（详情请咨询this article）.但是为什么你的代码不能工作还不是很清楚，因为正如你所看到的，在这个演示中，你的代码工作了。

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create,
        update,
        extend:{
          moveShip,
          resetShipPos
        }
    },
    banner: false
}; 

function moveShip(ship, speed){
    ship.y += speed;
    if (ship.y > config.height) {
        this.resetShipPos(ship);
    }
}

function create () {

        this.ship1 = this.add.image(config.width / 2 - 50, config.height / 2, "ship");
        this.ship2 = this.add.image(config.width / 2, config.height / 2, "ship2");
        this.ship3 = this.add.image(config.width / 2 + 50, config.height / 2, "ship3");

        this.add.text(20, 20, "Playing game", {
            font: "25px Arial",
            fill: "yellow"
        });
}

function update(){
    this.moveShip(this.ship1, 1);
    this.moveShip(this.ship2, 2);
    this.moveShip(this.ship3, 3);
}

function resetShipPos(ship) {
    ship.y = 0;
    var randomX = Phaser.Math.Between(0, config.width);
    ship.x = randomX;
}

new Phaser.Game(config);

&lt;script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"&gt;&lt;/script&gt;

信息：如果您在没有网络服务器的情况下运行移相器应用程序，那么您将遇到 CORS 问题。阅读this article 了解详细信息和可能的解决方案。

【讨论】：

但这就是为什么我不明白；如果我在 VS 代码中调试，它会在没有图像的情况下运行（由于 CORS 策略）。我尝试使用 wamp 服务器，它加载图像但它不显示动画（我一直遇到的问题）。另外，抱歉缺少细节，这是我第一次使用stackoverflow，感谢您的回答：D
@RickPedroza 没问题，感谢您的反馈。除了自动播放警告之外，我还有一个问题，还有其他错误吗？不移动的动画图像通常是一些错误的迹象，或者可能是网页缓存在浏览器中，您可以尝试清除浏览器缓存。
好的，显然 Stackoverflow 隐藏了我的答案，但我遇到的另一个错误是当我通过 VS Code 进行调试时；它显示了 CORS 政策问题
@RickPedroza 是使用浏览器中的网络服务器 URL 还是本地文件的 VScode？取决于您如何设置 VSCode 进行调试，它可能会导致 CORS 错误，但如果没有更多信息，这很难说，而且我对 VSCode 了解不多。我会发布一个新问题，带有这个特定的问题和 vscode 标签。
不，我只是正常运行它；我尝试使用网络服务器，但是发生了错误。