如果在 OOP 中按下鼠标，如何在 p5.js 中更改对象的速度

Question

大家好，我是 p5/js 的新手，不太擅长 OOP 编程。

单击鼠标后，我想通过改变球的速度来放下球。 在多次尝试编写和编辑代码后，p5 编辑器没有显示任何错误消息，但显示屏上没有显示任何内容。 所以，我需要帮助和一些建议来解决这类问题。

先感谢您 （：

 let ball1; let circleX = 50; let circleY = 50; let xspeed = 0; // Speed of the shape let yspeed = 0; // Speed of the shape let xdirection = 1; // Left or Right let ydirection = 1; // Top to Bottom let rad =50; function setup() { createCanvas(400, 400); ball1 = new Ball(); } function draw() { background(220); ball1.x =20; ball1.y = 50; ball1.c = color(25,0,100) ball1.body(); ball1.move(); ball1.bounce(); } class Ball { constructor(){ this.x = width/2; this.y = height; this.w = 30; this.h = 30; this.c = color(0,255,0); this.xspeed = 0; this.yspeed = 0; } body(){ noStroke(); fill(this.c); ellipse(this.x, this.y, this.w, this.h); } move() { //this.xpos = width / 2; //this.ypos = height / 2; this.x = this.x + this.xspeed * this.xdirection; this.y = this.y + this.yspeed * this.ydirection; } bounce() { if (this.x > width - rad || this.x < rad) { this.xdirection *= -1; } if (this.y > height - rad || this.y < rad) { this.ydirection *= -1; } } if(mouseIsPressed) { // if the mouse is pressed //set the new speed; this.fill(0, 0, 0); this.xspeed =1.5; this.yspeed=1.5; } }

Answer 1

代码之前的数字是行号，它们可能是错误的，但应该足够接近......

• 您需要将64 if(mouseIsPressed){} 47 move()到像47 move()这样的函数中。

• 此外，您还没有在constructor(){}声明和初始化39 this.xdirection 。

• 我认为67 this.fill(0, 0, 0)应该是fill(0) 。

• 也许24 ball1.body(); 应该在其他方法之后（24 -> 26 行）。

• 我认为bounce(){}中的if()语句是错误的，因为它们需要使用AND或&&而不是OR或|| .

此外，您可能希望将if(mouseIsPressed)转换为function mousePressed(){} mouseIsPressed是一个变量，如果鼠标按钮按下，则该变量为 true； mousePressed是当用户按下鼠标按钮时调用一次的函数。

function mousePressed(){
   ball1.xSpeed = 1.5
   ball1.ySpeed = 1.5
}

很可能还有其他我没有注意到的事情。

Answer 2

您的代码已经有了一些良好的开端。 我对它进行了一些修改以帮助进行 OOP 编程。 有关完整源代码，请参阅我的答案末尾的代码。

---

解决方案

您要问的主要问题涉及在按下鼠标按钮时设置球的速度。 为此，您应该在代码中声明一个mousePressed()函数（从if块中借用）：

function mousePressed() {
  // if the mouse is pressed
  // set the new speed;
  ball.xspeed = 1.5;
  ball.yspeed = 1.5;
}

这应该设置球的速度，这应该可以解决您的问题。

---

其他想法

我为将代码调整到更多工作条件而采取的其他一些步骤包括：

1. 我创建了一个在setup()函数中使用的reset()函数，并且可能能够随时重置动画。
2. 我将rad变量声明更改为const rad = 50因为它没有改变
3. 我在创建球时更改了Ball构造函数以包含初始 (x, y) 坐标（如果创建多个球可能会有所帮助）
   • 如果要创建任意数量的球，请创建一个数组并对每个球使用array.push(new Ball(x, y))并循环遍历数组以move() / bounce() / body()每个球.
4. 我假设rad是球的半径，所以我将this.w和this.h设置为rad * 2因为 with 和 height 将等于直径。

 let ball; const rad = 50; // let circleX = 50; // let circleY = 50; //let xspeed = 0; // Speed of the shape //let yspeed = 0; // Speed of the shape function setup() { createCanvas(400, 400); reset(); } function draw() { background(220); ball.body(); ball.move(); ball.bounce(); } function mousePressed() { // if the mouse is pressed //set the new speed; ball.xspeed = 1.5; ball.yspeed = 1.5; } function reset() { ball = new Ball(width / 2, height / 2); } class Ball { constructor(x, y) { this.x = x; this.y = y; this.w = rad * 2; this.h = rad * 2; this.c = color(25, 0, 100); this.xspeed = 0; this.yspeed = 0; this.xdirection = 1; this.ydirection = 1; } body() { noStroke(); fill(this.c); ellipse(this.x, this.y, this.w, this.h); } move() { this.x = this.x + this.xspeed * this.xdirection; this.y = this.y + this.yspeed * this.ydirection; } bounce() { if (this.x > width - rad || this.x < rad) { this.xdirection *= -1; } if (this.y > height - rad || this.y < rad) { this.ydirection *= -1; } } }

 <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js"></script>