pz.dnd

<!DOCTYPE html>
<html>
<head>
  <title>Image Puzzle</title>
</head>
<body>
  <style>
    .tile {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background-color: lightgray;
    }
    .hidden {
      background-color: black;
      background-size: 300px 100px;
      background-position: -100px 0;
    }
  </style>
  <div id="puzzle">
    <div class="tile" onclick="reveal(0)"></div>
    <div class="tile" onclick="reveal(1)"></div>
    <div class="tile" onclick="reveal(2)"></div>
    <div class="tile" onclick="reveal(3)"></div>
    <div class="tile" onclick="reveal(4)"></div>
    <div class="tile" onclick="reveal(5)"></div>
    <div class="tile" onclick="reveal(6)"></div>
    <div class="tile" onclick="reveal(7)"></div>
    <div class="tile" onclick="reveal(8)"></div>
  </div>
  <script>
    var correctOrder = [6, 1, 5, 7, 0, 3, 8, 2, 4];

    var revealed = [false, false, false, false, false, false, false, false, false];
    var currentIndex = 0;

    function reveal(i) {
      if (revealed[i]) {
        return;
      }
      if (correctOrder[currentIndex] === i) {
        revealed[i] = true;
        currentIndex++;
        document.getElementById('puzzle').children[i].classList.add('hidden');
      } else {
        resetPuzzle();
      }
      if (currentIndex === 9) {
        alert('You solved the puzzle!');
      }
    }

    function resetPuzzle() {
      for (var i = 0; i < 9; i++) {
        revealed[i] = false;
        document.getElementById('puzzle').children[i].classList.remove('hidden');
      }
      currentIndex = 0;
      //alert('You clicked on a tile out of order. The puzzle has been reset.');
    }

  </script>
</body>
</html>