JSFiddle - React, Tailwind, and code Playground

by Mylastwish

HTML

<div id="puzzle-container">
  <div class="puzzle-piece" data-idx="0" onclick="movePiece(this)"></div>
  <div class="puzzle-piece" data-idx="1" onclick="movePiece(this)"></div>
  <div class="puzzle-piece" data-idx="2" onclick="movePiece(this)"></div>
  <div class="puzzle-piece" data-idx="3" onclick="movePiece(this)"></div>
  <div class="puzzle-piece" data-idx="4" onclick="movePiece(this)"></div>
  <div class="puzzle-piece" data-idx="5" onclick="movePiece(this)"></div>
  <div class="puzzle-piece" data-idx="6" onclick="movePiece(this)"></div>
  <div class="puzzle-piece" data-idx="7" onclick="movePiece(this)"></div>
  <div class="puzzle-piece empty" id="empty" data-idx="8"></div>
</div>

CSS

#puzzle-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 2px;
  width: 304px;
  margin: 20px auto;
  border: 2px solid #333;
}

.puzzle-piece {
  width: 100px;
  height: 100px;
  /* VERVANG DE LINK HIERONDER DOOR JOUW AFBEELDING */
  background-image: url('https://i.postimg.cc/cCQVH0G0/550x550.jpg');
  background-size: 300px 300px;
  cursor: pointer;
  user-select: none;
}

.puzzle-piece.empty {
  background-image: none !important;
  background-color: #ffffff;
  cursor: default;
}

JavaScript

// Bij het laden krijgt elk vakje automatisch het juiste stukje afbeelding toegewezen
function setupPuzzle() {
  const pieces = document.querySelectorAll('.puzzle-piece');
  pieces.forEach(piece => {
    const idx = parseInt(piece.getAttribute('data-idx'));
    // Bereken de X en Y positie van de afbeelding voor dit specifieke stukje
    const x = (idx % 3) * -100;
    const y = Math.floor(idx / 3) * -100;
    piece.style.backgroundPosition = `${x}px ${y}px`;
  });
  
  // Pas daarna husselen
  shufflePuzzle();
}

function movePiece(piece) {
  const empty = document.getElementById('empty');
  if (!empty) return; // Gestopt als de puzzel al af is

  const container = document.getElementById('puzzle-container');
  const pieces = Array.from(container.children);
  
  const pieceIndex = pieces.indexOf(piece);
  const emptyIndex = pieces.indexOf(empty);
  
  const pieceRow = Math.floor(pieceIndex / 3);
  const pieceCol = pieceIndex % 3;
  const emptyRow = Math.floor(emptyIndex / 3);
  const emptyCol = emptyIndex % 3;

  // Check of het geklikte vakje direct naast de lege plek staat
  const isAdjacent = (Math.abs(pieceRow - emptyRow) + Math.abs(pieceCol - emptyCol)) === 1;

  if (isAdjacent) {
    // Wissel de posities fysiek om in de HTML grid
    const tempNode = document.createTextNode("");
    piece.parentNode.insertBefore(tempNode, piece);
    empty.parentNode.insertBefore(piece, empty);
    tempNode.parentNode.insertBefore(empty, tempNode);
    tempNode.parentNode.removeChild(tempNode);
    
    // Check direct of de speler gewonnen heeft
    checkWin();
  }
}

function shufflePuzzle() {
  const container = document.getElementById('puzzle-container');
  
  // We doen 100 willekeurige fysieke zetten om te husselen
  for (let i = 0; i < 100; i++) {
    const empty = document.getElementById('empty');
    const pieces = Array.from(container.children);
    const emptyIndex = pieces.indexOf(empty);
    
    const...