<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="body">
    <div id="board">
      <div id="bat" class="bat"></div>
      <div id="ball" class="ball"></div>
    </div>
  </div>


  <script src="script.js"></script>

</body>

</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.body {
  min-height: 100vh;
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

#board {
  background: linear-gradient(rgb(170, 236, 170), rgb(236, 236, 167));
  width: 90vmin;
  height: 92vmin;
  border: 2px solid black;
  display: grid;
  grid-template-rows: repeat(18, 1fr);
  grid-template-columns: repeat(18, 1fr);
  position: relative;
}

.bat {
  background-color: black;
  height: 20px;
  width: 100px;
  position: absolute;
  bottom: 0;
  left: 40%;
}

.ball {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
}
let lastPaintTime = 0;
let speed = 10;
let batPosition = { x: 0, y: 0 }
let ballDirection = { x: 0, y: -1 }

function moveBall() {
  const ball = document.getElementById("ball");
  const ballRect = ball.getBoundingClientRect();
  const board = document.getElementById("board");
  const boardRect = board.getBoundingClientRect();

  ballRect.x = ballRect.x + ballDirection.x;
  ballRect.y = ballRect.y + ballDirection.y;
  const bat = document.getElementById("bat");
  const batRect = bat.getBoundingClientRect();


  if (ballRect.top <= boardRect.top) {
    // perform some action, for example,  console.log("ball touches the top of the box")
    ballDirection = { x: 0, y: 1 }
    document.getElementById("ball").style.transform = document.getElementById("ball").style.transform + `translate(${ballDirection.x}px, ${20 * ballDirection.y}px)`;

  }

  else if (ballRect.bottom >= boardRect.bottom) {
    // perform some action, for example,  console.log("ball touches the bottom of the box")
    // ballDirection = { x: 0, y: -1 }
    // document.getElementById("ball").style.transform = document.getElementById("ball").style.transform + `translate(${ballDirection.x}px, ${20 * ballDirection.y}px)`;

    return;
  }
  else if (ballRect.bottom >= batRect.top && ballRect.bottom <= batRect.bottom && ballRect.right >= batRect.left && ballRect.left <= batRect.right) {
    //bat touches the ball

    ballDirection = { x: 1, y: -1 }
    document.getElementById("ball").style.transform = document.getElementById("ball").style.transform + `translate(${20 * ballDirection.x}px, ${20 * ballDirection.y}px)`;

  }


  else {
    document.getElementById("ball").style.transform = document.getElementById("ball").style.transform + `translate(${ballDirection.x}px, ${20 * ballDirection.y}px)`;
  }







}

function main(ctime) {
  window.requestAnimationFrame(main);
  if ((ctime - lastPaintTime) / 1000 < 1 / speed) {
    return;
  }
  //paint now
  lastPaintTime = ctime;

  //move ball:
  moveBall()
}


//Main logic starts here
window.requestAnimationFrame(main);
window.addEventListener("keydown", function (e) {
  const board = document.getElementById("board");
  const boardRect = board.getBoundingClientRect();
  const bat = document.getElementById("bat");
  const batRect = bat.getBoundingClientRect();

  switch (e.key) {
    case "ArrowLeft":
      batPosition.x = -1;
      batPosition.y = 0;
      //move bat left
      if (batRect.left > boardRect.left) {
        document.getElementById("bat").style.transform = document.getElementById("bat").style.transform + `translate(${20 * batPosition.x}px, ${20 * batPosition.y}px)`;
      }

      break;
    case "ArrowRight":
      batPosition.x = 1;
      batPosition.y = 0;
      //move bat right
      if (batRect.right < boardRect.right) {
        document.getElementById("bat").style.transform = document.getElementById("bat").style.transform + `translate(${20 * batPosition.x}px, ${20 * batPosition.y}px)`;
      }

      break;

  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.