如何让球碰撞并从我的球拍上弹起

Question

我是一名大学生，必须在html中制作一种突破性克隆。我必须让球从我绘制的矩形和桨上反弹。问题是我仍然是新的HTML，似乎无法找到一个解决方案，与我必须解决的代码一起工作。 感谢您花时间阅读。

var canvas = document.getElementById("pong");
var ctx = canvas.getContext("2d");

var ball = {
  x: canvas.width / 2,   //pixels
  y: canvas.height / 2,  //pixels
  xSpeed: 50,           //pixels per second (you can cahnge this)
  ySpeed: 40,           //pixels per second (you can change this)
  radius: 10             //pixels
}

var paddle = {
  x: 100,   			//pixels
  y: canvas.height / 2,  //pixels
  xSpeed: 10,           //pixels per second (you can increase this)
  ySpeed: 10,           //pixels per second (you can increase this)
  halfWidth: 10, 		//pixels
  halfHeight: 40		//pixels
}

// TODO: Add data for top, bottom, left and right rectangles

  var topWall = {
    x:0,
    y:0,
    width:800,
    height:10,
    area:8000
  }

  var bottomWall = {
    x:0,
    y:400,
    width:800,
    height:10,
    area:8000
  }

  var rightWall = {
    x:800,
    y:0,
    width:10,
    height:400,
    area:4000
  }

  var leftWall = {
    x:0,
    y:0,
    width:10,
    height:400,
    area:4000
  }

// Function which draw everything
function render() {
  //clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // draw the ball
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fill();

  // draw the paddle
  ctx.beginPath();
  ctx.moveTo(paddle.x - paddle.halfWidth, paddle.y - paddle.halfHeight);
  ctx.lineTo(paddle.x - paddle.halfWidth, paddle.y + paddle.halfHeight);
  ctx.lineTo(paddle.x + paddle.halfWidth, paddle.y + paddle.halfHeight);
  ctx.lineTo(paddle.x + paddle.halfWidth, paddle.y - paddle.halfHeight);
  ctx.fill();

  // TODO: Draw top, bottom, left and right rectangles

  // drawing for right wall
  ctx.strokeStyle = "white";
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.moveTo(rightWall.x, rightWall.y);
  ctx.lineTo(rightWall.x - rightWall.width, rightWall.y);
  ctx.lineTo(rightWall.x - rightWall.width, rightWall.y + rightWall.height);
  ctx.lineTo(rightWall.x, rightWall.y + rightWall.height);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

  //top wall
  ctx.strokeStyle = "white";
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.moveTo(topWall.x, topWall.y);
  ctx.lineTo(topWall.x + topWall.width, topWall.y);
  ctx.lineTo(topWall.x + topWall.width, topWall.y + topWall.height);
  ctx.lineTo(topWall.x, topWall.y + topWall.height);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

  //bottom wall
  ctx.strokeStyle = "white";
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.moveTo(bottomWall.x, bottomWall.y);
  ctx.lineTo(bottomWall.x + bottomWall.width, bottomWall.y);
  ctx.lineTo(bottomWall.x + bottomWall.width, bottomWall.y - bottomWall.height);
  ctx.lineTo(bottomWall.x, bottomWall.y - bottomWall.height);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

 //left wall
  ctx.strokeStyle = "white";
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.moveTo(leftWall.x, leftWall.y);
  ctx.lineTo(leftWall.x + leftWall.width, leftWall.y);
  ctx.lineTo(leftWall.x + leftWall.width, leftWall.y + leftWall.height);
  ctx.lineTo(leftWall.x, leftWall.y + leftWall.height);
  ctx.closePath();
  ctx.stroke();
  ctx.fill();

}

// Function which updates the game physics
function update(elapsed) {
  //update the ball position according to the elapsed time
  ball.y += ball.ySpeed * elapsed;
  ball.x += ball.xSpeed * elapsed;

  // TODO: Bounce the ball of top, bottom and right rectangles
  // TODO: End game (stop the ball moving) if ball hits left rectangle
  // TODO: Bounce the ball off the paddle
}

// Handle keyboard input
 function keydown_handler(e) {
  // TODO: Modify code so the paddle goes up and down but not outside the area of play.
        switch (event.keyCode){
          case 38: //up key (move paddle up)
          if (paddle.y - 30 > 49) {
            paddle.y -= 30;
          }
          break;
          case 40: // down key (move paddle down)
          if (paddle.y + 30 < 360) {
            paddle.y += 30;
          }
          break;
        }
      }

window.addEventListener("keydown", keydown_handler);

var previous;
function run(timestamp) {
  if (!previous) previous = timestamp;          //start with no elapsed time
  var elapsed = (timestamp - previous) / 1000;  //work out the elapsed time
  update(elapsed);                              //update the game with the elapsed time
  render();                                     //render the scene
  previous = timestamp;                         //set the (globally defined) previous timestamp ready for next time
  window.requestAnimationFrame(run);            //ask browser to call this function again, when it's ready
}

//trigger the game loop
window.requestAnimationFrame(run);

body {
  font-family: "Century Gothic";
}

main, header {
  max-width: 60%;
  margin: 0 auto;
}

header h1 {
  font-size: 6em;
  margin: 0;
}

canvas#pong {
  background: #45484d; /* Old browsers */
  background: radial-gradient(ellipse at center, #45484d 0%,#000000 100%); /* W3C */
  border-radius: 10px;
  border: 4px solid #d5282d;
  width: 100%;
}

<!doctype html>
<html>
  <head>
    <title>Pong - Resit CW</title>
    <link rel="stylesheet" href="pong.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body style="overflow:hidden;">
    <header>
      <h1>Pong</h1>
    </header>
    <main>
      <canvas id="pong" width="800" height="400"></canvas>
      <p>
        You task is complete the following:
        <ul>
          <li>Add data for four rectangles around the edge of the play area.</li>
          <li>Draw these four rectangles.</li>
          <li>Alter the game physics so that the ball bounces off these rectangles and the paddle.</li>
          <li>Add keyboard controls so that the paddle moves up and down when the up and down arrow keys are pressed.</li>
          <li>End the game (stop the ball moving) when the ball hits the left rectangle.</li>
        </ul>
      </p>
      <p>
        All of these alterations need to be made in the pong.js file.
        The code is marked with //TODO: to give you hints as to where functionality needs to be added.
      </p>
    </main>
    <script charset="utf-8" src="pong.js"></script>
  </body>
</html>