如果在 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() 的函数中。
另外你还没有声明和初始化39 this.xdirection 在 constructor(){}.
我觉得67 this.fill(0, 0, 0)应该是fill(0).
也许 24 ball1.body(); 应该在其他方法之后 （24 -> 26 行）。
我认为 bounce(){} 中的 if() 语句是错误的，因为它们需要 AND 或 && 而不是 OR 或 ||.

您可能还想将 if(mouseIsPressed) 变成 function mousePressed(){} mouseIsPressed 是一个变量，如果鼠标按钮按下则为真; 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;
}

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

其他想法

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

我创建了一个要在 setup() 函数中使用的 reset() 函数，并且可以随时重置动画。
我将 rad 变量声明更改为 const rad = 50 因为它没有改变
我更改了 Ball 构造函数以在创建球时包含初始 (x, y) 坐标（如果创建多个球可能会有所帮助）
- 如果您想创建任意数量的球，请创建一个数组并为每个球使用 array.push(new Ball(x, y)) 并循环遍历数组至 move()/bounce()/body() 每个球.
我假设 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>

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

How can I change an object's speed in p5.js if the mouse is pressed in OOP

javascript

p5.js

解决方案

其他想法