Avoid the Obstacles

.game-container {
  max-width: 400px;
  margin: 20px auto;
}

.game-area {
  width: 100%;
  height: 300px;
  position: relative;
  border: 2px solid #333;
  margin: 20px auto;
  background-color: #fff;
  overflow: hidden;
}

.player {
  width: 30px;
  height: 30px;
  background-color: #007bff;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.obstacle {
  width: 30px;
  height: 30px;
  background-color: #ff0000;
  position: absolute;
  top: -30px;
  border-radius: 50%;
}

.start-btn {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.start-btn:hover {
  background-color: #555;
}

<div class="game-container">
  <h1>Avoid the Obstacles</h1>
  <p>Score: <span id="score">0</span></p>
  <div class="game-area" id="gameArea">
    <div class="player" id="player"></div>
  </div>
   <button class="start-btn" id="startBtn">Start</button>
  <input type="hidden" id="hiddenScore" value="0">
</div>

const gameArea = document.getElementById("gameArea");
const startBtn = document.getElementById("startBtn");
const player = document.getElementById("player");
const scoreDisplay = document.getElementById("score");
const hiddenScore = document.getElementById("hiddenScore");
let score = 0;
let gameInterval;
let obstacleInterval;
let obstacleSpeed = 5; // Starting speed of obstacles
let spawnRate = 1000; // Time between new obstacles

function startGame() {
  document.querySelector('.share-buttons').style.display = 'none'; // Hide share buttons
  score = 0;
  scoreDisplay.textContent = score;
  hiddenScore.value = score;

  startBtn.style.display = "none";
  gameArea.focus();

  obstacleSpeed = 5; // Reset speed
  spawnRate = 1000; // Reset spawn rate

  // Generate obstacles
  obstacleInterval = setInterval(spawnObstacle, spawnRate);

  // Increment score every second
  gameInterval = setInterval(() => {
    score++;
    scoreDisplay.textContent = score;
    hiddenScore.value = score; // Update hidden score field

    // Increase speed every 5 points
    if (score % 5 === 0) {
      obstacleSpeed += 1; // Increase speed
      if (spawnRate > 500) {
        spawnRate -= 50; // Decrease spawn rate (minimum 500ms)
        clearInterval(obstacleInterval);
        obstacleInterval = setInterval(spawnObstacle, spawnRate);
      }
    }
  }, 1000);

  // Enable touch controls for mobile
  enableTouchControls();

  // Player movement with keyboard
  document.addEventListener("keydown", movePlayer);
}

function movePlayer(event) {
  const playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
  const areaWidth = gameArea.offsetWidth;

  if (event.key === "ArrowLeft" && playerLeft > 0) {
    player.style.left = playerLeft - 20 + "px";
  }
  if (event.key === "ArrowRight" && playerLeft < areaWidth - 30) {
    player.style.left = playerLeft + 20 + "px";
  }
}

function enableTouchControls() {
  gameArea.addEventListener("touchstart", handleTouch);
  gameArea.addEventListener("touchmove", handleTouch);
}

function handleTouch(event) {
  const touchX = event.touches[0].clientX; // Get touch position
  const gameAreaLeft = gameArea.offsetLeft; // Get game area position
  const playerWidth = player.offsetWidth;

  // Move player to touch position
  const newLeft = touchX - gameAreaLeft - playerWidth / 2;
  const areaWidth = gameArea.offsetWidth;

  if (newLeft >= 0 && newLeft <= areaWidth - playerWidth) {
    player.style.left = newLeft + "px";
  }
}

function spawnObstacle() {
  const obstacle = document.createElement("div");
  obstacle.className = "obstacle";

  const maxWidth = gameArea.offsetWidth - 30;
  obstacle.style.left = Math.random() * maxWidth + "px";

  gameArea.appendChild(obstacle);

  let obstacleMove = setInterval(() => {
    const obstacleTop = parseInt(window.getComputedStyle(obstacle).getPropertyValue("top"));
    const playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
    const playerTop = parseInt(window.getComputedStyle(player).getPropertyValue("top"));
    const obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue("left"));

    // Collision detection
    if (obstacleTop > 270 && obstacleTop < 300 && Math.abs(playerLeft - obstacleLeft) < 30) {
      endGame();
      clearInterval(obstacleMove);
      return;
    }

    if (obstacleTop > 300) {
      gameArea.removeChild(obstacle);
      clearInterval(obstacleMove);
    } else {
      obstacle.style.top = obstacleTop + obstacleSpeed + "px";
    }
  }, 30);
}

function endGame() {
  document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
  startBtn.style.display = "block";
  clearInterval(gameInterval);
  clearInterval(obstacleInterval);

  const obstacles = document.querySelectorAll(".obstacle");
  obstacles.forEach(obstacle => gameArea.removeChild(obstacle));

  document.removeEventListener("keydown", movePlayer);
  gameArea.removeEventListener("touchstart", handleTouch);
  gameArea.removeEventListener("touchmove", handleTouch);
}

startBtn.addEventListener("click", startGame);