.game-container {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.game-area {
  position: relative;
  width: 250px;
  height: 400px;
  border: 2px solid #333;
  margin: 20px auto;
  overflow: hidden;
  background-color: #f9f9f9;
}

.box {
  position: absolute;
  bottom: 10px;
  width: 50px;
  height: 20px;
  background-color: #007bff;
  border-radius: 5px;
}

.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
}

.start-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

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

.share-buttons {
  margin-top: 20px;
  font-size: 18px;
  color: #007bff;
}

<h2>Ball catcher</h2>
<div class="game-container">
  <div class="game-area" id="gameArea">
    <div class="box" id="box"></div>
  </div>
  <p class="score-display">Score: <span id="scoreDisplay">0</span></p>
  <button class="start-btn" id="startBtn">Start Game</button>
  <input type="hidden" id="hiddenScore" value="0">
</div>

const gameArea = document.getElementById("gameArea");
const box = document.getElementById("box");
const startBtn = document.getElementById("startBtn");
const hiddenScore = document.getElementById("hiddenScore");
let score = 0;
let interval;
let ballInterval;
let isGameRunning = false;

function startGame() {
  score = 0;
  hiddenScore.value = score; // Reset score
  isGameRunning = true;
  document.querySelector('.share-buttons').style.display = 'none'; // Hide share buttons
  box.style.left = "125px"; // Reset box position
  spawnBall();
  interval = setInterval(updateGame, 20);
}

function endGame() {
  isGameRunning = false;
  clearInterval(interval);
  clearInterval(ballInterval);
  document.querySelectorAll(".ball").forEach(ball => gameArea.removeChild(ball));
  document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
}

function spawnBall() {
  ballInterval = setInterval(() => {
    const ball = document.createElement("div");
    ball.className = "ball";
    const left = `${Math.random() * 230}px`;
    ball.style.left = left;
    console.log(left);
    ball.style.top = "0px";
    gameArea.appendChild(ball);
  }, 1000);
}

function updateGame() {
  const balls = document.querySelectorAll(".ball");
  balls.forEach(ball => {
    const top = parseInt(ball.style.top.replace("px", ""));
    ball.style.top = `${top + 5}px`;

    // Check if ball hits the bottom
    if (top >= 380) {
      endGame(); // Game over
    }

    // Check if ball is caught
    const ballLeft = parseInt(ball.style.left.replace("px", ""));
    const boxLeft = parseInt(box.style.left.replace("px", ""));
    if (
      top >= 360 &&
      ballLeft + 20 >= boxLeft &&
      ballLeft <= boxLeft + 50
    ) {
      gameArea.removeChild(ball);
      score++;
      scoreDisplay.textContent = score;
      hiddenScore.value = score; // Update hidden score field
    }
  });
}

function moveBox(event) {
  if (!isGameRunning) return;
  const boxLeft = parseInt(box.style.left.replace("px", ""));
  if (event.key === "ArrowLeft" && boxLeft > 0) {
    box.style.left = `${boxLeft - 10}px`;
  } else if (event.key === "ArrowRight" && boxLeft < 200) {
    box.style.left = `${boxLeft + 10}px`;
  }
}

function handleTouchMove(event) {
  if (!isGameRunning) return;
  const touchX = event.touches[0].clientX - gameArea.offsetLeft;
  const boxWidth = 50;
  const gameWidth = 250;

  if (touchX >= 0 && touchX <= gameWidth - boxWidth) {
    box.style.left = `${touchX}px`;
  }
}

startBtn.addEventListener("click", startGame);
window.addEventListener("keydown", moveBox);
gameArea.addEventListener("touchmove", handleTouchMove);