मेमोरी गेम: सीपीयू अनुक्रम जावास्क्रिप्ट की प्रतिलिपि बनाएँ

87 iroger7

संपादक में खोलें अपना कोड प्रकाशित करें

मेमोरी गेम: सीपीयू अनुक्रम जावास्क्रिप्ट की प्रतिलिपि बनाएँ

अनुशंसित

9 September 2024

जावास्क्रिप्ट में क्यूआर कोड जनरेटर

4 December 2025

जावास्क्रिप्ट के साथ SVG क्रिसमस ट्री एनीमेशन

9 September 2024

टिक टीएसी को पैर की अंगुली

HTML

<!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>

मेमोरी गेम: सीपीयू अनुक्रम जावास्क्रिप्ट की प्रतिलिपि बनाएँ

अनुशंसित

जावास्क्रिप्ट में क्यूआर कोड जनरेटर

जावास्क्रिप्ट के साथ SVG क्रिसमस ट्री एनीमेशन

टिक टीएसी को पैर की अंगुली

HTML

CSS

JS

अनुशंसित

जावास्क्रिप्ट में क्यूआर कोड जनरेटर

जावास्क्रिप्ट के साथ SVG क्रिसमस ट्री एनीमेशन

टिक टीएसी को पैर की अंगुली

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS