如何在 Phaser 3 中将一组对象移动相同的距离？

Question

我有一款 Phaser 游戏。当游戏中的箭被发射时，它被推到一个数组中。箭射中目标，目标在下一支箭射出前退回。如果这样说不通，已经贴在目标上的箭，需要随着目标移动。

我试过只移动数组的 x 值，并尝试遍历数组。我也试过只移动 this.arrows 变量。

代码

function update ()
{   
    //Declare constants for movement
    const arrowMoveAmt = 1500;
    this.player.setDrag(2000);

    //Rotation of the player
    if (this.cursors.up.isDown && this.player.angle > -45) {
        this.player.angle -= angleModifier;}

    if (this.cursors.down.isDown && this.player.angle < 0) {
        this.player.angle += angleModifier;}

    //Shooting with the spacebar
    if (Phaser.Input.Keyboard.JustDown(this.spacebar)) {

        //Animate the shooting
        this.player.anims.play('shoot', true);

        //Arrow shooting
        let arrow = this.physics.add.sprite(this.player.x, (this.player.y + 20), 'arrow');

        //Make sure the arrow has a hitbox
        arrow.enableBody = true;
        //Let the arrow move
        arrow.body.immovable = false;
        //Edit arrow hitbox 
        arrow.setSize(50, 15).setOffset(5, 50);

        arrow.setGravityY(3600); //Gravity will affect the arrows
        //Arrow speeds
        arrow.setVelocityX(arrowMoveAmt);
        arrow.setVelocityY((this.player.angle * 50));

        this.arrows.push(arrow); //Add arrow to the array created earlier

        this.arrowSound.play(); //Play the sound

        //Reset the angle modifier for added difficulty
        angleModifier = (Math.random() + .1) * 2;
    }

    else if(target.body.touching.left) {

        //Variable for loop
        let i = 0;

        //Set initial position of new medals
        let firstMedalX = 180;

        //Loop to create multiple arrows
        while (i < this.arrows.length) {
            newArrows = this.arrows[i];
            newArrows.setGravityY(0);
            newArrows.setVelocityX(0);
            newArrows.setVelocityY(0);

            //Add 30 to the new medal's x position
            firstMedalX += 40;

            //Increment for every arrow shot
            i++;

            //Reset the player angle for difficulty
            this.player.angle = 0;

            //Move the target
            var x = target.x;
            target.x += 10;
            var x2 = target.x;
            var arrowMove = x2 - x;
            newArrows.x = newArrows.x + arrowMove;

            console.log("Target X = " + target.x);
            console.log("Arrows X = " + newArrows.x);

        }

        //Call the function to determine medal and pass the variable
        if(this.arrows.length <= 5) {
            //Only track the first five arrows
            getMedal(firstMedalX);
        }
    }

    //Function to decide medal, and where it goes
    getMedal = (value) => {
        //Gold medal
        if (410 < newArrows.y && newArrows.y < 435) {
            this.add.image(value, 175, 'gold_medal');
            score += 5;
        }
        //Silver medal
        else if (395 < newArrows.y && newArrows.y < 450) {
            this.add.image(value, 175, 'silver_medal');
            score += 3;
        }
        //Bronze medal
        else if (380 < newArrows.y && newArrows.y < 460) {
            this.add.image(value, 175, 'bronze_medal');
            score += 1;
        }
        else {
            this.add.image(value, 175, 'no_medal');
        }
        //Set the scoreboard to the new score
        scoreBoard.setText('SCORE: ' + score);
    }
}

Answer 1

我找到了解决方案：

首先，从while循环中删除以下代码块。

//Move the target
var x = target.x;
target.x += 10;
var x2 = target.x;
var arrowMove = x2 - x;
newArrows.x = newArrows.x + arrowMove;

console.log("Target X = " + target.x);
console.log("Arrows X = " + newArrows.x);

第二个，在while[=37中添加这一行newArrows.x += 10; =] 在 this.player.angle = 0 行之后循环。

Third，在 while 循环的右括号之后，添加此代码：

//Move the target target.x += 10;

update()方法的完整代码片段供您参考：

function update () { //Declare constants for movement const arrowMoveAmt = 1500; this.player.setDrag(2000); //Rotation of the player if (this.cursors.up.isDown && this.player.angle > -45) { this.player.angle -= angleModifier;} if (this.cursors.down.isDown && this.player.angle < 0) { this.player.angle += angleModifier;} //Shooting with the spacebar if (Phaser.Input.Keyboard.JustDown(this.spacebar)) { //Animate the shooting this.player.anims.play('shoot', true); //Arrow shooting let arrow = this.physics.add.sprite(this.player.x, (this.player.y + 20), 'arrow'); //Make sure the arrow has a hitbox arrow.enableBody = true; //Let the arrow move arrow.body.immovable = false; //Edit arrow hitbox arrow.setSize(50, 15).setOffset(5, 50); arrow.setGravityY(3600); //Gravity will affect the arrows //Arrow speeds arrow.setVelocityX(arrowMoveAmt); arrow.setVelocityY((this.player.angle * 50)); this.arrows.push(arrow); //Add arrow to the array created earlier this.arrowSound.play(); //Play the sound //Reset the angle modifier for added difficulty angleModifier = (Math.random() + .1) * 2; } else if(target.body.touching.left) { //Variable for loop let i = 0; //Set initial position of new medals let firstMedalX = 180; //Loop to create multiple arrows while (i < this.arrows.length) { newArrows = this.arrows[i]; newArrows.setGravityY(0); newArrows.setVelocityX(0); newArrows.setVelocityY(0); //Add 30 to the new medal's x position firstMedalX += 40; //Increment for every arrow shot i++; //Reset the player angle for difficulty this.player.angle = 0; // Move the arrows newArrows.x += 10 } //Move the target target.x += 10; //Call the function to determine medal and pass the variable if(this.arrows.length <= 5) { //Only track the first five arrows getMedal(firstMedalX); } } //Function to decide medal, and where it goes getMedal = (value) => { //Gold medal if (410 < newArrows.y && newArrows.y < 435) { this.add.image(value, 175, 'gold_medal'); score += 5; } //Silver medal else if (395 < newArrows.y && newArrows.y < 450) { this.add.image(value, 175, 'silver_medal'); score += 3; } //Bronze medal else if (380 < newArrows.y && newArrows.y < 460) { this.add.image(value, 175, 'bronze_medal'); score += 1; } else { this.add.image(value, 175, 'no_medal'); } //Set the scoreboard to the new score scoreBoard.setText('SCORE: ' + score); } }

如何在 Phaser 3 中将一组对象移动相同的距离？

How to move an array of objects the same distance in Phaser 3?

javascript

arrays

game-physics

phaser-framework