Click here for free DL of the app version that can save data.

No:41566

Un juego de rompecabezas dónde tienes que armar co..ALL
Developer User18058｜Date and time 24/2/8 12:51:59
Build time 12.685 sec｜Game capacity 3.535KB｜

Script

Juego de rompecabezas de logos de videojuegos

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Juego de rompecabezas de logos de videojuegos</title>
</head>
<body>
  <h1>Juego de rompecabezas de logos de videojuegos</h1>

<div id="puzzle-container"></div>
  <div id="puzzle-controls">
    <button onclick="startGame()">Iniciar juego</button>
  </div>

// Mezclar logos aleatoriamente
    function shuffle(array) {
      let currentIndex = array.length, temporaryValue, randomIndex;
      while (0 !== currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }
      return array;
    }

// Crear el rompecabezas
    function createPuzzle() {
      const puzzleContainer = document.getElementById('puzzle-container');
      const shuffledLogos = shuffle(logos);

shuffledLogos.forEach(function(logo) {
        const puzzlePiece = document.createElement('div');
        puzzlePiece.classList.add('puzzle-piece');
        puzzlePiece.textContent = logo;
        puzzlePiece.addEventListener('click', handleClick);
        puzzleContainer.appendChild(puzzlePiece);
      });
    }

// Revisar si el rompecabezas ha sido resuelto
    function checkSolution() {
      const puzzlePieces = Array.from(document.getElementsByClassName('puzzle-piece'));
      const solution = Array.from(document.getElementsByClassName('solution'));
      
      return puzzlePieces.map(piece => piece.textContent).join('') === solution.join('');
    }
    
    // Procesar el handleClick
    function handleClick(event) {
      const puzzlePiece = event.target;
      
      if (puzzlePiece.classList.contains('solved')) {
        return;
      }
      
      const puzzleContainer = document.getElementById('puzzle-container');
      const solutionContainer = document.getElementById('solution-container');
      
      puzzlePiece.classList.add('solved');
      solutionContainer.appendChild(puzzlePiece);
      
      if (checkSolution()) {
        puzzleContainer.textContent = "¡Has armado todos los logos correctamente!";
      }
    }

// Iniciar el juego
    function startGame() {
      createPuzzle();
      document.getElementById('puzzle-controls').style.display = 'none';
    }
  </script>

.puzzle-piece {
      width: 50px;
      height: 50px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: lightgray;
      border: 2px solid gray;
      border-radius: 5px;
      cursor: pointer;
    }

.solution {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: lightgreen;
      border: 2px solid green;
      border-radius: 5px;
    }

#solution-container {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 10px;
      max-width: 400px;
    }

#puzzle-controls {
      text-align: center;
      margin-top: 20px;
    }
  </style>
</body>
</html>