Javascript 我如何修复在使用camera.position设置为精灵为中心时向鼠标移动的精灵随机振动？

所以，当我使用

camera.position.x = player.x; 
camera.position.y = player.y;

要将相机的中心设置为我的精灵，代码无法正常工作。这有点难以解释，所以我制作了这个视频（），其中我展示了它应该如何工作以及使用camera.position时的区别/问题

此外，正如您所看到的，即使未使用camera.position（另一个bug），当精灵到达鼠标指针时，它也会开始振动。如果可能的话，请告诉我如何修复它。与此相关的代码是：

function setup() {
  createCanvas(displayWidth,displayHeight);
  level = new Level;
  player = createSprite(100,100,10,10);
  edge = createEdgeSprites();
  player.speed = 5;
}

另外，如果您注意到，当使用camera.position时，振动发生在精灵与鼠标的特定距离处，模式是画布中心的距离为0，并且随着远离中心的移动而不断增加。

振动效果的发生是因为播放器对象的位置逐渐变化，实际上永远不会与鼠标的位置匹配：

let player={
x:100，
y:100，
速度:5,，
尺码：10
}
函数设置（）{
createCanvas（400150）
}
函数绘图（）{
背景（150）
movePlayer（）
rect（player.x，player.y，player.size）
}
函数movePlayer（）{
var run=mouseX-player.x；
var rise=mouseY-player.y；
变量长度=sqrt（（上升*上升）+（运行*运行））；
var unitX=行程/长度；
var unitY=上升/长度；
player.x+=unitX*player.speed；
player.y+=unitY*player.speed；
}

---

感谢您建议停止振动，但更重要的是主要问题。另一个网站上有人说这是由于“世界空间与屏幕空间”的关系，并要求“将相机位置纳入等式，因此（鼠标位置+相机位置）=鼠标在世界空间中的位置”。我不知道如何正确地实现这一点，所以如果你能帮助它将是伟大的！我不知道如何得到两个不同的鼠标位置。另外，我没有使用翻译功能，所以如果你认为这可能会有帮助，请告诉我，因为我发现翻译非常混乱。你能发布一个与repo的链接吗？存储库（防振编辑未制作）：这是我在另一个网站上提出的问题，因此您可以看到该人的确切说法：此问题已解决

function draw() {
  background(255);  
  level.play();
  player.rotation = Math.atan2(mouseY-player.y, mouseX-player.x) * 180/PI;
  drawSprites();
}

player.collide(edge); //this part is from level.play()
var run = mouseX - player.x;
var rise = mouseY - player.y;
var length = sqrt((rise*rise) + (run*run));
var unitX = run / length;
var unitY = rise / length;
player.x += unitX * player.speed;
player.y += unitY * player.speed;