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>

Javascript：球击中矩形Y轴响应

1 个答案: