{"id":5568,"date":"2025-09-07T20:08:53","date_gmt":"2025-09-07T23:08:53","guid":{"rendered":"https:\/\/matematicasaomiguel.com.br\/?page_id=5568"},"modified":"2025-09-07T20:10:12","modified_gmt":"2025-09-07T23:10:12","slug":"jogo-senha-cores","status":"publish","type":"page","link":"https:\/\/matematicasaomiguel.com.br\/?page_id=5568","title":{"rendered":"JOGO SENHA CORES"},"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 Senha Cores<\/title>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n background-color: #f0f0f0;\r\n margin: 0;\r\n padding: 20px;\r\n }\r\n #game {\r\n text-align: center;\r\n margin-right: 20px;\r\n }\r\n #palpite {\r\n margin: 20px 0;\r\n }\r\n .color-square {\r\n width: 40px;\r\n height: 40px;\r\n display: inline-block;\r\n margin: 0 5px;\r\n border: 2px solid #000;\r\n cursor: pointer;\r\n }\r\n #submit-btn {\r\n margin-top: 10px;\r\n padding: 5px 10px;\r\n cursor: pointer;\r\n }\r\n #dicas {\r\n margin-top: 20px;\r\n }\r\n .row {\r\n margin: 5px 0;\r\n }\r\n .hint {\r\n width: 20px;\r\n height: 20px;\r\n display: inline-block;\r\n margin: 0 2px;\r\n border-radius: 50%;\r\n border: 1px solid #000;\r\n vertical-align: middle; \/* Aligns all hints vertically *\/\r\n line-height: 20px; \/* Matches height for consistent alignment *\/\r\n text-align: center;\r\n }\r\n .black { background-color: black; }\r\n .white { background-color: white; }\r\n .x { background-color: #fff; color: #000; font-weight: bold; }\r\n #message {\r\n margin-top: 20px;\r\n font-weight: bold;\r\n }\r\n #legend {\r\n margin-left: 20px;\r\n padding: 10px;\r\n border: 1px solid #000;\r\n background-color: #fff;\r\n }\r\n .legend-item {\r\n margin: 10px 0;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .legend-item .hint {\r\n margin-right: 10px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"game\">\r\n <h2>Jogo Senha Cores<\/h2>\r\n <div id=\"palpite\">\r\n <span class=\"color-square\" id=\"s1\"><\/span>\r\n <span class=\"color-square\" id=\"s2\"><\/span>\r\n <span class=\"color-square\" id=\"s3\"><\/span>\r\n <span class=\"color-square\" id=\"s4\"><\/span>\r\n <button id=\"submit-btn\">Enviar Palpite<\/button>\r\n <\/div>\r\n <div id=\"dicas\">\r\n <div class=\"row\" id=\"row0\"><\/div>\r\n <div class=\"row\" id=\"row1\"><\/div>\r\n <div class=\"row\" id=\"row2\"><\/div>\r\n <div class=\"row\" id=\"row3\"><\/div>\r\n <div class=\"row\" id=\"row4\"><\/div>\r\n <div class=\"row\" id=\"row5\"><\/div>\r\n <div class=\"row\" id=\"row6\"><\/div>\r\n <div class=\"row\" id=\"row7\"><\/div>\r\n <div class=\"row\" id=\"row8\"><\/div>\r\n <div class=\"row\" id=\"row9\"><\/div>\r\n <\/div>\r\n <div id=\"message\"><\/div>\r\n <\/div>\r\n <div id=\"legend\">\r\n <h3>Legenda<\/h3>\r\n <div class=\"legend-item\"><span class=\"hint black\"><\/span> Posi\u00e7\u00e3o Certa<\/div>\r\n <div class=\"legend-item\"><span class=\"hint white\"><\/span> Posi\u00e7\u00e3o Errada<\/div>\r\n <div class=\"legend-item\"><span class=\"hint x\">X<\/span> N\u00e3o Pertence<\/div>\r\n <\/div>\r\n\r\n <script>\r\n const colors = ['pink', 'yellow', 'red', 'blue', 'green', 'purple'];\r\n let password = [];\r\n let guesses = [];\r\n const maxGuesses = 10;\r\n const squares = ['s1', 's2', 's3', 's4'];\r\n const rows = ['row0', 'row1', 'row2', 'row3', 'row4', 'row5', 'row6', 'row7', 'row8', 'row9'];\r\n\r\n \/\/ Generate random password\r\n function generatePassword() {\r\n let usedColors = new Set();\r\n while (password.length < 4) {\r\n let color = colors[Math.floor(Math.random() * colors.length)];\r\n if (!usedColors.has(color)) {\r\n usedColors.add(color);\r\n password.push(color);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Initialize game\r\n function initGame() {\r\n generatePassword();\r\n rows.forEach(rowId => {\r\n let row = document.getElementById(rowId);\r\n for (let i = 0; i < 4; i++) {\r\n row.innerHTML += '<span class=\"hint\"><\/span>';\r\n }\r\n });\r\n squares.forEach(id => {\r\n document.getElementById(id).addEventListener('click', () => cycleColor(id));\r\n document.getElementById(id).style.backgroundColor = 'white';\r\n });\r\n document.getElementById('submit-btn').addEventListener('click', submitGuess);\r\n }\r\n\r\n \/\/ Cycle through colors on click\r\n let colorIndex = 0;\r\n function cycleColor(id) {\r\n let square = document.getElementById(id);\r\n colorIndex = (colorIndex + 1) % colors.length;\r\n square.style.backgroundColor = colors[colorIndex];\r\n }\r\n\r\n \/\/ Submit guess\r\n function submitGuess() {\r\n let guess = squares.map(id => document.getElementById(id).style.backgroundColor);\r\n if (guess.includes('white') || guess.length < 4) {\r\n alert('Preencha todas as cores antes de enviar!');\r\n return;\r\n }\r\n guesses.push(guess);\r\n updateDicas();\r\n checkWin();\r\n if (guesses.length < maxGuesses) {\r\n resetSquares();\r\n }\r\n }\r\n\r\n \/\/ Reset squares for next guess\r\n function resetSquares() {\r\n squares.forEach(id => {\r\n document.getElementById(id).style.backgroundColor = 'white';\r\n });\r\n colorIndex = 0;\r\n }\r\n\r\n \/\/ Update hints\r\n function updateDicas() {\r\n let guess = guesses[guesses.length - 1];\r\n let rowId = `row${guesses.length - 1}`;\r\n let hints = getHints(guess);\r\n let row = document.getElementById(rowId);\r\n let hintElements = row.getElementsByTagName('span');\r\n for (let i = 0; i < 4; i++) {\r\n hintElements[i].className = `hint ${hints[i]}`;\r\n if (hints[i] === 'x') hintElements[i].textContent = 'X';\r\n else hintElements[i].textContent = '';\r\n }\r\n }\r\n\r\n \/\/ Get hints for a guess\r\n function getHints(guess) {\r\n let hints = new Array(4).fill('x');\r\n let passCopy = [...password];\r\n let guessCopy = [...guess];\r\n\r\n \/\/ Check for correct positions\r\n for (let i = 0; i < 4; i++) {\r\n if (guess[i] === password[i]) {\r\n hints[i] = 'black';\r\n passCopy[i] = null;\r\n guessCopy[i] = null;\r\n }\r\n }\r\n\r\n \/\/ Check for colors in wrong positions\r\n for (let i = 0; i < 4; i++) {\r\n if (guessCopy[i] && passCopy.includes(guessCopy[i])) {\r\n let pos = passCopy.indexOf(guessCopy[i]);\r\n hints[i] = 'white';\r\n passCopy[pos] = null;\r\n guessCopy[i] = null;\r\n }\r\n }\r\n\r\n return hints;\r\n }\r\n\r\n \/\/ Check if user won or game ended\r\n function checkWin() {\r\n let currentGuess = guesses[guesses.length - 1];\r\n if (currentGuess.every((color, index) => color === password[index])) {\r\n document.getElementById('message').textContent = 'Parab\u00e9ns! Voc\u00ea venceu!';\r\n disableGame();\r\n } else if (guesses.length >= maxGuesses) {\r\n document.getElementById('message').textContent = `Game Over! A senha era: ${password.join(', ')}.`;\r\n disableGame();\r\n }\r\n }\r\n\r\n \/\/ Disable game after win\/loss\r\n function disableGame() {\r\n squares.forEach(id => {\r\n document.getElementById(id).removeEventListener('click', cycleColor);\r\n });\r\n document.getElementById('submit-btn').removeEventListener('click', submitGuess);\r\n }\r\n\r\n \/\/ Start game\r\n initGame();\r\n <\/script>\r\n\t<input type=\"button\" value=\"Reiniciar\" onClick=\"window.location.reload()\">\r\n <a href=\"https:\/\/matematicasaomiguel.com.br\/\">\r\n <button>Retornar<\/button>\r\n <\/a>\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 Senha Cores Jogo Senha Cores Enviar Palpite Legenda Posi\u00e7\u00e3o Certa Posi\u00e7\u00e3o Errada X N\u00e3o Pertence Retornar<\/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":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","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-5568","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/5568","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=5568"}],"version-history":[{"count":4,"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/5568\/revisions"}],"predecessor-version":[{"id":5572,"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=\/wp\/v2\/pages\/5568\/revisions\/5572"}],"wp:attachment":[{"href":"https:\/\/matematicasaomiguel.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}