Quebra-Cabe\u00e7a Deslizante<\/title>\n <style>\n #puzzle-game-wrapper {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n margin: 0;\n }\n\n #puzzle-game-wrapper * {\n box-sizing: border-box;\n }\n\n #puzzle-game-wrapper .game-container {\n background: white;\n border-radius: 20px;\n padding: 30px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n max-width: 500px;\n width: 100%;\n }\n\n #puzzle-game-wrapper .game-title {\n text-align: center;\n color: #10b981;\n margin: 0 0 10px 0;\n font-size: 2em;\n font-weight: bold;\n }\n\n #puzzle-game-wrapper .game-instructions {\n text-align: center;\n color: #6b7280;\n margin: 0 0 20px 0;\n font-size: 1.1em;\n }\n\n #puzzle-game-wrapper .game-info {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n padding: 15px;\n background: #f8f9fa;\n border-radius: 10px;\n }\n\n #puzzle-game-wrapper .game-info div {\n text-align: center;\n }\n\n #puzzle-game-wrapper .game-info-label {\n font-size: 0.9em;\n color: #666;\n margin-bottom: 5px;\n }\n\n #puzzle-game-wrapper .game-info-value {\n font-size: 1.5em;\n font-weight: bold;\n color: #10b981;\n }\n\n #puzzle-game-wrapper .game-puzzle {\n position: relative;\n background: #e9ecef;\n padding: 3px;\n border-radius: 15px;\n margin-bottom: 20px;\n width: 100%;\n aspect-ratio: 1;\n }\n\n #puzzle-game-wrapper .game-tile {\n position: absolute;\n background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);\n border: none;\n border-radius: 5px;\n font-size: 2em;\n font-weight: bold;\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 5px rgba(0,0,0,0.15);\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n overflow: hidden;\n transition: top 0.3s ease, left 0.3s ease;\n }\n\n #puzzle-game-wrapper .game-tile:hover {\n z-index: 10;\n box-shadow: 0 4px 10px rgba(0,0,0,0.35);\n filter: brightness(1.1);\n }\n\n #puzzle-game-wrapper .game-buttons {\n display: flex;\n gap: 10px;\n margin-bottom: 15px;\n }\n\n #puzzle-game-wrapper .game-button {\n flex: 1;\n padding: 15px;\n background: #10b981;\n color: white;\n border: none;\n border-radius: 10px;\n font-size: 1em;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n #puzzle-game-wrapper .game-button:hover {\n background: #059669;\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);\n }\n\n #puzzle-game-wrapper .game-message {\n text-align: center;\n padding: 20px;\n border-radius: 15px;\n font-weight: bold;\n font-size: 1.2em;\n margin-bottom: 15px;\n display: none;\n animation: slideIn 0.5s ease;\n }\n\n #puzzle-game-wrapper .game-message.show {\n display: block;\n }\n\n #puzzle-game-wrapper .game-message.success {\n background: #c6f6d5;\n color: #22543d;\n }\n\n #puzzle-game-wrapper .game-message.info {\n background: #dbeafe;\n color: #1e40af;\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n #puzzle-game-wrapper .game-title {\n font-size: 1.5em;\n }\n \n #puzzle-game-wrapper .game-tile {\n font-size: 1.5em;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"puzzle-game-wrapper\">\n <div class=\"game-container\">\n <h1 class=\"game-title\">\u2705 Vamos jogar!<\/h1>\n \n <p class=\"game-instructions\">Clique nas pe\u00e7as adjacentes ao espa\u00e7o vazio para mov\u00ea-las<\/p>\n \n <div class=\"game-info\">\n <div>\n <div class=\"game-info-label\">Movimentos<\/div>\n <div class=\"game-info-value\" id=\"moves\">0<\/div>\n <\/div>\n <div>\n <div class=\"game-info-label\">Tempo<\/div>\n <div class=\"game-info-value\" id=\"time\">0min 0s<\/div>\n <\/div>\n <\/div>\n\n <div class=\"game-puzzle\" id=\"puzzle\"><\/div>\n\n <div class=\"game-buttons\">\n <button class=\"game-button\" id=\"newGame\">\ud83c\udfae Novo Jogo<\/button>\n <button class=\"game-button\" id=\"solve\">\u2728 Resolver<\/button>\n <\/div>\n\n <div class=\"game-message\" id=\"message\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n const tileImages = [\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_1.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_2.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_3.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_4.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_5.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_6.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_7.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_8.jpg'\n ];\n\n let tiles = [];\n let emptyIndex = 8;\n let moves = 0;\n let seconds = 0;\n let timerInterval = null;\n let gameStarted = false;\n let tileSize = 0;\n\n const puzzleEl = document.getElementById('puzzle');\n const movesEl = document.getElementById('moves');\n const timeEl = document.getElementById('time');\n const messageEl = document.getElementById('message');\n const newGameBtn = document.getElementById('newGame');\n const solveBtn = document.getElementById('solve');\n\n function showMessage(text, type) {\n messageEl.textContent = text;\n messageEl.className = `game-message ${type} show`;\n }\n\n function hideMessage() {\n messageEl.className = 'game-message';\n }\n\n function calculateTileSize() {\n const puzzleWidth = puzzleEl.clientWidth - 6;\n tileSize = (puzzleWidth - 6) \/ 3;\n }\n\n function getPosition(index) {\n const row = Math.floor(index \/ 3);\n const col = index % 3;\n return {\n top: 3 + row * (tileSize + 3),\n left: 3 + col * (tileSize + 3)\n };\n }\n\n function initGame() {\n tiles = [1, 2, 3, 4, 5, 6, 7, 8, 0];\n shuffleTiles();\n renderPuzzle();\n resetStats();\n }\n\n function shuffleTiles() {\n for (let i = 0; i < 100; i++) {\n const validMoves = getValidMoves();\n const randomMove = validMoves[Math.floor(Math.random() * validMoves.length)];\n [tiles[emptyIndex], tiles[randomMove]] = [tiles[randomMove], tiles[emptyIndex]];\n emptyIndex = randomMove;\n }\n }\n\n function getValidMoves() {\n const moves = [];\n const row = Math.floor(emptyIndex \/ 3);\n const col = emptyIndex % 3;\n\n if (row > 0) moves.push(emptyIndex - 3);\n if (row < 2) moves.push(emptyIndex + 3);\n if (col > 0) moves.push(emptyIndex - 1);\n if (col < 2) moves.push(emptyIndex + 1);\n\n return moves;\n }\n\n function renderPuzzle() {\n calculateTileSize();\n puzzleEl.innerHTML = '';\n \n tiles.forEach((value, index) => {\n if (value === 0) return;\n \n const tile = document.createElement('div');\n tile.className = 'game-tile';\n tile.style.backgroundImage = `url('${tileImages[value - 1]}')`;\n tile.style.width = tileSize + 'px';\n tile.style.height = tileSize + 'px';\n tile.dataset.value = value;\n \n const pos = getPosition(index);\n tile.style.top = pos.top + 'px';\n tile.style.left = pos.left + 'px';\n \n tile.addEventListener('click', () => moveTile(value));\n puzzleEl.appendChild(tile);\n });\n }\n\n function moveTile(value) {\n if (!gameStarted) {\n startTimer();\n gameStarted = true;\n }\n\n \/\/ Find current index of clicked tile\n const clickedIndex = tiles.indexOf(value);\n const validMoves = getValidMoves();\n \n if (!validMoves.includes(clickedIndex)) return;\n\n \/\/ Find and move the tile element\n const tileElement = puzzleEl.querySelector(`[data-value=\"${value}\"]`);\n const newPos = getPosition(emptyIndex);\n tileElement.style.top = newPos.top + 'px';\n tileElement.style.left = newPos.left + 'px';\n \n \/\/ Swap in array\n [tiles[emptyIndex], tiles[clickedIndex]] = [tiles[clickedIndex], tiles[emptyIndex]];\n emptyIndex = clickedIndex;\n \n moves++;\n movesEl.textContent = moves;\n\n if (isSolved()) {\n setTimeout(endGame, 400);\n }\n }\n\n function 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\n function startTimer() {\n timerInterval = setInterval(() => {\n seconds++;\n const mins = Math.floor(seconds \/ 60);\n const secs = seconds % 60;\n timeEl.textContent = `${mins}min ${secs}s`;\n }, 1000);\n }\n\n function stopTimer() {\n clearInterval(timerInterval);\n }\n\n function resetStats() {\n moves = 0;\n seconds = 0;\n movesEl.textContent = '0';\n timeEl.textContent = '0min 0s';\n stopTimer();\n gameStarted = false;\n hideMessage();\n }\n\n function endGame() {\n stopTimer();\n showMessage(`\ud83c\udf89 Parab\u00e9ns! Voc\u00ea completou em ${moves} movimentos e ${timeEl.textContent}!`, 'success');\n }\n\n function solve() {\n tiles = [1, 2, 3, 4, 5, 6, 7, 8, 0];\n emptyIndex = 8;\n renderPuzzle();\n stopTimer();\n showMessage('\u2728 Quebra-cabe\u00e7a resolvido!', 'info');\n }\n\n newGameBtn.addEventListener('click', initGame);\n solveBtn.addEventListener('click', solve);\n window.addEventListener('resize', renderPuzzle);\n\n initGame();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"953\" src=\"https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos.jpg\" alt=\"\" class=\"wp-image-4143\" style=\"width:445px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\u2713 Atividade alinhada \u00e0 Base Nacional Comum Curricular (BNCC), BNCC da Computa\u00e7\u00e3o e aos Objetivos de Desenvolvimento Sustent\u00e1vel (ODS) da ONU. \n<a \n style=\"background-color: #e6c15a; color: #2f2f2f; padding: 4px 10px; border-radius: 3px; text-decoration: none; font-weight: 500; display: inline-block;\" \n href=\"https:\/\/siminova.com.br\/blog\/amigos\/alinhamento\/quebra-cabeca-dos-amigos\/\"> \n \u203a Saiba mais \n<\/a>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Vis\u00e3o Geral do Alinhamento<\/summary>\n<p class=\"has-small-font-size\">EI03ET05, EI03ET01, EI03ET07, EF01MA12, EF15AR02, EF15AR26, EF06MA23, EF69AR04, EF69AR35, EI03CO01, EI03CO02, EI03CO03, EI03CO04, EI03CO05, EI03CO09, EF01CO01, EF01CO02, EF01CO03, EF01CO06, EF02CO01, EF02CO02, EF02CO05, EF03CO01, EF03CO02, EF03CO03, EF04CO01, EF04CO03, EF05CO03, EF05CO04, EF05CO11, EF06CO01, EF06CO04, EF06CO05, EF07CO01, EF07CO02, EF08CO03, ODS 4, ODS 9 e ODS 10.<\/p>\n<\/details>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Organize as pe\u00e7as para formar a imagem!<\/p>\n<p><b> N\u00cdVEL F\u00c1CIL<\/B><\/p>\n","protected":false},"author":8,"featured_media":4483,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[77],"tags":[79],"class_list":["post-4065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jogos","tag-notts"],"_links":{"self":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4065"}],"version-history":[{"count":22,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4065\/revisions"}],"predecessor-version":[{"id":5163,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4065\/revisions\/5163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/media\/4483"}],"wp:attachment":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":4065,"date":"2026-03-01T09:09:00","date_gmt":"2026-03-01T12:09:00","guid":{"rendered":"https:\/\/siminova.com.br\/blog\/?p=4065"},"modified":"2026-03-13T09:43:11","modified_gmt":"2026-03-13T12:43:11","slug":"quebra-cabeca-dos-amigos","status":"publish","type":"post","link":"https:\/\/siminova.com.br\/blog\/2026\/03\/quebra-cabeca-dos-amigos\/","title":{"rendered":"Quebra-cabe\u00e7a dos Amigos"},"content":{"rendered":"\n\n\n\n \n \n Quebra-Cabe\u00e7a Deslizante<\/title>\n <style>\n #puzzle-game-wrapper {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n margin: 0;\n }\n\n #puzzle-game-wrapper * {\n box-sizing: border-box;\n }\n\n #puzzle-game-wrapper .game-container {\n background: white;\n border-radius: 20px;\n padding: 30px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n max-width: 500px;\n width: 100%;\n }\n\n #puzzle-game-wrapper .game-title {\n text-align: center;\n color: #10b981;\n margin: 0 0 10px 0;\n font-size: 2em;\n font-weight: bold;\n }\n\n #puzzle-game-wrapper .game-instructions {\n text-align: center;\n color: #6b7280;\n margin: 0 0 20px 0;\n font-size: 1.1em;\n }\n\n #puzzle-game-wrapper .game-info {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n padding: 15px;\n background: #f8f9fa;\n border-radius: 10px;\n }\n\n #puzzle-game-wrapper .game-info div {\n text-align: center;\n }\n\n #puzzle-game-wrapper .game-info-label {\n font-size: 0.9em;\n color: #666;\n margin-bottom: 5px;\n }\n\n #puzzle-game-wrapper .game-info-value {\n font-size: 1.5em;\n font-weight: bold;\n color: #10b981;\n }\n\n #puzzle-game-wrapper .game-puzzle {\n position: relative;\n background: #e9ecef;\n padding: 3px;\n border-radius: 15px;\n margin-bottom: 20px;\n width: 100%;\n aspect-ratio: 1;\n }\n\n #puzzle-game-wrapper .game-tile {\n position: absolute;\n background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);\n border: none;\n border-radius: 5px;\n font-size: 2em;\n font-weight: bold;\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 2px 5px rgba(0,0,0,0.15);\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n overflow: hidden;\n transition: top 0.3s ease, left 0.3s ease;\n }\n\n #puzzle-game-wrapper .game-tile:hover {\n z-index: 10;\n box-shadow: 0 4px 10px rgba(0,0,0,0.35);\n filter: brightness(1.1);\n }\n\n #puzzle-game-wrapper .game-buttons {\n display: flex;\n gap: 10px;\n margin-bottom: 15px;\n }\n\n #puzzle-game-wrapper .game-button {\n flex: 1;\n padding: 15px;\n background: #10b981;\n color: white;\n border: none;\n border-radius: 10px;\n font-size: 1em;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n #puzzle-game-wrapper .game-button:hover {\n background: #059669;\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);\n }\n\n #puzzle-game-wrapper .game-message {\n text-align: center;\n padding: 20px;\n border-radius: 15px;\n font-weight: bold;\n font-size: 1.2em;\n margin-bottom: 15px;\n display: none;\n animation: slideIn 0.5s ease;\n }\n\n #puzzle-game-wrapper .game-message.show {\n display: block;\n }\n\n #puzzle-game-wrapper .game-message.success {\n background: #c6f6d5;\n color: #22543d;\n }\n\n #puzzle-game-wrapper .game-message.info {\n background: #dbeafe;\n color: #1e40af;\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n #puzzle-game-wrapper .game-title {\n font-size: 1.5em;\n }\n \n #puzzle-game-wrapper .game-tile {\n font-size: 1.5em;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"puzzle-game-wrapper\">\n <div class=\"game-container\">\n <h1 class=\"game-title\">\u2705 Vamos jogar!<\/h1>\n \n <p class=\"game-instructions\">Clique nas pe\u00e7as adjacentes ao espa\u00e7o vazio para mov\u00ea-las<\/p>\n \n <div class=\"game-info\">\n <div>\n <div class=\"game-info-label\">Movimentos<\/div>\n <div class=\"game-info-value\" id=\"moves\">0<\/div>\n <\/div>\n <div>\n <div class=\"game-info-label\">Tempo<\/div>\n <div class=\"game-info-value\" id=\"time\">0min 0s<\/div>\n <\/div>\n <\/div>\n\n <div class=\"game-puzzle\" id=\"puzzle\"><\/div>\n\n <div class=\"game-buttons\">\n <button class=\"game-button\" id=\"newGame\">\ud83c\udfae Novo Jogo<\/button>\n <button class=\"game-button\" id=\"solve\">\u2728 Resolver<\/button>\n <\/div>\n\n <div class=\"game-message\" id=\"message\"><\/div>\n <\/div>\n <\/div>\n\n <script>\n (function() {\n const tileImages = [\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_1.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_2.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_3.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_4.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_5.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_6.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_7.jpg',\n 'https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos_8.jpg'\n ];\n\n let tiles = [];\n let emptyIndex = 8;\n let moves = 0;\n let seconds = 0;\n let timerInterval = null;\n let gameStarted = false;\n let tileSize = 0;\n\n const puzzleEl = document.getElementById('puzzle');\n const movesEl = document.getElementById('moves');\n const timeEl = document.getElementById('time');\n const messageEl = document.getElementById('message');\n const newGameBtn = document.getElementById('newGame');\n const solveBtn = document.getElementById('solve');\n\n function showMessage(text, type) {\n messageEl.textContent = text;\n messageEl.className = `game-message ${type} show`;\n }\n\n function hideMessage() {\n messageEl.className = 'game-message';\n }\n\n function calculateTileSize() {\n const puzzleWidth = puzzleEl.clientWidth - 6;\n tileSize = (puzzleWidth - 6) \/ 3;\n }\n\n function getPosition(index) {\n const row = Math.floor(index \/ 3);\n const col = index % 3;\n return {\n top: 3 + row * (tileSize + 3),\n left: 3 + col * (tileSize + 3)\n };\n }\n\n function initGame() {\n tiles = [1, 2, 3, 4, 5, 6, 7, 8, 0];\n shuffleTiles();\n renderPuzzle();\n resetStats();\n }\n\n function shuffleTiles() {\n for (let i = 0; i < 100; i++) {\n const validMoves = getValidMoves();\n const randomMove = validMoves[Math.floor(Math.random() * validMoves.length)];\n [tiles[emptyIndex], tiles[randomMove]] = [tiles[randomMove], tiles[emptyIndex]];\n emptyIndex = randomMove;\n }\n }\n\n function getValidMoves() {\n const moves = [];\n const row = Math.floor(emptyIndex \/ 3);\n const col = emptyIndex % 3;\n\n if (row > 0) moves.push(emptyIndex - 3);\n if (row < 2) moves.push(emptyIndex + 3);\n if (col > 0) moves.push(emptyIndex - 1);\n if (col < 2) moves.push(emptyIndex + 1);\n\n return moves;\n }\n\n function renderPuzzle() {\n calculateTileSize();\n puzzleEl.innerHTML = '';\n \n tiles.forEach((value, index) => {\n if (value === 0) return;\n \n const tile = document.createElement('div');\n tile.className = 'game-tile';\n tile.style.backgroundImage = `url('${tileImages[value - 1]}')`;\n tile.style.width = tileSize + 'px';\n tile.style.height = tileSize + 'px';\n tile.dataset.value = value;\n \n const pos = getPosition(index);\n tile.style.top = pos.top + 'px';\n tile.style.left = pos.left + 'px';\n \n tile.addEventListener('click', () => moveTile(value));\n puzzleEl.appendChild(tile);\n });\n }\n\n function moveTile(value) {\n if (!gameStarted) {\n startTimer();\n gameStarted = true;\n }\n\n \/\/ Find current index of clicked tile\n const clickedIndex = tiles.indexOf(value);\n const validMoves = getValidMoves();\n \n if (!validMoves.includes(clickedIndex)) return;\n\n \/\/ Find and move the tile element\n const tileElement = puzzleEl.querySelector(`[data-value=\"${value}\"]`);\n const newPos = getPosition(emptyIndex);\n tileElement.style.top = newPos.top + 'px';\n tileElement.style.left = newPos.left + 'px';\n \n \/\/ Swap in array\n [tiles[emptyIndex], tiles[clickedIndex]] = [tiles[clickedIndex], tiles[emptyIndex]];\n emptyIndex = clickedIndex;\n \n moves++;\n movesEl.textContent = moves;\n\n if (isSolved()) {\n setTimeout(endGame, 400);\n }\n }\n\n function 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\n function startTimer() {\n timerInterval = setInterval(() => {\n seconds++;\n const mins = Math.floor(seconds \/ 60);\n const secs = seconds % 60;\n timeEl.textContent = `${mins}min ${secs}s`;\n }, 1000);\n }\n\n function stopTimer() {\n clearInterval(timerInterval);\n }\n\n function resetStats() {\n moves = 0;\n seconds = 0;\n movesEl.textContent = '0';\n timeEl.textContent = '0min 0s';\n stopTimer();\n gameStarted = false;\n hideMessage();\n }\n\n function endGame() {\n stopTimer();\n showMessage(`\ud83c\udf89 Parab\u00e9ns! Voc\u00ea completou em ${moves} movimentos e ${timeEl.textContent}!`, 'success');\n }\n\n function solve() {\n tiles = [1, 2, 3, 4, 5, 6, 7, 8, 0];\n emptyIndex = 8;\n renderPuzzle();\n stopTimer();\n showMessage('\u2728 Quebra-cabe\u00e7a resolvido!', 'info');\n }\n\n newGameBtn.addEventListener('click', initGame);\n solveBtn.addEventListener('click', solve);\n window.addEventListener('resize', renderPuzzle);\n\n initGame();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"953\" src=\"https:\/\/siminova.com.br\/blog\/wp-content\/uploads\/Quebra-cabeca-Amigos.jpg\" alt=\"\" class=\"wp-image-4143\" style=\"width:445px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\u2713 Atividade alinhada \u00e0 Base Nacional Comum Curricular (BNCC), BNCC da Computa\u00e7\u00e3o e aos Objetivos de Desenvolvimento Sustent\u00e1vel (ODS) da ONU. \n<a \n style=\"background-color: #e6c15a; color: #2f2f2f; padding: 4px 10px; border-radius: 3px; text-decoration: none; font-weight: 500; display: inline-block;\" \n href=\"https:\/\/siminova.com.br\/blog\/amigos\/alinhamento\/quebra-cabeca-dos-amigos\/\"> \n \u203a Saiba mais \n<\/a>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Vis\u00e3o Geral do Alinhamento<\/summary>\n<p class=\"has-small-font-size\">EI03ET05, EI03ET01, EI03ET07, EF01MA12, EF15AR02, EF15AR26, EF06MA23, EF69AR04, EF69AR35, EI03CO01, EI03CO02, EI03CO03, EI03CO04, EI03CO05, EI03CO09, EF01CO01, EF01CO02, EF01CO03, EF01CO06, EF02CO01, EF02CO02, EF02CO05, EF03CO01, EF03CO02, EF03CO03, EF04CO01, EF04CO03, EF05CO03, EF05CO04, EF05CO11, EF06CO01, EF06CO04, EF06CO05, EF07CO01, EF07CO02, EF08CO03, ODS 4, ODS 9 e ODS 10.<\/p>\n<\/details>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Organize as pe\u00e7as para formar a imagem!<\/p>\n<p><b> N\u00cdVEL F\u00c1CIL<\/B><\/p>\n","protected":false},"author":8,"featured_media":4483,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[77],"tags":[79],"class_list":["post-4065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jogos","tag-notts"],"_links":{"self":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4065"}],"version-history":[{"count":22,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4065\/revisions"}],"predecessor-version":[{"id":5163,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/posts\/4065\/revisions\/5163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/media\/4483"}],"wp:attachment":[{"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siminova.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}