Memory Game: Copy CPU Sequence JavaScript

851 iroger7

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Copy the CPU's Moves</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }
    h1 {
      color: #333;
      margin-top: 20px;
    }
    #game-board {
      margin: 20px auto;
      width: 320px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tile {
      width: 140px;
      height: 140px;
      margin: 10px;
      border-radius: 10px;
      cursor: pointer;
      transition: opacity 0.2s ease;
    }
    .tile.active {
      opacity: 0.5;
    }
    #start-button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 18px;
      cursor: pointer;
    }
    #message {
      margin-top: 20px;
      font-size: 20px;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>Copy the CPU's Moves</h1>
  <div id="game-board">
    
    <div class="tile" id="tile1" data-index="0" style="background-color: #ff4c4c;"></div>
    <div class="tile" id="tile2" data-index="1" style="background-color: #4cff4c;"></div>
    <div class="tile" id="tile3" data-index="2" style="background-color: #4c4cff;"></div>
    <div class="tile" id="tile4" data-index="3" style="background-color: #ffff4c;"></div>
  </div>
  <button id="start-button">Start Game</button>
  <div id="message"></div>

// Start a new game
    function startGame() {
      sequence = [];
      level = 0;
      nextLevel();
    }

// Advance to the next level by adding a new move
    function nextLevel() {
      level++;
      document.getElementById('message').innerText = "Level " + level;
      playerSequence = [];
      // Generate a random move (0 to 3) and add it to the sequence
      const randomMove = Math.floor(Math.random() * 4);
      sequence.push(randomMove);
      playSequence();
    }

// CPU plays the sequence with a delay between moves
    function playSequence() {
      acceptingInput = false;
      let delay = 500;
      sequence.forEach((move, index) => {
        setTimeout(() => {
          activateTile(move);
        }, delay * (index + 1));
      });
      // Allow player input after sequence playback
      setTimeout(() => {
        acceptingInput = true;
      }, delay * (sequence.length + 1));
    }

// Highlight a tile to indicate its activation
    function activateTile(index) {
      const tile = document.querySelector(`.tile[data-index="${index}"]`);
      tile.classList.add('active');
      setTimeout(() => {
        tile.classList.remove('active');
      }, 300);
    }

// Listen for player clicks on each tile
    tiles.forEach(tile => {
      tile.addEventListener('click', () => {
        if (!acceptingInput) return;
        const index = parseInt(tile.getAttribute('data-index'));
        playerSequence.push(index);
        activateTile(index);
        // Validate the move
        if (playerSequence[playerSequence.length - 1] !== sequence[playerSequence.length - 1]) {
          gameOver();
          return;
        }
        // If sequence is completed correctly, move to next level
        if (playerSequence.length === sequence.length) {
          acceptingInput = false;
          setTimeout(() => nextLevel(), 1000);
        }
      });
    });

// Handle game over scenario
    function gameOver() {
      document.getElementById('message').innerText = "Game Over! You reached level " + level;
      acceptingInput = false;
    }

// Bind the start button to start a new game
    document.getElementById('start-button').addEventListener('click', startGame);
  </script>
</body>
</html>

CSS

Memory Game: Copy CPU Sequence JavaScript

Recommended