在 P5.js 中创建一个“简单”游戏并卡在一个问题上

Question

我正在为我的艺术学校课程的期末项目创建（或重新创建）经典风格的游戏。编码是新的。我已经学习了大约 8 个月，所以对我来说一切都还处于“训练轮”模式。我认为这个游戏叫做桨球。它就像乒乓球，但有一个“球”和一个“球拍”，球从顶部和侧面反弹。玩家试图用球拍将球退回，如果它过去了，玩家就输了，游戏重新开始。

我遇到的问题是，当球与球拍接触时，球突然卡住了，没有反弹。如果球拍保持接触，它会迅速提高“分数”。此外，现在桨在 y 轴上移动，那么它应该是固定的并且只在 x 轴上移动。

我一直在摆弄它，我确定我不小心保存了一些我不打算保存的东西。

有人可以看一下并告诉我如何修复它以重新工作吗？

这里是代码的链接（这里运行没有错误）：https://editor.p5js.org/Rico2022/sketches/YIOKSbFWu

下面我也放上代码：

// Requirement 1: Load Sound
let sound;

function preload() {
  //sound = loadSound('metalPing4.mp3');
}

// Requirement 7: Define a custom class
class Ball {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.xSpeed = random(2, 7) * (random() > 0.5 ? 1 : -1);
    this.ySpeed = random(-7, -2);
  }

  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }

  display() {
    fill('#D9FFF5');
    ellipse(this.x, this.y, this.r * 2, this.r * 2);
  }

  bounce() {
    if (this.x < this.r || this.x > width - this.r) {
      this.xSpeed *= -1;
    }
    if (this.y < this.r || this.y > height - this.r) {
      this.ySpeed *= -1;
    }
  }
}

let ball;
let score = 0;
let gameState = "start";

function setup() {
  createCanvas(400, 400);
  ball = new Ball(random(50, 350), 50, 10);
}

function draw() {
  background(0);

  if (gameState === "start") {
    titleScreen();
  } else if (gameState === "playing") {
    playGame();
  } else if (gameState === "playAgain") {
    playAgainScreen();
  }
}

function titleScreen() {
  fill('#d9c3f7');
  textSize(32);
  textAlign(CENTER);
  text("Paddle Ball Game", width / 2, height / 2 - 40);
  textSize(24);
  text("Click to Start", width / 2, height / 2);
}

function playGame() {
  // Requirement 5: Use sin or cos
  let paddleY = height - 25 - 15 * sin(radians(frameCount % 360));

  // Paddle
  fill('#ffffff');
  rect(mouseX, paddleY, 90, 15);

  ball.move();
  ball.display();
  ball.bounce();
  paddleCollision(paddleY);

  //Score
  fill('#d9c3f7');
  textSize(24);
  text("Score: " + score, 10, 25);
}

function playAgainScreen() {
  fill('#d9c3f7');
  textSize(32);
  textAlign(CENTER);
  text("Game Over", width / 2, height / 2 - 40);
  textSize(24);
  text("Click to Play Again", width / 2, height / 2);
}

function mousePressed() {
  if (gameState === "start") {
    gameState = "playing";
  } else if (gameState === "playAgain") {
    gameState = "playing";
    score = 0;
    ball = new Ball(random(50, 350), 50, 10);
  }
}

// Requirement 6: Create and use your own function
function paddleCollision(paddleY) {
  if (ball.x > mouseX && ball.x < mouseX + 90 && ball.y + ball.r >= paddleY) {
    // Requirement 2: Play Sound
    //sound.play();

    // Requirement 4: Use of map()
    let angle = map(ball.x, mouseX, mouseX + 90, -PI / 4, PI / 4);
    ball.xSpeed = ball.xSpeed * cos(angle) * 1.05;
    ball.ySpeed = -abs(ball.ySpeed) * sin(angle) * 1.05;

    // Requirement 10: Event on Collision
    score++;
  }
}

// Requirement 3: Use random
function randomBgColor() {
  let r = random(0, 255);
  let g = random(0, 255);
  let b = random(0, 255);
  return color(r, g, b);
}

function titleScreen() {
  //background(randomBgColor());
  background(107, 143, 113);
  fill('#d9c3f7');
  textSize(32);
  textAlign(CENTER);
  text("Paddle Ball Game", width / 2, height / 2 - 40);
  textSize(24);
  text("Click to Start", width / 2, height / 2);
}

function playGame() {
  // Requirement 5: Use sin or cos
  let paddleY = height - 25 - 15 * sin(radians(frameCount % 360));

  // Paddle
  fill('#AAD2BA');
  rect(mouseX, paddleY, 90, 15);

  ball.move();
  ball.display();
  ball.bounce();
  paddleCollision(paddleY);

  //Score
  fill('#d9c3f7');
  textSize(24);
  text("Score: " + score, 60, 25);

  // Requirement 12: Playability
  if (ball.y + ball.r >= height) {
    gameState = "playAgain";
  }
}

function playAgainScreen() {
  //background(randomBgColor());
  background(185, 245, 216);
  fill('#d9c3f7');
  textSize(32);
  textAlign(CENTER);
  text("Game Over", width / 2, height / 2 - 40);
  textSize(24);
  text("Click to Play Again", width / 2, height / 2);
}

// Requirement 11: User Input
function keyPressed() {
  if (key === 'P' || key === 'p') {
    if (gameState === "playing") {
      gameState = "paused";
    } else if (gameState === "paused") {
      gameState = "playing";
    }
  }
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

</script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>