Question

我正在使用Phaser框架以JavaScript制作射箭游戏。到目前为止，我已经知道了箭头的位置并击中了目标，但是如果您想再次发射箭头，则必须重新加载页面。我如何使它可以拍摄多次？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>TSA Video Game</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/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,
        physics: {
            default: 'arcade'
        },
        scene: {
            preload: preload,
            create: create,
            update: update,
            render: render
        }
    };

    //Start the game
    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.image('sky', 'assets/sky.png');
        this.load.image('archer', 'assets/archer.png');
        this.load.image('target', 'assets/target.png');
        this.load.image('ground', 'assets/ground.png');
        this.load.image('rings', 'assets/rings.png');
        this.load.image('arrow', 'assets/arrow.png');

    }

    function create ()
    {   
        //Load all the images
        this.add.image(400, 300, 'sky');
        this.add.image(200, 200, 'ground');
        this.add.image(530, 365, 'target');
        this.add.image(300, 100, 'rings');

        //Create the archer/player
        this.player = this.physics.add.sprite(100, 410, 'archer');
        //Create the arrow to shoot
        this.arrow = this.physics.add.sprite(100, 430, 'arrow');

        //Get keypresses
        this.cursors = this.input.keyboard.createCursorKeys();
        //Assign input for spacebar
        this.spacebar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

    }

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

        //Move the player left or right
        if (this.cursors.right.isDown) 
        this.player.setVelocityX(moveAmt);
        if (this.cursors.left.isDown)
        this.player.setVelocityX(-moveAmt);

        //Rotation of the player
        if (this.cursors.up.isDown && this.player.angle > -45) {
            this.player.angle -= 1;}
        if (this.cursors.down.isDown && this.player.angle < 0) {
            this.player.angle += 1;}

        //Shooting with the spacebar
        if (Phaser.Input.Keyboard.JustDown(this.spacebar)) {
            this.arrow.setVelocityX(moveAmt);
            this.arrow.setVelocityY(moveYamt);
        }

        //Stop the arrow once it hits the bullseye
        if (this.arrow.x > 480) {
            this.arrow.x = 480;
            this.arrow.setVelocityX(0);
            this.arrow.setVelocityY(0);
        }

    }

    function render() {
    }

</script>
</body>
</html>

我尝试创建三个箭头，然后在“ if（Phaser.Keyboard.Justdown”语句中嵌套另一个if语句，但这没用。

Answer 1

您需要能够创建箭头数组。

这是一个快速入门的例子：

在您的create()函数中

this.arrows = []; //创建数组

后来：

if (Phaser.Input.Keyboard.JustDown(this.spacebar)) {
  let arrow = this.physics.add.sprite(100, 430, 'arrow'); // Create a new arrow
  arrow.setVelocityX(moveAmt); // get it moving
  arrow.setVelocityY(moveYamt);
  this.arrows.push(arrow); // save it in the array
}

是的，您需要更多代码，但这应该有所帮助。

然后，您需要在运动中的箭头之间循环并更新每个箭头

如何使我的Phaser游戏拍摄多个箭头？

1 个答案: