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

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 May 2023

Bouton de téléchargement animé

7 June 2025

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

Bouton de téléchargement animé

Un code par alejandrokundrah

Un code de Metehan

HTML

CSS

JS

Recommandé

Bouton de téléchargement animé

Un code par alejandrokundrah

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS