Пули не будут стрелять из ствола

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