{"id":4888,"date":"2024-09-11T23:30:01","date_gmt":"2024-09-12T02:30:01","guid":{"rendered":"https:\/\/matematicasaomiguel.com.br\/?page_id=4888"},"modified":"2025-02-11T21:49:57","modified_gmt":"2025-02-12T00:49:57","slug":"jogo-ordenar-n3","status":"publish","type":"page","link":"https:\/\/matematicasaomiguel.com.br\/?page_id=4888","title":{"rendered":"Jogo dos 24"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Jogo dos Quinze<\/title>\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 100vh;\r\n background-color: #f4f4f4;\r\n margin: 0;\r\n }\r\n\r\n .container {\r\n text-align: center;\r\n }\r\n\r\n #puzzle {\r\n display: grid;\r\n grid-template-columns: repeat(5, 100px);\r\n grid-gap: 5px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .piece {\r\n width: 100px;\r\n height: 100px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: #074df0;\r\n color: white;\r\n font-size: 24px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n }\r\n\r\n #controls {\r\n margin-top: 20px;\r\n }\r\n\r\n #timer {\r\n margin-top: 10px;\r\n font-size: 20px;\r\n color: red;\r\n }\r\n\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n z-index: 1;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: auto;\r\n background-color: rgb(0,0,0);\r\n background-color: rgba(0,0,0,0.4);\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n .modal-content {\r\n background-color: #fefefe;\r\n margin: 15% auto;\r\n padding: 20px;\r\n border: 1px solid #888;\r\n width: 50%;\r\n max-width: 400px;\r\n }\r\n\r\n .close {\r\n color: #aaa;\r\n float: right;\r\n font-size: 28px;\r\n font-weight: bold;\r\n }\r\n\r\n .close:hover,\r\n .close:focus {\r\n color: black;\r\n text-decoration: none;\r\n cursor: pointer;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div id=\"puzzle\">\r\n <!-- As pe\u00e7as numeradas ser\u00e3o geradas dinamicamente pelo JavaScript -->\r\n <\/div>\r\n <div id=\"controls\">\r\n <button id=\"restartButton\">Reiniciar<\/button>\r\n <button id=\"rulesButton\">Regras do Jogo<\/button>\r\n <div id=\"timer\">Tempo: 240s<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"rulesModal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <span class=\"close\">×<\/span>\r\n <h2>Regras do Jogo<\/h2>\r\n <p>1. Movimentar os n\u00fameros entre o espa\u00e7o vazio at\u00e9 conseguir orden\u00e1-los dentro do tempo.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"gameOverModal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <h2>Game Over<\/h2>\r\n <p>Voc\u00ea n\u00e3o conseguiu ordenar os n\u00fameros a tempo.<\/p>\r\n <button id=\"closeGameOverModal\">Fechar<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <script>\r\n const puzzleContainer = document.getElementById('puzzle');\r\n const timerElement = document.getElementById('timer');\r\n const restartButton = document.getElementById('restartButton');\r\n const rulesButton = document.getElementById('rulesButton');\r\n const rulesModal = document.getElementById('rulesModal');\r\n const closeRulesModal = document.getElementsByClassName('close')[0];\r\n const gameOverModal = document.getElementById('gameOverModal');\r\n const closeGameOverModal = document.getElementById('closeGameOverModal');\r\n\r\n let pieces = [];\r\n let emptyIndex;\r\n let timeLeft = 240;\r\n let timer;\r\n\r\n const createPieces = () => {\r\n pieces = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, ''];\r\n shuffle(pieces);\r\n emptyIndex = pieces.indexOf('');\r\n renderPuzzle();\r\n };\r\n\r\n const shuffle = (array) => {\r\n for (let i = array.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [array[i], array[j]] = [array[j], array[i]];\r\n }\r\n };\r\n\r\n const renderPuzzle = () => {\r\n puzzleContainer.innerHTML = '';\r\n pieces.forEach((piece, index) => {\r\n const pieceElement = document.createElement('div');\r\n pieceElement.classList.add('piece');\r\n pieceElement.innerText = piece;\r\n if (piece === '') {\r\n pieceElement.style.visibility = 'hidden'; \/\/ Esconde o espa\u00e7o vazio\r\n }\r\n pieceElement.addEventListener('click', () => movePiece(index));\r\n puzzleContainer.appendChild(pieceElement);\r\n });\r\n };\r\n\r\n const movePiece = (index) => {\r\n if (canMove(index)) {\r\n [pieces[emptyIndex], pieces[index]] = [pieces[index], pieces[emptyIndex]];\r\n emptyIndex = index;\r\n renderPuzzle();\r\n\r\n if (isGameWon()) {\r\n clearInterval(timer);\r\n alert('Voc\u00ea venceu!');\r\n }\r\n }\r\n };\r\n\r\n const canMove = (index) => {\r\n const row = Math.floor(index \/ 5);\r\n const col = index % 5;\r\n const emptyRow = Math.floor(emptyIndex \/ 5);\r\n const emptyCol = emptyIndex % 5;\r\n\r\n return (Math.abs(row - emptyRow) + Math.abs(col - emptyCol)) === 1;\r\n };\r\n\r\n const isGameWon = () => {\r\n for (let i = 0; i < pieces.length - 1; i++) {\r\n if (pieces[i] !== i + 1) return false;\r\n }\r\n return true;\r\n };\r\n\r\n const startTimer = () => {\r\n timer = setInterval(() => {\r\n timeLeft--;\r\n timerElement.innerText = `Tempo: ${timeLeft}s`;\r\n\r\n if (timeLeft <= 0) {\r\n clearInterval(timer);\r\n showGameOver();\r\n }\r\n }, 1000);\r\n };\r\n\r\n const showGameOver = () => {\r\n gameOverModal.style.display = 'block';\r\n };\r\n\r\n restartButton.addEventListener('click', () => {\r\n timeLeft = 240;\r\n timerElement.innerText = `Tempo: 240s`;\r\n clearInterval(timer);\r\n createPieces();\r\n startTimer();\r\n });\r\n\r\n rulesButton.addEventListener('click', () => {\r\n rulesModal.style.display = 'block';\r\n });\r\n\r\n closeRulesModal.addEventListener('click', () => {\r\n rulesModal.style.display = 'none';\r\n });\r\n\r\n closeGameOverModal.addEventListener('click', () => {\r\n gameOverModal.style.display = 'none';\r\n restartButton.click();\r\n });\r\n\r\n window.onclick = (event) => {\r\n if (event.target == rulesModal) {\r\n rulesModal.style.display = 'none';\r\n }\r\n };\r\n\r\n createPieces();\r\n startTimer();\r\n <\/script>\r\n <script src=\"script.js\"><\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Jogo dos Quinze Reiniciar Regras do Jogo Tempo: 240s × Regras do Jogo 1. Movimentar os n\u00fameros entre o espa\u00e7o […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-4888","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/4888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4888"}],"version-history":[{"count":90,"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/4888\/revisions"}],"predecessor-version":[{"id":5441,"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/4888\/revisions\/5441"}],"wp:attachment":[{"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}