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

400 iroger7

Ouvrir dans l'éditeur Video Publiez votre code

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

Recommandé

30 March 2025

Un code par ytr3d3

24 November 2025

Code source HTML5 du jeu aléatoire de panier

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

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é

Un code par ytr3d3

Code source HTML5 du jeu aléatoire de panier

Modèle HTML de joueur de jeu Ruffle Flash

HTML

CSS

JS

Recommandé

Un code par ytr3d3

Code source HTML5 du jeu aléatoire de panier

Modèle HTML de joueur de jeu Ruffle Flash

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS