Jeu de mémoire : Copier la séquence du processeur JavaScript

404 iroger7

Ouvrir dans l'éditeur Video Publiez votre code

Jeu de mémoire : Copier la séquence du processeur JavaScript

Recommandé

19 May 2025

menu de la barre de navigation

27 May 2025

Un code par mironovbogdan341

21 January 2025

CodePen Accueil Étoiles et vitesse de distorsion

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>

Jeu de mémoire : Copier la séquence du processeur JavaScript

Recommandé

menu de la barre de navigation

Un code par mironovbogdan341

CodePen Accueil Étoiles et vitesse de distorsion

HTML

CSS

JS

Recommandé

menu de la barre de navigation

Un code par mironovbogdan341

CodePen Accueil Étoiles et vitesse de distorsion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS