JS小行星游戏：玩家跨屏幕重生的三角函数公式简化需求

问题背景 #

开发JS小行星游戏时，设定飞船（三角形，中心原点顶点为(30, 0)、(-10, 10)、(-10, -10)）完全飞出屏幕后在对面边缘重生。当前仅在三个顶点全部离开屏幕时触发传送，但计算旋转后顶点相对飞船中心坐标的代码冗余，需要更简洁的实现方式。

简洁实现思路 #

直接利用2D旋转矩阵计算每个顶点旋转后的坐标，替代手动计算角度和距离的方式。对于任意点(x, y)，绕原点旋转θ后的坐标公式为：

• 旋转后x坐标：x * cosθ - y * sinθ
• 旋转后y坐标：x * sinθ + y * cosθ

该公式能直接得到顶点相对于飞船中心的偏移量，无需额外计算距离或角度偏移，代码更直观易维护。

代码示例 #

// 定义飞船原始顶点（相对于自身中心）
const shipBaseVertices = [
  { x: 30, y: 0 },
  { x: -10, y: 10 },
  { x: -10, y: -10 }
];

// 计算旋转后的顶点相对坐标
const cosRot = Math.cos(this.rotation);
const sinRot = Math.sin(this.rotation);
const rotatedVertices = shipBaseVertices.map(vertex => ({
  x: vertex.x * cosRot - vertex.y * sinRot,
  y: vertex.x * sinRot + vertex.y * cosRot
}));

后续使用说明 #

得到旋转后的相对坐标后，只需加上飞船中心的绝对坐标（比如this.x、this.y），就能获取每个顶点在Canvas上的绝对位置，进而判断是否全部超出屏幕边界：

// 假设屏幕宽高为canvasWidth、canvasHeight
const allOffScreen = rotatedVertices.every(vertex => {
  const absX = this.x + vertex.x;
  const absY = this.y + vertex.y;
  return absX < 0 || absX > canvasWidth || absY < 0 || absY > canvasHeight;
});

if (allOffScreen) {
  // 执行屏幕边缘重生逻辑
}

内容的提问来源于stack exchange，提问作者Coolpaper