Перемещение треугольного корабля в холст игре на равнине JS

Question

Я пытаюсь переместить треугольник в направлении, на которое повернут треугольник. Когда я нажимаю клавишу, чтобы переместить ее, она не перемещается, но когда я поворачиваю ее, ее центр вращения смещается из-за клавиши, которую я нажал, чтобы переместить ее ранее.

Я попытался проверить формулы, чтобы определить,направление перемещения треугольника, но оно показалось правильным, и точка перемещения для его поворота не перемещается на основе этих формул.

Ожидаемые результаты: при нажатии клавиши со стрелкой вверх треугольник перемещается в направлении угла поворота.

Фактические результаты: при нажатии клавиши со стрелкой вверх треугольник не перемещается в направлении, но если я нажимаю клавишу со стрелкой вверх, то при повороте клавиши со стрелкой влево или вправо треугольник поворачивается в сторону от центра вращения.

Вот мой код:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let ship_width = 20;
let ship_height = 20;
let angle = 0;
let ship_velocity_change = {
  x: 0,
  y: 0
}
//initial center coordinates of triangle
let ship_center = {
  x: 450,
  y: 300
};

let ship_points = [
  //coordinates for vertices of triangle
  {
    x: ship_center.x - ship_width / 2,
    y: ship_center.y +
      ship_height / 2
  },
  {
    x: ship_center.x + ship_width / 2,
    y: ship_center.y +
      ship_height / 2
  },
  {
    x: ship_center.x,
    y: ship_center.y - ship_height / 2
  }
];

function drawRect(x, y, width, height, color) {
  ctx.rect(x, y, width, height);
  ctx.fillStyle = color;
  ctx.fill();
}

//vertices for triangle as parameters
function drawTriangle(bottom_left, bottom_right, top, color) {
  ctx.beginPath();
  ctx.moveTo(top.x, top.y);
  ctx.lineTo(bottom_left.x, bottom_left.y);
  ctx.lineTo(bottom_right.x, bottom_right.y);
  ctx.lineTo(top.x, top.y);
  ctx.strokeStyle = color;
  ctx.stroke();
}

//rotate triangle by an angle in degrees
function rotate(angle) {
  ctx.translate(ship_center.x, ship_center.y);
  ctx.rotate(Math.PI / 180 * angle);
  ctx.translate(-ship_center.x, -ship_center.y);
  drawTriangle(ship_points[2], ship_points[1], ship_points[0],
    "white");
}

document.addEventListener('keydown', function(event) {
  //rate of degree change per 10 milliseconds
  if (event.keyCode === 37) {
    angle = -2;
  } else if (event.keyCode === 38) {
    //move triangle by direction of angle
    ship_center.x += Math.cos(Math.PI / 180 * angle) * 5;
    ship_center.y += Math.sin(Math.PI / 180 * angle) * 5;
  } else if (event.keyCode === 39) {
    angle = 2;
  }
});

document.addEventListener('keyup', function(event) {
  if (event.keyCode === 37 || event.keyCode === 39) {
    angle = 0;
  }
});

function game() {
  drawRect(0, 0, 900, 600, "black");
  rotate(angle);
}

let gameLoop = setInterval(game, 10);

<canvas id="canvas" width="900" height="600"></canvas>

Answer 1

Хорошая попытка! Это одна из тех вещей, которая требует некоторых экспериментов, чтобы получить правильные данные.

Несколько предложений:

• Инкапсулируйте все соответствующие данные и функции для корабля в одном объекте. Это позволяет упорядочить вещи и понять их, упростит логику и значительно уменьшит количество ошибок. Это значительно облегчает управление состоянием объекта и функциями рендеринга.
• Избегайте вызова функций движения корабля непосредственно из функции обратного вызова. Это может привести к прерывистому, непоследовательному поведению при повторном срабатывании клавиатуры. Этот обратный вызов должен просто перевернуть ключевые флаги, а затем позволить циклу событий позаботиться о вызове соответствующих функций на основе этих флагов.
• Использовать requestAnimationFrame вместо setInterval для большинства анимаций.
• Что-то вроде angle = 2; слишком жесткое (это могло быть временным). Нам нужно использовать += здесь и ввести переменную скорости (и, в идеале, тоже ускорение) для реалистичного вращения.
• Math.PI / 180 * angle для Math функций не является строго обязательным. Мы можем использовать angle прямо в радианах. Если ваша игра зависит от установки углов с градусами, вы можете добавить функцию преобразования.
• Используйте переменные для ускорения и скорости, если вы хотите, чтобы движение было реалистичным. В приведенном ниже наброске я добавил несколько из них, но это не окончательный подход и предназначен для настройки по вкусу.

Вот простой пример всего этого в действии. Есть много возможностей для улучшения, но это должен быть достойный стартер.

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = 400;
canvas.height = 200;

const kbd = {37: false, 38: false, 39: false};

const ship = {
  angle: 0,
  color: "white",
  x: canvas.width / 2,
  y: canvas.height / 2,
  width: 10,
  height: 15,
  drag: 0.9,
  accSpeed: 0.04,
  rotSpeed: 0.012,
  rotv: 0,
  ax: 0,
  ay: 0,
  vx: 0,
  vy: 0,
  rotateLeft: function () {
    this.rotv -= this.rotSpeed;
  },
  rotateRight: function () {
    this.rotv += this.rotSpeed;
  },
  accelerate: function () {
    this.ax += this.accSpeed;
    this.ay += this.accSpeed;
  },
  move: function () {
    this.angle += this.rotv;
    this.rotv *= this.drag;
    this.vx += this.ax;
    this.vy += this.ay;
    this.ax *= this.drag;
    this.ay *= this.drag;
    this.vx *= this.drag;
    this.vy *= this.drag;
    this.x += Math.cos(this.angle) * this.vx;
    this.y += Math.sin(this.angle) * this.vy;
  },
  draw: function (ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.beginPath();
    ctx.moveTo(this.height, 0);
    ctx.lineTo(-this.height, this.width);
    ctx.lineTo(-this.height, -this.width);
    ctx.closePath();
    ctx.strokeStyle = this.color;
    ctx.stroke();
    ctx.restore();
  }
};

document.addEventListener("keydown", event => {
  if (event.keyCode in kbd) {
    event.preventDefault();
    kbd[event.keyCode] = true; 
  }
});
document.addEventListener("keyup", event => {
  if (event.keyCode in kbd) {
    event.preventDefault();
    kbd[event.keyCode] = false; 
  }
});

(function update() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);  

  const shipActions = {
    37: "rotateLeft",
    38: "accelerate",
    39: "rotateRight"
  };

  for (const key in shipActions) {
    if (kbd[key]) {
      ship[shipActions[key]]();
    }
  }
  
  ship.move();
  ship.draw(ctx);
  requestAnimationFrame(update);
})();