<!DOCTYPE html>
<html>
<head>
  <title>Block Removal Game</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: 'Arial', sans-serif;
      overflow: hidden; /* Prevent scrollbars */
    }

    #gameContainer {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      position: relative; /* For positioning game over elements */
    }

    #score {
      font-size: 20px;
      margin-bottom: 10px;
    }

    #level {
      font-size: 18px;
      margin-bottom: 10px;
    }

    #grid {
      display: grid;
      grid-template-columns: repeat(5, 50px); /* Adjust for desired columns */
      grid-gap: 5px;
      width: fit-content;
      margin: 0 auto;
    }

    .block {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .block.red {
      background-color: red;
    }

    .block.blue {
      background-color: blue;
    }

    .block.green {
      background-color: green;
    }

    .block.yellow {
      background-color: yellow;
    }

    .block:hover {
      background-color: #ccc;
    }

    .block.falling {
      animation: fall 0.5s ease-out;
    }

    @keyframes fall {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(50px); /* Adjust for block height */
      }
    }

    #gameOver {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      display: none;
      font-size: 24px;
      text-align: center;
    }

    #gameOver button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #gameOver button:hover {
      background-color: #3e8e41;
    }

    @media (max-width: 600px) {
      #grid {
        grid-template-columns: repeat(4, 50px); /* Adjust grid columns for smaller screens */
      }

      #gameOver {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="score">Score: 0</div>
    <div id="level">Level: 1</div>
    <div id="grid"></div>
    <div id="gameOver">
      <h2>Game Over!</h2>
      <p>Your final score: <span id="finalScore"></span></p>
      <button id="restartButton">Play Again</button>
    </div>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const scoreElement = document.getElementById('score');
    const levelElement = document.getElementById('level');
    const gameOverElement = document.getElementById('gameOver');
    const finalScoreElement = document.getElementById('finalScore');
    const restartButton = document.getElementById('restartButton');
    let score = 0;
    let level = 1;
    let gridSize = 5; // Adjust for grid size
    let blocks = []; // Array to store block elements
    let fallSpeed = 500; // Adjust falling speed in milliseconds
    const colors = ['red', 'blue', 'green', 'yellow']; // Colors for blocks

    // Function to create the game grid
    function createGrid() {
      grid.innerHTML = ''; // Clear existing grid
      blocks = []; // Reset block array
      for (let i = 0; i < gridSize * gridSize; i++) {
        const block = document.createElement('div');
        block.classList.add('block');
        block.classList.add(colors[Math.floor(Math.random() * colors.length)]); // Random color
        block.addEventListener('click', removeBlock);
        grid.appendChild(block);
        blocks.push(block);
      }
    }

    // Function to remove a block
    function removeBlock(event) {
      const block = event.target;
      const blockIndex = blocks.indexOf(block); // Get index from blocks array
      const row = Math.floor(blockIndex / gridSize);

      // Remove the block with animation
      block.classList.add('falling'); // Add 'falling' class for animation
      setTimeout(() => {
        block.remove();
        updateBlocksAfterRemoval(blockIndex); // Update blocks after removal
        score += 10; // Award points (you can customize)
        scoreElement.textContent = 'Score: ' + score;
        // Play a sound effect (you'll need to add audio files)
        const popSound = new Audio('pop.mp3'); // Replace with actual sound file
        popSound.play();
      }, fallSpeed); // Adjust delay for animation

      // Check for level up (implement your logic here)
      if (score >= level * 10) { // Example: Level up every 10 points
        level++;
        levelElement.textContent = 'Level: ' + level;
        // Increase grid size or add other level up effects
        gridSize++; // Increase grid size for next level
        createGrid(); // Recreate the grid with the new size
        fallSpeed = fallSpeed * 0.9; // Speed up falling blocks (optional)
      }

      // Check for game over
      if (checkGameOver()) {
        gameOver();
      }
    }

    // Function to update blocks after a block is removed
    function updateBlocksAfterRemoval(blockIndex) {
      for (let i = blockIndex - 1; i >= 0; i--) {
        if (blocks[i].textContent) {
          blocks[blockIndex].textContent = blocks[i].textContent;
          blocks[i].textContent = '';
          blockIndex = i; // Continue from the previous block
        }
      }
    }

    // Function to check for game over
    function checkGameOver() {
      // Check if any block is at the top
      for (let i = 0; i < gridSize; i++) {
        if (blocks[i].textContent) {
          return true; // Game over
        }
      }
      return false; // Game continues
    }

    // Function to handle game over
    function gameOver() {
      gameOverElement.style.display = 'block';
      finalScoreElement.textContent = score;
      restartButton.addEventListener('click', restartGame);
    }

    // Function to restart the game
    function restartGame() {
      score = 0;
      level = 1;
      gridSize = 5; // Reset grid size
      fallSpeed = 500; // Reset falling speed
      scoreElement.textContent = 'Score: 0';
      levelElement.textContent = 'Level: 1';
      gameOverElement.style.display = 'none';
      createGrid();
    }

    // Start the game
    createGrid();
  </script>
</body>
</html>
