使对象向光标移动-JavaScript-p5.js

我是JavaScript新手，希望制作一个简单的脚本，其中一个对象（本例中为正方形）朝着光标移动。这个想法是，正方形跟踪光标，随着它越来越靠近光标而变慢。到目前为止，我的代码如下所示：

var xspeed;
var yspeed;
var x;
var y;

function setup() {
  createCanvas(500,500); 
}

function update(){
  xspeed = (mouseX - x)/2;
  yspeed = (mouseY - y)/2;  

  x += xspeed;
  y += yspeed;
}

function draw() {
  background(255);

  x = width/2;
  y = height/2;

  while (!(x == mouseX && y == mouseY)){
  update();
  rect(x,y,10,10);
  }
}

var rectLocation;
function setup() {
    // create vector that keeps track of the location of the rect
    rectLocation = createVector(width/2,height/2);
}
function draw() {
    // Assign your mouseX and mouseY to a vector called target.
    var target = createVector(mouseX,mouseY);

    // Calculate the distance between your target and
    // the current location of your rect
    var distance = target.dist(rectLocation);

    // map the distance between your rect location and
    // the mouse to a new number which will dictate how
    // much slower it will move based on how close it
    // will get to the target.
    var mappedDistance = map(distance, 100, 0, 1.5, 0.5);

    // this is where you actually calculate the direction
    // of your target towards your rect.
    target.sub(rectLocation);

    // then you're going to normalize that value
    // (normalize sets the length of the vector to 1)
    target.normalize();

    // then you can multiply that vector by the distance
    // we mapped to a new number (in this case it gets
    // multiplied somewhere between 1.5 and 0.5 based
    // on how far the target is.)
    target.mult(mappedDistance);  

    // last we add the target vector (which we modfied
    // multiple times) to the rect location.
    rectLocation.add(target);

    // draw and watch math do it's job!
    rect(rectLocation.x, rectLocation.y, 10,10);
}

问题是，这个代码只是弹出一堆静止的正方形，它们从中心到左上角呈对角线排列。代码似乎完全忽略了光标的位置

---

我做错了什么？提前谢谢

在

draw（）

函数中有一个

while

循环，这意味着在

while

循环完成之前，第一帧不会完成。

while

循环直到正方形直接位于鼠标顶部，默认值为0,0

---

摆脱

while

循环。当你这样做的时候，你不想检查正方形是否在鼠标的正上方，因为它很可能只会非常接近鼠标。检查精确匹配将导致代码进入无限循环，这将使浏览器崩溃。

您需要的是计算指向鼠标的向量，并使用该向量修改矩形x和y

在p5.js中，向量是一个存储x、y和z值的对象，您可以修改该值

您希望绘制循环执行以下操作：

var xspeed;
var yspeed;
var x;
var y;

function setup() {
  createCanvas(500,500); 
}

function update(){
  xspeed = (mouseX - x)/2;
  yspeed = (mouseY - y)/2;  

  x += xspeed;
  y += yspeed;
}

function draw() {
  background(255);

  x = width/2;
  y = height/2;

  while (!(x == mouseX && y == mouseY)){
  update();
  rect(x,y,10,10);
  }
}

var rectLocation;
function setup() {
    // create vector that keeps track of the location of the rect
    rectLocation = createVector(width/2,height/2);
}
function draw() {
    // Assign your mouseX and mouseY to a vector called target.
    var target = createVector(mouseX,mouseY);

    // Calculate the distance between your target and
    // the current location of your rect
    var distance = target.dist(rectLocation);

    // map the distance between your rect location and
    // the mouse to a new number which will dictate how
    // much slower it will move based on how close it
    // will get to the target.
    var mappedDistance = map(distance, 100, 0, 1.5, 0.5);

    // this is where you actually calculate the direction
    // of your target towards your rect.
    target.sub(rectLocation);

    // then you're going to normalize that value
    // (normalize sets the length of the vector to 1)
    target.normalize();

    // then you can multiply that vector by the distance
    // we mapped to a new number (in this case it gets
    // multiplied somewhere between 1.5 and 0.5 based
    // on how far the target is.)
    target.mult(mappedDistance);  

    // last we add the target vector (which we modfied
    // multiple times) to the rect location.
    rectLocation.add(target);

    // draw and watch math do it's job!
    rect(rectLocation.x, rectLocation.y, 10,10);
}

我建议大家在youtube上看看丹尼尔·希夫曼的教程。他把一切都解释得很详细