如何让武器 'bullet' 朝某个方向移动

Question

我正在尝试用 var 武器 向某个方向发射 'bullet'，这颗子弹实际上是一个神奇宝贝球，因为我只是在练习游戏。

我似乎无法让 'bullet' 朝着我想要的方向前进，我在 if (cursors.left.isDown) 下输入：weapon.body.velocity.x = -100; 但这没有用，当我按下任何键时，屏幕就会冻结。

请帮我'bullet'往我想要的方向走

var items;
var game;
var player;
var weapon;
var cursors;
var fireButton;


function addItems() {
  items = game.add.physicsGroup();
  createItem(100, 400, 'coin');
}

function createItem(left, top, image) {
  var item = items.create(left, top, image);
  item.animations.add('spin');
  item.animations.play('spin', 10, true);
}

function itemHandler(player, item) {
  item.kill();

}


window.onload = function () {
  game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

  function preload() {

    game.stage.backgroundColor = ('#424242');

    game.load.spritesheet('coin', 'coin.png', 36, 44);
    game.load.spritesheet('player', 'hero.png', 64, 64);
    game.load.spritesheet('bullet', 'Pokeball.png');


  }


  function create() {

        player = this.game.add.sprite(100, 200, 'player');
    // ANIMATION FOR PLAYER CONTROLS
        down = player.animations.add('down', [0,1,2,3], 10, true);
        left = player.animations.add('left', [4,5,6,7], 10, true);
        right = player.animations.add('right', [8,9,10,11], 10, true);
        up = player.animations.add('up', [12,13,14,15], 10, true);

        // enable physics in the game (can't go through walls, gravity, etc.)

        game.physics.enable(player, Phaser.Physics.ARCADE);
        game.physics.startSystem(Phaser.Physics.P2JS);
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.physics.p2.enable(player);


        player.body.setSize(30, 45, 16, 12);
        player.body.immovable = false;
        // enable keyboard arrows for controls
        cursors = game.input.keyboard.createCursorKeys();
        // camera will follow the character
        game.camera.follow(player);

        addItems();


        //  Creates 1 single bullet, using the 'bullet' graphic
        weapon = game.add.weapon(1, 'bullet');

        //  The bullet will be automatically killed when it leaves the world bounds
        weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;

        //  Because our bullet is drawn facing up, we need to offset its rotation:


        //  The speed at which the bullet is fired
        weapon.bulletSpeed = 400;



        game.physics.arcade.enable(player);

        //  Tell the Weapon to track the 'player' Sprite, offset by 14px horizontally, 0 vertically
        weapon.trackSprite(player, 30, 0);

        cursors = this.input.keyboard.createCursorKeys();

        fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);

  }

  function update() {

        game.physics.arcade.overlap(player, items, itemHandler);

    // PLAYER CONTROLS
        player.body.velocity.set(0);
        // player presses left key
        if (cursors.left.isDown)
        {
            player.body.velocity.x = -100;
            player.play('left');
        }
        // player presses right key
        else if (cursors.right.isDown)
        {
            player.body.velocity.x = 100;
            player.play('right');
        }
        // player presses up key
        else if (cursors.up.isDown)
        {
            player.body.velocity.y = -100;
            player.play('up');
        }
        // player presses down key
        else if (cursors.down.isDown)
        {
            player.body.velocity.y = 100;
            player.play('down');
        }
        // player does not press anything
        else
        {
            player.animations.stop();
        }

        if (fireButton.isDown)
        {
          weapon.fire();
        }

  }

  function render() {

    weapon.debug();

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.18.1/phaser.js"></script>
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Simple Canvas Game</title>
    <style>
      html {
        background: black
      }
      canvas {
        margin: auto;
      }
    </style>
 </head>
 <body>
    <script src="phaser.js"></script>
  <script src="game.js"></script>
 </body>
</html>

Answer 1

尝试更改

weapon.trackSprite(player, 30, 0);

至

weapon.trackSprite(player, 30, 0, true);

Phaser 的文档说，如果您将 true 作为第四个参数传递，那么它将跟随精灵的旋转。

编辑：您目前没有对您的精灵进行任何旋转，因此请更改您检查玩家改变精灵方向的角度：

    if (cursors.left.isDown)
    {
        player.angle = 180;
    }
    else if (cursors.right.isDown)
    {
        player.angle = -90;
    }
    else if (cursors.up.isDown)
    {
        player.angle = 90;
    }
    // player presses down key
    else if (cursors.down.isDown)
    {
        player.angle = 0;
    }

这也会旋转你的玩家精灵，所以这可能不是你想要的。

如何让武器 'bullet' 朝某个方向移动

How to make weapon 'bullet' go a certain direction

html

javascript

sprite

sprite-sheet

game-physics