Javascript: мяч, ударяющий прямоугольник Ответ оси Y - PullRequest
Новая
       35

Javascript: мяч, ударяющий прямоугольник Ответ оси Y

0 голосов
/ 03 октября 2018

Я играю в понг с использованием javascript и испытываю трудности с созданием реалистичной реакции по оси Y при попадании мяча в ракетку.

В настоящее время у меня есть скорость направления dx и dy и мой текущий кодпросто инвертирует направление DY.Проблема в том, что мяч будет просто подпрыгивать назад и вперед в одном и том же направлении, независимо от того, где он попал в лопатку.

Я хотел бы создать реалистичный подход, где в зависимости отгде он получает удар по веслу, который определяет направление мяча.Так что, если он попадет прямо в центр, то он просто отскочит назад в том же направлении, откуда он пришел, однако, если он попадет около верхнего края, он отскочит вниз и т. Д.

У меня проблемыузнать, с чего начать этот подход, может кто-то просто направить меня в правильном направлении?

1 Ответ

0 голосов
/ 03 октября 2018

Представьте себе, что вы рассчитываете расстояние между центром весла и точкой удара мяча и называете его 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>
...