javascript - 根据鼠标位置旋转 div

Question

我正在开发一个 javascript 游戏，您可以根据鼠标的位置驾驶汽车（因此它会向您的鼠标移动）。

但现在它只是一个跟随鼠标的矩形。我希望它向鼠标旋转，（例如，如果您有一个 100px 宽和 50px 高的矩形，左侧为白色，右侧为黑色，则黑色侧应始终面向光标）。

我尝试为鼠标的某些位置制作 if 语句，但经过一个小时的编程，我发现这将需要数周的时间。有人知道更好和/或更简单的方法吗？

标签： javascripthtmlweb

Answer 1

您可以使用transform: rotate(angle). 并使用atan2计算角度

const mousePos = { x: 10, y: 10 }
const carPos = { x: 30, y: 20 }
const vector = { x: mousePos.x - carPos.x, y: mousePos.y - carPos.y }
const angle = Math.atan2(vector.y, vector.x) * 180 / Math.PI;

也许你需要增加 90 度或类似的东西。未经测试。