Untitled

<!DOCTYPE html>
<html>
<head>
<title>Simple Car Game</title>
<style>
  body {
        margin: 0;
            overflow: hidden;
                background: #333;
  }
    #gameArea {
            width: 300px;
                height: 500px;
                    background: gray;
                        margin: auto;
                            position: relative;
                                overflow: hidden;
                                    border: 4px solid white;
    }
      .car {
            width: 50px;
                height: 100px;
                    background: red;
                        position: absolute;
                            bottom: 10px;
                                left: 125px;
      }
        .enemy {
                width: 50px;
                    height: 100px;
                        background: yellow;
                            position: absolute;
                                top: -120px;
                                    left: 125px;
        }
        </style>
        </head>

        <body>

        <div id="gameArea">
          <div class="car" id="playerCar"></div>
            <div class="enemy" id="enemyCar"></div>
            </div>

            <script>
            let player = document.getElementById("playerCar");
            let enemy = document.getElementById("enemyCar");
            let gameArea = document.getElementById("gameArea");

            let position = 125;

            document.addEventListener("keydown", function(e) {
                  if (e.key === "ArrowLeft" && position > 0) {
                        position -= 25;
                  }
                    if (e.key === "ArrowRight" && position < 250) {
                            position += 25;
                    }
                      player.style.left = position + "px";
            });

            function moveEnemy() {
                  let enemyTop = enemy.offsetTop;
                    enemy.style.top = enemyTop + 5 + "px";

                      if (enemyTop > 500) {
                            enemy.style.top = "-120px";
                                enemy.style.left = Math.floor(Math.random() * 250) + "px";
                      }

                        // Collision detection
                          if (
                                enemyTop > 380 &&
                                    parseInt(enemy.style.left) === position
                          ) {
                                alert("Game Over!");
                                    enemy.style.top = "-120px";
                          }

                            requestAnimationFrame(moveEnemy);
            }

            moveEnemy();
            </script>

            </body>
            </html>
                          }
                          )
                      }
            }
                    }
                  }
            })
        }
      }
    }
  }