弹跳球不保持分配给它的颜色

Question

我正在编写一个程序，让球从盒子的边缘反弹并改变颜色（很像 DVD 标志）。问题是一旦它改变了颜色，盒子的填充函数就会覆盖球的颜色。我试过条件语句和不同的函数安排，并向同学求助，但都无济于事。

    //
// Bounce1
// A simple bouncing ball - it has perfect bounces,
// it never slows down.

//These variables draw the canvas and the inner box
let canvasW = 900;
let canvasH = 700;
let innerborder = 100;

// These variables store the position, size, and speed.
let positionX = 300;
let positionY = 300;
let radius = 20;
let velocityX = 3;
let velocityY = 5;

//This variable helps with color change
let change = false;

function setup() {
  createCanvas(canvasW, canvasH);
 
}

function draw() {
  drawBackground();
  moveBall();
  drawBall();
}

function drawBackground(){
  background(220);
  innerRect();
  
}

function innerRect(){
  fill (71, 71, 71);
  rect (innerborder, 100, 700, 500);
}

function moveBall(){
  // move the ball
  positionX = positionX + velocityX;
  positionY = positionY + velocityY;

  const rightEdge = width - 100;
  const leftEdge = 0 + 100;
  const topEdge = 0 + 100;
  const bottomEdge = height - 100;

  // test to see if it hit an edge
  if (positionX + radius > rightEdge) {
    // hit the right edge
    velocityX = velocityX * -1;
    positionX = rightEdge - radius;
    change = true;
    if (change == true){
      changeColor();
      change = false
    }
    else if (change == false){
      noFill();
    }
  }
  else if (positionX - radius < leftEdge) {
    // hit the left edge
    velocityX = velocityX * -1;
    positionX = leftEdge + radius;
    change = true;
    if (change == true){
      changeColor();
      change = false
      }
    else if (change == false){
      noFill();
    }
  }

  if (positionY + radius > bottomEdge) {
    // hit the bottom edge
    velocityY = velocityY * -1;
    positionY = bottomEdge - radius;
    change = true;
    if (change == true){
      changeColor();
      change = false
      }
    else if (change == false){
      noFill();
    }
  }
  else if (positionY - radius < topEdge) {
    // hit the top edge
    velocityY = velocityY * -1;
    positionY = topEdge + radius;
    change = true;
    if (change == true){
      changeColor();
      change = false
      }
    else if (change == false){
      noFill();
    }
}
}

function drawBall(){
  // draw the ball
  ellipse(positionX, positionY, radius * 2, radius * 2);
}

function changeColor(){
  //Colors
  let r = random(0, 255);
  let g = random(0, 255);
  let b = random(0, 255);

  fill (r, g, b);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

Answer 1

尝试将当前球的颜色存储在变量中，这样您就可以在重新绘制球之前重新调用fill(ballRed, ballGreen, ballBlue)。 changed 不是必需的，也没有真正帮助解决 innerRect() 的 fill() 将覆盖之前帧上发生的任何其他 fill() 调用这一事实。

const canvasW = 900;
const canvasH = 700;
const innerborder = 100;
let positionX = 300;
let positionY = 300;
let radius = 20;
let velocityX = 3;
let velocityY = 5;
let r, g, b;
let rightEdge;
let leftEdge;
let topEdge;
let bottomEdge;

function setup() {
  createCanvas(canvasW, canvasH);
  rightEdge = width - 100;
  leftEdge = 0 + 100;
  topEdge = 0 + 100;
  bottomEdge = height - 100;
  changeColor();
}

function draw() {
  drawBackground();
  moveBall();

  if (checkCollision()) {
    resolveCollision();
    changeColor();
  }

  drawBall();
}

function drawBackground() {
  background(220);
  innerRect();
}

function innerRect() {
  fill(71, 71, 71);
  rect(innerborder, 100, 700, 500);
}

function moveBall() {
  positionX = positionX + velocityX;
  positionY = positionY + velocityY;
}

const checkCollision = () =>
  positionX + radius > rightEdge ||
  positionX - radius < leftEdge ||
  positionY + radius > bottomEdge ||
  positionY - radius < topEdge
;

const resolveCollision = () => {
  if (positionX + radius > rightEdge) {
    // hit the right edge
    velocityX = velocityX * -1;
    positionX = rightEdge - radius;
  } else if (positionX - radius < leftEdge) {
    // hit the left edge
    velocityX = velocityX * -1;
    positionX = leftEdge + radius;
  }

  if (positionY + radius > bottomEdge) {
    // hit the bottom edge
    velocityY = velocityY * -1;
    positionY = bottomEdge - radius;
  } else if (positionY - radius < topEdge) {
    // hit the top edge
    velocityY = velocityY * -1;
    positionY = topEdge + radius;
  }
};

function drawBall() {
  fill(r, g, b);
  ellipse(positionX, positionY, radius * 2, radius * 2);
}

function changeColor() {
  r = random(0, 255);
  g = random(0, 255);
  b = random(0, 255);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

之后，您可能需要考虑重构代码，将与球关联的所有松散变量和函数放入一个对象中。就像是

const ball = {
  x: 42,
  y: 42,
  r: 0,
  b: 0,
  g: 0,
  radius: 20,
  vx: 3,
  vy: 5,
  changeColor() {
    // ...
  },
  draw() {
    // ...
  },
  // ...
};

并与ball.changeColor()一起使用。这种逻辑分组使代码更易于阅读和扩展。