在 HTML5 Canvas 和 JS 游戏中，当一个对象旋转而另一个对象没有旋转时，如何检查两个对象之间的碰撞？答案

【问题标题】：In HTML5 Canvas and JS games, how might you check for collision between two objects when one's been rotated and the other hasn't?在 HTML5 Canvas 和 JS 游戏中，当一个对象旋转而另一个对象没有旋转时，如何检查两个对象之间的碰撞？
【发布时间】：2017-04-23 04:42:24
【问题描述】：

我一直在开发一款类似于蠕虫克隆的游戏。在其中，玩家使用向上和向下键（这是一个 2D 游戏）旋转大炮以向来自上方的敌人开火。我在绘制大炮时使用context.rotate() 和context.translate() 方法，然后立即context.restore() 回到默认画布。大炮是唯一（目前）旋转的东西。

问题是，我想准确地显示从大炮顶部射出的射弹。为此，我需要随时知道大炮顶部的坐标。通常，这是我可以轻松计算出来的。但是，因为画布是在画大炮之前才旋转的，所以没那么简单。

【问题讨论】：

标签： javascript html canvas rotation

【解决方案1】：

只需使用简单的三角函数来跟踪顶部：

var canonTopX = pivotX + Math.cos(angleInRadians) * canonLength;
var canonTopY = pivotY + Math.sin(angleInRadians) * canonLength;

您当然可以选择使用转换来渲染经典，或者分享数学。

ctx.translate(pivotX, pivotY);
ctx.rotate(angleInRadians);
//render canon from (0,0) pointing right (0°)
ctx.setTransform(1,0,0,1,0,0);    // instead of save/restore

// calc canon top for projectiles here

var ctx = c.getContext("2d");
var canonLength = 70;
var angleInRadians = 0;
var angleStep = 0.03;
var pivotX = ctx.canvas.width>>1;
var pivotY = ctx.canvas.height>>1;

ctx.fillStyle = "#000";
ctx.strokeStyle = "#c00";

(function loop() {
  angleInRadians += angleStep;
  render();
  requestAnimationFrame(loop);
})();

function render() {
  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  ctx.translate(pivotX, pivotY);
  ctx.rotate(angleInRadians);
  ctx.fillRect(0, -5, canonLength, 10);
  ctx.setTransform(1,0,0,1,0,0);    // instead of save/restore

  var canonTopX = pivotX + Math.cos(angleInRadians) * canonLength;
  var canonTopY = pivotY + Math.sin(angleInRadians) * canonLength;
  ctx.beginPath();
  ctx.arc(canonTopX, canonTopY, 9, 0, 6.3);
  ctx.stroke();
}

&lt;canvas id=c width=600 height=180&gt;&lt;/canvas&gt;

【讨论】：

做到了！非常感谢！三角学从来都不是我最好的科目，而且是很久以前的事了。