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

标签 javascript html sprite game-physics sprite-sheet

我正在尝试从var武器中制造一颗“子弹”朝某个方向射击,这颗子弹实际上是一个神奇宝贝球,因为我只是在做练习游戏。

我似乎无法让“子弹”朝我想要的方向前进,我输入:weapon.body.velocity.x = -100;下:if (cursors.left.isDown) 但这不起作用,当我按任意键时,屏幕就会卡住。

请帮我让‘子弹’朝我想要的方向飞去。

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>

最佳答案

尝试改变

weapon.trackSprite(player, 30, 0);

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

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

编辑:您当前没有对 Sprite 进行任何旋转,因此请更改检查玩家是否改变 Sprite 方向的 Angular :

    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;
    }

这也会旋转你的玩家 Sprite ,所以也许这不是你想要的。

关于javascript - 如何让武器 'bullet'朝某个方向移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45621415/

相关文章:

javascript - 跨多个元素对 jQuery 事件/操作进行排队

javascript - underscore.js : _. where() 适用于第一个参数,但不适用于第二个参数

javascript - jQuery </div> 标签导致 NS_ERROR_XPC_BAD_CONVERT_JS

javascript - 在我的情况下如何强制 ipad 进入横向模式

javascript - CSS - 如何将 div 相对于定位为封面的背景图像居中

android - 在android帮助中翻转位图?

javascript - 使用 RegEx 替换 Body html 中的数字

html - 折叠的导航按钮不会在 Bootstrap 中展开

java - 如何将图像拆分为多个较小的图像

c++ - SFML:如何解决在 sfml 中旋转 Sprite 时 Sprite 质量下降的问题