Mini Soccer Game

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mini Soccer Game</title>
<style>
  body {
    background: #2e8b57;
    margin: 0;
    overflow: hidden;
  }
  #field {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: green;
  }
  #player {
    position: absolute;
    width: 40px;
    height: 40px;
    background: yellow;
    border-radius: 50%;
    top: 50%;
    left: 50%;
  }
  #ball {
    position: absolute;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 50%;
    top: 40%;
    left: 40%;
  }
  #goal {
    position: absolute;
    width: 150px;
    height: 60px;
    background: #ffffff55;
    border: 3px solid white;
    top: 10px;
    left: calc(50% - 75px);
  }
  #message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    display: none;
  }
</style>
</head>
<body>
<div id="field">
  <div id="goal"></div>
  <div id="player"></div>
  <div id="ball"></div>
  <div id="message">GOAL!</div>
</div>

<script>
  const player = document.getElementById("player");
  const ball = document.getElementById("ball");
  const goal = document.getElementById("goal");
  const msg = document.getElementById("message");

  let px = window.innerWidth / 2;
  let py = window.innerHeight / 2;

  document.addEventListener("keydown", (e) => {
    const speed = 10;

    if (e.key === "ArrowUp") py -= speed;
    if (e.key === "ArrowDown") py += speed;
    if (e.key === "ArrowLeft") px -= speed;
    if (e.key === "ArrowRight") px += speed;

    player.style.left = px + "px";
    player.style.top = py + "px";

    // Collision with ball
    const pRect = player.getBoundingClientRect();
    const bRect = ball.getBoundingClientRect();

    if (!(pRect.right < bRect.left ||
          pRect.left > bRect.right ||
          pRect.bottom < bRect.top ||
          pRect.top > bRect.bottom)) {
      ball.style.left = (px + 20) + "px";
      ball.style.top = (py + 20) + "px";
    }

    // Check goal
    const gRect = goal.getBoundingClientRect();
    const ballRect = ball.getBoundingClientRect();

    if (ballRect.top < gRect.bottom &&
        ballRect.left > gRect.left &&
        ballRect.right < gRect.right) {
      msg.style.display = "block";
    }
  });
</script>
</body>
</html>