子弹不会射出枪管

Question

我正在开发一款射击游戏，但子弹位置有问题（现在居中）。如何更改此图像上的项目符号位置（+旋转）：.

我的例子（https://jsfiddle.net/60kvpx7s/，控制：鼠标，左键射击）：

var ctx = game.getContext('2d');
var sprite = new Image;
sprite.src = "https://opengameart.org/sites/default/files/styles/medium/public/preview_idle.gif";
var player = {
  x: game.width / 2 - 250 / 2,
  y: game.height / 2 - 213 / 2,
  width: 250,
  height: 213,
  rotation: 0,
  vx: 0,
  vy: 0
};
var mouse = {x: 0, y: 0};
var angle = 0;
var bullets = [];

setInterval(function() {
  // bullets update
  for (var a = 0; a < bullets.length; a++) {
    var bullet = bullets[a];

    bullet.x += bullet.vx;
    bullet.y += bullet.vy;
  }
  // player update (rotate)
  angle = Math.atan2(mouse.y - (player.y + player.height / 2), mouse.x - (player.x + player.width / 2));
  player.rotation = angle * (180 / Math.PI);

  // draw
  ctx.clearRect(0, 0, game.width, game.height);

  // draw player (+rotate)
  ctx.save();
  ctx.translate(player.x + player.width / 2, player.y + player.height / 2);
  ctx.rotate(player.rotation * Math.PI / 180);
  ctx.drawImage(sprite, -player.width / 2, -player.height / 2, player.width, player.height);
  ctx.restore();

  // draw bullets
  for (var e = 0; e < bullets.length; e++) {
    var bullet = bullets[e];

    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
  }
}, 1000 / 60);

window.addEventListener("mousemove", function(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
});

window.addEventListener("mousedown", function(e) {
  bullets.push({
    width: 25,
    height: 25,
    x: player.x + player.width / 2 + (50 * Math.cos(angle)),
    y: player.y + player.height / 2 + (50 * Math.sin(angle)),
    vx: Math.cos(angle) * 7 + player.vx,
    vy: Math.sin(angle) * 7 + player.vy,
  });
});

<canvas id="game" width="640" height="480" style="border:1px solid;">

有人可以解释为什么会发生这种情况以及我该如何解决这个问题。提前致谢！

更新： https://jsfiddle.net/60kvpx7s/9/

Answer 1

您需要添加一些“偏移量”（即在您的 bullets.push 上）以从正确的位置开始：

这是我试图把它放在正确的地方，我也把你的子弹改成了圆圈。

var ctx = game.getContext('2d');
var sprite = new Image;
sprite.src = "https://opengameart.org/sites/default/files/styles/medium/public/preview_idle.gif";
var player = {
  x: game.width / 2 - 250 / 2,
  y: game.height / 2 - 213 / 2,
  width: 250, height: 213,
  rotation: 0, vx: 0, vy: 0
};
var mouse = {x: 0, y: 0};
var angle = 0;
var bullets = [];

window.addEventListener("mousedown", function(e) {
  bullets.push({
    radi: 3,
    x: player.x + player.width / 2 - 5 / 2 + (100 * Math.cos(angle+0.5)),
    y: player.y + player.height / 2 - 5 / 2 + (100 * Math.sin(angle+0.5)),
    vx: Math.cos(angle) * 7 + player.vx,
    vy: Math.sin(angle) * 7 + player.vy,
  });
});

setInterval(function() {
  // bullets update
  for (var a = 0; a < bullets.length; a++) {
    var bullet = bullets[a];

    bullet.x += bullet.vx;
    bullet.y += bullet.vy;
  }
  // player update (rotate)
  angle = Math.atan2(mouse.y - (player.y + player.height / 2), mouse.x - (player.x + player.width / 2));
  player.rotation = angle * (180 / Math.PI);

  // draw
  ctx.clearRect(0, 0, game.width, game.height);

  // draw player (+rotate)
  ctx.save();
  ctx.translate(player.x + player.width / 2, player.y + player.height / 2);
  ctx.rotate(player.rotation * Math.PI / 180);
  ctx.drawImage(sprite, -player.width / 2, -player.height / 2, player.width, player.height);
  ctx.restore();

  // draw bullets
  for (var e = 0; e < bullets.length; e++) {
    var bullet = bullets[e];
    ctx.beginPath();
    ctx.arc(bullet.x, bullet.y, bullet.radi, 0, 2 * Math.PI);
    ctx.fill();
  }
}, 1000 / 60);

window.addEventListener("mousemove", function(e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
});

<canvas id="game" width="640" height="480" style="border:1px solid;">