如何修復隨機振動的精靈，同時使用設置為精靈的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>

根據“在精靈與鼠標的特定距離處發生振動”，我在您發布的代碼中看不到任何與之相關的內容； 但是，根據描述和視頻，我認為是翻譯問題。