HTML Editor

Edita código
<!DOCTYPE html>
<html>
<head>
<title>Puzzle de 16 piezas</title>
<style>
  body {
    margin: 0;
    padding: 0;
	height: 100vh;
    background-color: #d0f0f0;
    margin: 0;
  }

  #puzzle-container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid black;
    display: grid;
    grid-template-columns: repeat(4, 125px); /* 4 columnas para 16 piezas */
    grid-template-rows: repeat(4, 125px); /* 4 filas para 16 piezas */
  }

  .pieza {
    width: 100%; /* Ajustar al tamaño de la celda de la grilla */
    height: 100%; /* Ajustar al tamaño de la celda de la grilla */
    border: 1px solid white;
    box-sizing: border-box;
    background-size: 500px 500px; /* Ajustar la imagen de fondo al tamaño completo */
  }

  #success-message {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5em;
    color: #00ff00;
  }
</style>
</head>
<body style="overflow: hidden">

<div id="puzzle-container"></div>
<div id="success-message">¡Bien logrado!</div>

<script>
  const imageSrc = 'images/imagen2.jpg'; // Ruta a la imagen

  const puzzleContainer = document.getElementById('puzzle-container');
  const successMessage = document.getElementById('success-message');
  const gridSize = 4; // 4x4 grid for 16 pieces
  let pieces = []; // Almacenar las piezas para la comprobación

  // Create the puzzle pieces
  function createPuzzlePieces() {
    const pieceIndexes = [];
    for (let i = 0; i < gridSize * gridSize; i++) {
      pieceIndexes.push(i); // Llenar un array con los índices de las piezas
    }
    shuffle(pieceIndexes); // Desordenar los índices

    for (let i = 0; i < pieceIndexes.length; i++) {
      const pieceIndex = pieceIndexes[i]; // Obtener un índice desordenado
      const piece = document.createElement('div');
      piece.classList.add('pieza');
      piece.dataset.index = pieceIndex; // Guardar el índice original

      const col = pieceIndex % gridSize; // Calcular la columna correcta
      const row = Math.floor(pieceIndex / gridSize); // Calcular la fila correcta
      piece.style.backgroundImage = `url(${imageSrc})`;
      piece.style.backgroundPosition = `-${col * 125}px -${row * 125}px`;

      // Agregar la pieza al contenedor
      puzzleContainer.appendChild(piece);
      pieces.push(piece);

      // Drag and drop functionality
      piece.setAttribute('draggable', true);
      piece.addEventListener('dragstart', handleDragStart);
      piece.addEventListener('dragover', handleDragOver);
      piece.addEventListener('drop', handleDrop);
    }
  }

  // Función para desordenar un array (Fisher-Yates Shuffle)
  function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }

  let draggedPiece = null;

  function handleDragStart(event) {
    draggedPiece = event.target;
  }

  function handleDragOver(event) {
    event.preventDefault();
  }

  function handleDrop(event) {
    event.preventDefault();
    if (event.target !== draggedPiece && event.target.classList.contains('pieza')) {
      const draggedIndex = Array.from(puzzleContainer.children).indexOf(draggedPiece);
      const targetIndex = Array.from(puzzleContainer.children).indexOf(event.target);

      // Intercambiar las piezas
      const temp = pieces[draggedIndex];
      pieces[draggedIndex] = pieces[targetIndex];
      pieces[targetIndex] = temp;

      // Intercambiar posiciones en el DOM
      puzzleContainer.insertBefore(draggedPiece, event.target);
      if (targetIndex < draggedIndex) {
        puzzleContainer.insertBefore(event.target, puzzleContainer.children[draggedIndex + 1]);
      } else {
        puzzleContainer.insertBefore(event.target, puzzleContainer.children[draggedIndex]);
      }

      // Verificar si el rompecabezas está resuelto
      if (isPuzzleSolved()) {
        successMessage.style.display = 'block';
      }
    }
  }

  function isPuzzleSolved() {
    for (let i = 0; i < pieces.length; i++) {
      if (parseInt(pieces[i].dataset.index) !== i) {
        return false;
      }
    }
    return true;
  }

  createPuzzlePieces();
</script>

</body>
</html>