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

在纯JS的画布游戏中移动三角船

1 个答案: