用纯JavaScript在Pong游戏中旋转球

Question

我正在尝试完成我的作业，并对书面代码进行一些修改。尝试进行一些轮换，但不能再做更多了。

触摸保护程序，屏幕底部或屏幕顶部时，球应像镜子一样移动。

您可以在这里https://jsfiddle.net/sbay142z/

中查看所有内容

它只是从下往上移动。

如何计算它应该移动的角度？

var CONSTS = {
  gameSpeed: 20,
  score1: 0,
  score2: 0,
  stick1Speed: 0,
  stick2Speed: 0,
  ballTopSpeed: 0,
  ballLeftSpeed: 0,

};

function roll() {
  CSS.ball.top = 550;
  CSS.ball.left = 350;
  var side = -1;
  if (Math.random() > 0.5) {
    side = 1;
  }
  CONSTS.ballTopSpeed = Math.random() * -2 - 3;
  CONSTS.ballLeftSpeed = side * (Math.random() * 2 + 3);
}

function loop() {
  window.pongLoop = setInterval(function () {
    CSS.stick1.top += CONSTS.stick1Speed;
    $('#stick-1').css('top', CSS.stick1.top);

    CSS.stick2.top += CONSTS.stick2Speed;
    $('#stick-2').css('top', CSS.stick2.top);

    CSS.ball.top += CONSTS.ballTopSpeed;
    CSS.ball.left = CSS.arena.width / 2 - 7;

    if (CSS.ball.top <= 0 ||
      CSS.ball.top >= CSS.arena.height - CSS.ball.height) {
      CONSTS.ballTopSpeed = CONSTS.ballTopSpeed * -1;
    }

    $('#pong-ball').css({
      top: CSS.ball.top,
      left: CSS.ball.left
    });

    if (CSS.ball.left <= CSS.stick.width) {
      CSS.ball.top > CSS.stick1.top && CSS.ball.top < CSS.stick1.top + CSS.stick.height && (CONSTS.ballLeftSpeed = CONSTS.ballLeftSpeed * -1) || roll();
    }

    if (CSS.ball.left >= CSS.arena.width - CSS.ball.width - CSS.stick.width) {
      roll();
    }
  }, CONSTS.gameSpeed);
}