Javascript：球击中矩形 Y 轴响应

Question

我正在使用 javascript 制作乒乓球游戏，但在球击中球拍时无法创建逼真的 Y 轴反应。

目前我的方向速度为 dx 和 dy，而我当前的代码只是反转 dy 的方向。这样做的问题是，球只会在同一个方向上来回弹跳，而不管它在球拍上的哪个位置被击中。

我想创建一个逼真的方法，根据它在球拍上的位置来确定球的方向。因此，如果它在中心被击中，那么它会弹回原来的相同方向，但是如果它在顶部边缘附近被击中，它会向下弹回等等。

我无法找到从哪里开始使用这种方法，有人可以指导我正确的方向吗？

Answer 1

假设您计算桨的中心与球击中点之间的距离，并将其命名为d。假设当球击中球拍中心上方时d 具有正值。您现在可以将d * -0.1 添加到球的 Y 速度，它将开始改变方向。现在只需调整参数并告诉我它是否有效！

var canvas = document.querySelector('canvas');
var resize = function () {
  canvas.width = innerWidth;
  canvas.height = innerHeight;
};
resize();
var ctx = canvas.getContext('2d');
var ball = {
  size: 3,
  x: 1,
  y: canvas.height/2,
  vx: 2,
  vy: 0
};
var paddle = {
  height: 40,
  width: 3,
  x: canvas.width/2,
  y: canvas.height/2
};
addEventListener('mousemove', function (e) {
  paddle.y = e.clientY - (paddle.height/2);
});
var loop = function () {
  resize();
  ball.x += ball.vx;
  ball.y += ball.vy;
  if (ball.x > canvas.width || ball.x < 0) ball.vx *= -1; // horiz wall hit
  if (ball.y > canvas.height || ball.y < 0) ball.vy *= -1; // vert wall hit
  if (ball.x >= paddle.x && ball.x <= paddle.x + paddle.width && ball.y >= paddle.y && ball.y <= paddle.y + paddle.height) {
    // paddle hit
    var paddleCenter = paddle.y + (paddle.height/2);
    var d = paddleCenter - ball.y;
    ball.vy += d * -0.1; // here's the trick
    ball.vx *= -1;
  }
  ctx.fillRect(ball.x,ball.y,ball.size,ball.size);
  ctx.fillRect(paddle.x,paddle.y,paddle.width,paddle.height);
  requestAnimationFrame(loop);
};
loop();

body {overflow: hidden; margin: 0}
canvas {width: 100vw; height: 100vh}

<canvas></canvas>