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

Question

所以，当我使用

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

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

此外，如您所见，即使不使用 camera.position，精灵到达鼠标指针时也会开始振动，这是另一个错误。 如果可能，请告诉如何修复它。 与此相关的代码是：

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

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;

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

Answer 1

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

 let player = { x: 100, y: 100, speed: 5, size: 10 } function setup() { createCanvas(400, 150) } function draw() { background(150) movePlayer() rect(player.x, player.y, player.size) } function movePlayer(){ 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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

但是您可以检查玩家和鼠标之间的距离是否小于增量并强制位置与鼠标的位置相同：

 let player = { x: 100, y: 100, speed: 5, size: 10 } function setup() { createCanvas(400, 150) } function draw() { background(150) movePlayer() rect(player.x, player.y, player.size) } function movePlayer(){ var run = mouseX - player.x; var rise = mouseY - player.y; //Check if the distance is less than the increment if(Math.abs(run) < player.speed && Math.abs(rise) < player.speed){ player.x = mouseX player.y = mouseY return } 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; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

根据“在精灵与鼠标的特定距离处发生振动”，我在您发布的代码中看不到任何与之相关的内容； 但是，根据描述和视频，我认为是翻译问题。