{"id":172,"date":"2026-05-21T16:42:28","date_gmt":"2026-05-21T16:42:28","guid":{"rendered":"https:\/\/dailypuzzle.us\/?page_id=172"},"modified":"2026-05-21T18:29:17","modified_gmt":"2026-05-21T18:29:17","slug":"slide-puzzle","status":"publish","type":"page","link":"https:\/\/dailypuzzle.us\/?page_id=172","title":{"rendered":"Slide Puzzle"},"content":{"rendered":"\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<a href=\"https:\/\/www.jdoqocy.com\/click-101191736-15183521\" target=\"_blank\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.ftjcfx.com\/image-101191736-15183521\" width=\"728\" height=\"90\" alt=\"\" border=\"0\"\/><\/a>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<meta charset=\"UTF-8\">\n<style>\n  body {\n    font-family: Arial, sans-serif;\n    background:#f4f4f4;\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    justify-content:flex-start;\n    min-height:100vh;\n    padding-top:30px;\n  }\n  #puzzle-container {\n    width: 300px;\n    height: 300px;\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-template-rows: repeat(3, 1fr);\n    gap: 4px;\n    background:#333;\n    padding:4px;\n    box-sizing:border-box;\n  }\n  .tile {\n    background:#fff;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    font-size:2rem;\n    cursor:pointer;\n    user-select:none;\n    position:relative;\n    overflow:hidden;\n  }\n  .tile.empty {\n    background:#333;\n    cursor:default;\n  }\n  .tile img {\n    width:100%;\n    height:100%;\n    object-fit:cover;\n    display:block;\n  }\n  #controls {\n    margin-top:15px;\n    display:flex;\n    gap:10px;\n    align-items:center;\n  }\n  button {\n    padding:6px 12px;\n    font-size:0.9rem;\n    cursor:pointer;\n  }\n  #status {\n    margin-top:10px;\n    font-size:0.9rem;\n  }\n<\/style>\n\n\n\n<!-- TITLE REMOVED -->\n\n<div id=\"puzzle-container\"><\/div>\n\n<div id=\"controls\">\n  <button id=\"shuffle-btn\">Shuffle<\/button>\n  <span id=\"variant-label\"><\/span>\n<\/div>\n\n<div id=\"status\"><\/div>\n\n<script>\n\/\/ ================== CONFIGURATION ==================\nconst PUZZLE_VARIANTS = [\n  { id: 0, name: \"Numbers A\", type: \"numbers\", layout: [1,2,3,4,5,6,7,8,0] },\n  { id: 1, name: \"Numbers B\", type: \"numbers\", layout: [1,2,3,4,5,6,0,7,8] },\n  { id: 2, name: \"Numbers C\", type: \"numbers\", layout: [1,2,3,4,0,6,7,5,8] },\n  { id: 3, name: \"Numbers D\", type: \"numbers\", layout: [2,1,3,4,5,6,7,8,0] },\n  { id: 4, name: \"Numbers E\", type: \"numbers\", layout: [2,3,1,4,5,6,7,8,0] },\n  {\n    id: 5,\n    name: \"Image Demo\",\n    type: \"image\",\n    imageUrl: \"https:\/\/via.placeholder.com\/300x300.png?text=Puzzle\",\n    layout: [1,2,3,4,5,6,7,8,0]\n  }\n];\n\n\/\/ ============ VARIANT SELECTION ============\nfunction getVariantIndexFromURL() {\n  const params = new URLSearchParams(window.location.search);\n  const dayParam = params.get(\"day\");\n  if (dayParam !== null) {\n    const idx = parseInt(dayParam, 10);\n    if (!isNaN(idx) && idx >= 0 && idx < PUZZLE_VARIANTS.length) {\n      return idx;\n    }\n  }\n  return Math.floor(Math.random() * PUZZLE_VARIANTS.length);\n}\n\nconst container = document.getElementById(\"puzzle-container\");\nconst statusEl = document.getElementById(\"status\");\nconst variantLabel = document.getElementById(\"variant-label\");\nconst shuffleBtn = document.getElementById(\"shuffle-btn\");\n\nlet currentVariantIndex = getVariantIndexFromURL();\nlet currentVariant = PUZZLE_VARIANTS[currentVariantIndex];\nlet tiles = [];\n\n\/\/ ============ INIT ============\nfunction initPuzzle() {\n  tiles = currentVariant.layout.slice();\n  renderPuzzle();\n  variantLabel.textContent = \"Variant: \" + currentVariant.name + \" (#\" + currentVariant.id + \")\";\n  statusEl.textContent = \"Click tiles next to the empty space to slide.\";\n}\n\nfunction renderPuzzle() {\n  container.innerHTML = \"\";\n  tiles.forEach((value, index) => {\n    const tile = document.createElement(\"div\");\n    tile.classList.add(\"tile\");\n    if (value === 0) {\n      tile.classList.add(\"empty\");\n    } else {\n      if (currentVariant.type === \"numbers\") {\n        tile.textContent = value;\n      } else if (currentVariant.type === \"image\") {\n        const img = document.createElement(\"img\");\n        img.src = currentVariant.imageUrl;\n        tile.appendChild(img);\n      }\n      tile.addEventListener(\"click\", function () {\n        onTileClick(index);\n      });\n    }\n    container.appendChild(tile);\n  });\n}\n\nfunction onTileClick(index) {\n  const emptyIndex = tiles.indexOf(0);\n  if (isAdjacent(index, emptyIndex)) {\n    const temp = tiles[index];\n    tiles[index] = tiles[emptyIndex];\n    tiles[emptyIndex] = temp;\n    renderPuzzle();\n    if (isSolved()) {\n      statusEl.textContent = \"Solved!\";\n    }\n  }\n}\n\nfunction isAdjacent(i, j) {\n  const rowI = Math.floor(i \/ 3);\n  const colI = i % 3;\n  const rowJ = Math.floor(j \/ 3);\n  const colJ = j % 3;\n  return Math.abs(rowI - rowJ) + Math.abs(colI - colJ) === 1;\n}\n\nfunction isSolved() {\n  for (let i = 0; i < 8; i++) {\n    if (tiles[i] !== i + 1) return false;\n  }\n  return tiles[8] === 0;\n}\n\nfunction getNeighbors(index) {\n  const row = Math.floor(index \/ 3);\n  const col = index % 3;\n  const neighbors = [];\n  if (row > 0) neighbors.push(index - 3);\n  if (row < 2) neighbors.push(index + 3);\n  if (col > 0) neighbors.push(index - 1);\n  if (col < 2) neighbors.push(index + 1);\n  return neighbors;\n}\n\nfunction shufflePuzzle(moves = 80) {\n  let emptyIndex = tiles.indexOf(0);\n  for (let m = 0; m < moves; m++) {\n    const neighbors = getNeighbors(emptyIndex);\n    const randNeighbor = neighbors[Math.floor(Math.random() * neighbors.length)];\n    const temp = tiles[emptyIndex];\n    tiles[emptyIndex] = tiles[randNeighbor];\n    tiles[randNeighbor] = temp;\n    emptyIndex = randNeighbor;\n  }\n  renderPuzzle();\n  statusEl.textContent = \"Shuffled. Try to solve it!\";\n}\n\nshuffleBtn.addEventListener(\"click\", function () {\n  shufflePuzzle(80);\n});\n\ninitPuzzle();\n<\/script>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Shuffle<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":34,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-172","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=\/wp\/v2\/pages\/172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=172"}],"version-history":[{"count":5,"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=\/wp\/v2\/pages\/172\/revisions"}],"predecessor-version":[{"id":194,"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=\/wp\/v2\/pages\/172\/revisions\/194"}],"up":[{"embeddable":true,"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=\/wp\/v2\/pages\/34"}],"wp:attachment":[{"href":"https:\/\/dailypuzzle.us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}