在纯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代替requestAnimationFrame。
• setInterval之类的东西太严格了（这可能是暂时的）。我们需要在此处使用angle = 2;并引入用于实际旋转的速度变量（理想情况下还包括加速度）。
• +=对于Math.PI / 180 * angle功能不是严格必需的。我们可以直接使用Math以弧度为单位。如果您的游戏取决于将角度设置为度，则可以添加转换功能。
• 如果您想让运动感觉逼真，请为加速度和速度使用变量。在下面的草图中，我添加了其中的一些内容，但这不是确定的方法，旨在进行调整。

这是所有这些操作的简单示例。有很多改进的空间，但是应该是一个不错的入门者。

angle