在 P5JS 中将变量绑定到布尔值的问题（简单的弹跳球练习）

Question

TL;DR 为什么球没有从下面 link 的边缘弹起？

我目前正在浏览 CodingTrain P5JS 视频。我想要实现的是一个简单的切换按钮：

https://editor.p5js.org/S_Oda/sketches/uF_dgcQP-

当按钮为 'on' 时，它会变为红色，球会移动，直到它撞到左侧或右侧边缘，然后弹开并转向相反的方向。切换按钮时 'off' 球将冻结在原地，再次按下按钮时它将恢复运动。

我的问题是，当球击中边缘时，它似乎出现了故障。在我引入切换按钮之前，弹跳是有效的。我的代码的共鸣是，如果我将球的 'speed' 变量绑定到一个布尔值（“ballState”），那么按钮可以改变 'ballState' 是真还是假，即动或不动。所以我想知道问题是否出在某个地方：

  //Tying speed to ballState so that I can toggle the ball movement with the button
  if (!ballState) {
    speed = 0;
  } else if (ballState) {
    speed = 8;
  }

  //Why does this not result in the ball bouncing off of the edge of the canvas?
  if (x >= width || (x <= -1 && ballState)) {
    speed = speed * -1;
  }

如果有人能告诉我我做错了什么，我将不胜感激，没有引入任何新的concepts/workarounds ，因为我正在尝试一次一步地学习东西。非常感谢！

完整代码：

var btn = false;
var ballState = false;
var x = 0;
var speed = 0;

function setup() {
  createCanvas(600, 400);
  background(0);
  rectMode(CENTER);
}

function draw() {
  background(0);
  stroke(255);

  //Button
  if (btn) {
    stroke(255, 0, 0);
    fill(255, 0, 0);
    push();
    translate(0, 180);
    text("ON", width / 2, height / 2, 20, 20);
    pop();
  } else {
    noFill(0);
    push();
    translate(0, 180);
    text("OFF", width / 2, height / 2, 20, 20);
    pop();
  }
  rect(width / 2, 330, 120, 60);

  //Ball
  x = x + speed;
  push();
  noStroke();
  fill(0, 0, 255);
  ellipse(x, height / 2, 100, 100);
  pop();

  //Tying speed to ballState so that I can toggle the ball movement with the button
  if (!ballState) {
    speed = 0;
  } else if (ballState) {
    speed = 8;
  }

  //Why does this not result in the ball bouncing off of the edge of the canvas?
  if (x >= width || (x <= -1 && ballState)) {
    speed = speed * -1;
  }
}

//Button toggle
function mousePressed() {
  if (mouseX >= 239 && mouseX <= 360 && mouseY >= 300 && mouseY <= 360) {
    btn = !btn;
    ballState = !ballState;
  }
}

Answer 1

主要是这个问题，它在 draw 函数中运行每一帧：

// ...
else if (ballState) {
  speed = 8;
}

...其中 ballState 更恰当地命名为 isBallMoving.

你可能认为 speed = speed * -1; 反转了球，但在下一个渲染帧中，ballState 为真意味着上面代码块中的 speed = 8; 将它放回向前的方向，超越你的意图。

另外一个需要考虑的问题是：如果x >= width你做了speed *= -1反转方向，下一帧球的x还会是>= width吗？如果是这样，在所有条件相同的情况下，speed *= -1 将再次发生，球将原地振动，无限反转方向。

我会留给您找出如何最好地解决这些问题，但在较高层次上，您需要捕获和检查速度设置逻辑的 ballState 以外的内容。您可能还需要一种方法，让与墙壁发生碰撞的物体将自己“推”出墙壁，直到所有碰撞都得到解决。

在 P5JS 中将变量绑定到布尔值的问题（简单的弹跳球练习）

Problem tying a variable to a boolean in P5JS (Simple bouncing ball exercise)

javascript

p5.js