根据鼠标位置旋转div

Question

我正在开发一个JavaScript游戏，其中您根据鼠标所在的位置来开车（因此它会朝着鼠标移动）。

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

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

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度或类似的角度。未经测试。