{"id":26175326,"url":"https://github.com/fernandozuchi/tictactoe-js","last_synced_at":"2025-08-26T07:04:04.154Z","repository":{"id":233638345,"uuid":"778959450","full_name":"FernandoZuchi/TicTacToe-JS","owner":"FernandoZuchi","description":"Jogo da velha (Tic-tac-toe) desenvolvido em javascript para práticar DOM","archived":false,"fork":false,"pushed_at":"2024-06-17T13:26:50.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-06T02:49:49.380Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tic-tac-toe-js-eight-rho.vercel.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FernandoZuchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-28T18:47:14.000Z","updated_at":"2025-03-11T14:54:15.000Z","dependencies_parsed_at":"2024-06-17T14:58:21.273Z","dependency_job_id":"f6011bd7-2fba-47bd-9f97-2d6e005e2747","html_url":"https://github.com/FernandoZuchi/TicTacToe-JS","commit_stats":null,"previous_names":["fernandozuchi/tictactoe-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/FernandoZuchi/TicTacToe-JS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2FTicTacToe-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2FTicTacToe-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2FTicTacToe-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2FTicTacToe-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FernandoZuchi","download_url":"https://codeload.github.com/FernandoZuchi/TicTacToe-JS/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2FTicTacToe-JS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272186219,"owners_count":24888333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-26T02:00:07.904Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-11T20:56:15.211Z","updated_at":"2025-08-26T07:04:04.129Z","avatar_url":"https://github.com/FernandoZuchi.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Jogo da Velha\n\nComo vamos utilizar a linguagem?\nVamos utilizar javascript DOM para manipular e criar lógica por trás de um jogo da velha em HTML, CSS\n\n## Código HTML\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"pt-br\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eJogo da Velha - JS\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n    \u003cdiv class=\"container\"\u003e\n        \u003cdiv class=\"panel\"\u003e\n            \u003ch1\u003eJogo da Velha\u003c/h1\u003e\n            \u003chr\u003e\n            \u003cp\u003ePrimeiro a jogar: O\u003c/p\u003e\n            \u003ctable\u003e\n                \u003ctr\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                \u003c/tr\u003e\n                \u003ctr\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                \u003c/tr\u003e\n                \u003ctr\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                    \u003ctd\u003e\u003c/td\u003e\n                \u003c/tr\u003e\n            \u003c/table\u003e\n            \u003cbutton\u003eResetar\u003c/button\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cscript src=\"main.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Estilizando com CSS\n\n```\n/* Definições gerais */\nbody {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Define a fonte principal */\n    background-color: #f9f9f9; /* Define a cor de fundo do corpo */\n    margin: 0; /* Remove as margens padrão */\n    padding: 0; /* Remove os preenchimentos padrão */\n    display: flex; /* Usa o modelo de layout flexível */\n    justify-content: center; /* Centraliza horizontalmente o conteúdo */\n    align-items: center; /* Centraliza verticalmente o conteúdo */\n    height: 100vh; /* Define a altura total da viewport */\n}\n\n/* Container principal */\n.container {\n    max-width: 600px; /* Define a largura máxima do container */\n    width: 100%; /* Define a largura total do container */\n}\n\n/* Painel do jogo */\n.panel {\n    background-color: #fff; /* Cor de fundo do painel */\n    border-radius: 20px; /* Bordas arredondadas */\n    padding: 40px; /* Espaçamento interno */\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra */\n    animation: fadeIn 0.5s ease forwards; /* Animação de fade-in */\n    text-align: center; /* Centraliza horizontalmente o conteúdo */\n}\n\n/* Animação de fade-in */\n@keyframes fadeIn {\n    from {\n        opacity: 0; /* Inicia com opacidade 0 */\n        transform: translateY(-20px); /* Translação para cima */\n    }\n    to {\n        opacity: 1; /* Termina com opacidade 1 */\n        transform: translateY(0); /* Sem translação */\n    }\n}\n\n/* Estilo do título */\nh1 {\n    color: #333; /* Cor do texto */\n    margin-bottom: 20px; /* Espaçamento inferior */\n    font-weight: 600; /* Peso da fonte */\n    font-size: 2.5em; /* Tamanho da fonte */\n}\n\n/* Estilo da tabela */\ntable {\n    margin: 20px auto; /* Centraliza horizontalmente a tabela */\n    border-collapse: collapse; /* Remove espaços entre as células */\n}\n\n/* Estilo das células da tabela */\ntd {\n    width: 100px; /* Largura das células */\n    height: 100px; /* Altura das células */\n    border: 2px solid #333; /* Borda das células */\n    font-size: 3em; /* Tamanho da fonte */\n    text-align: center; /* Centraliza o texto */\n    cursor: pointer; /* Mostra que as células são clicáveis */\n    transition: all 0.3s ease; /* Transição suave */\n}\n\n/* Efeito de hover nas células */\ntd:hover {\n    background-color: #e0e0e0; /* Cor de fundo ao passar o mouse */\n    transform: scale(1.05); /* Aumenta ligeiramente o tamanho */\n}\n\n/* Estilo do texto */\np {\n    font-size: 1.5em; /* Tamanho da fonte */\n    color: #666; /* Cor do texto */\n    margin-bottom: 30px; /* Espaçamento inferior */\n}\n\n/* Container do botão */\n.button-container {\n    text-align: center; /* Centraliza horizontalmente o botão */\n    margin-top: 20px; /* Espaçamento superior */\n}\n\n/* Estilo do botão */\nbutton {\n    padding: 15px 30px; /* Espaçamento interno */\n    font-size: 1.2em; /* Tamanho da fonte */\n    background-color: #4CAF50; /* Cor de fundo */\n    color: white; /* Cor do texto */\n    border: none; /* Remove a borda */\n    cursor: pointer; /* Mostra que o botão é clicável */\n    border-radius: 10px; /* Bordas arredondadas */\n    transition: background-color 0.3s ease; /* Transição suave */\n}\n\n/* Efeito de hover no botão */\nbutton:hover {\n    background-color: #45a049; /* Cor de fundo ao passar o mouse */\n}\n\n/* Estilização do plano de fundo */\n.container::before {\n    content: ''; /* Adiciona um conteúdo antes do container */\n    position: absolute; /* Posição absoluta */\n    top: 0; /* Alinhado ao topo */\n    left: 0; /* Alinhado à esquerda */\n    width: 100%; /* Largura total */\n    height: 100%; /* Altura total */\n    background-image: linear-gradient(to bottom right, #00c6ff, #0072ff); /* Gradiente de cores */\n    opacity: 0.1; /* Opacidade */\n    z-index: -1; /* Coloca atrás de todos os outros elementos */\n    border-radius: 20px; /* Bordas arredondadas */\n}\n```\n\n#### Desenvolvimento da lógica com JavaScript\n```\nlet bloco = document.querySelectorAll(\"td\");\nlet msg = document.querySelector(\"p\");\nlet reset = document.querySelector(\"button\");\nlet jogada = \"O\";\n\n// Lógica\n\nbloco.forEach(casa =\u003e {\n    casa.addEventListener('click', event =\u003e {\n        // Lógica para realizar uma jogada\n        if (casa.innerText == \"\")\n        {\n            casa.innerText = jogada;\n            // Lógica para trocar a jogada\n            jogada = jogada == \"X\" ? \"O\" : \"X\";\n            // Atualizando a mensagem do próximo jogador\n            msg.innerText = `Próximo a jogar: ${jogada}`;\n            verificaGanhador();\n        }\n    });\n});\n\nreset.addEventListener('click', event =\u003e {\n    bloco.forEach(casa =\u003e {\n        casa.innerText = \"\";\n        msg.innerText = `Próximo a jogar: ${jogada}`;\n    });\n});\n\nfunction verificaGanhador() {\n    let empate = true; // Assume que há um empate\n\n    if(\n        // Conferindo as vitórias através de linhas primeiramente\n        (bloco[0].innerText != \"\" \u0026\u0026 bloco[0].innerText == bloco[1].innerText \u0026\u0026 bloco[0].innerText == bloco[2].innerText) ||\n        (bloco[3].innerText != \"\" \u0026\u0026 bloco[3].innerText == bloco[4].innerText \u0026\u0026 bloco[3].innerText == bloco[5].innerText) ||\n        (bloco[6].innerText != \"\" \u0026\u0026 bloco[6].innerText == bloco[7].innerText \u0026\u0026 bloco[6].innerText == bloco[8].innerText) ||\n        // Conferindo agora vitórias através das colunas\n        (bloco[0].innerText != \"\" \u0026\u0026 bloco[0].innerText == bloco[3].innerText \u0026\u0026 bloco[0].innerText == bloco[6].innerText) ||\n        (bloco[1].innerText != \"\" \u0026\u0026 bloco[1].innerText == bloco[4].innerText \u0026\u0026 bloco[1].innerText == bloco[7].innerText) ||\n        (bloco[2].innerText != \"\" \u0026\u0026 bloco[2].innerText == bloco[5].innerText \u0026\u0026 bloco[2].innerText == bloco[8].innerText) ||\n        // Para finalizar, vitórias na diagonal\n        (bloco[0].innerText != \"\" \u0026\u0026 bloco[0].innerText == bloco[4].innerText \u0026\u0026 bloco[0].innerText == bloco[8].innerText) ||\n        (bloco[2].innerText != \"\" \u0026\u0026 bloco[2].innerText == bloco[4].innerText \u0026\u0026 bloco[2].innerText == bloco[6].innerText)\n    )\n    {\n        msg.innerHTML = \"\u003ch1\u003eVitória!\u003c/h1\u003e\";\n        empate = false; // Se houve um vencedor, não há empate\n    }\n\n    // Verificando empate\n    if (empate) {\n        let todasPreenchidas = true;\n        for (let i = 0; i \u003c bloco.length; i++) {\n            if (bloco[i].innerText === \"\") {\n                todasPreenchidas = false;\n                break;\n            }\n        }\n        if (todasPreenchidas) {\n            msg.innerHTML = \"\u003ch1\u003eEmpate!\u003c/h1\u003e\";\n        }\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandozuchi%2Ftictactoe-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffernandozuchi%2Ftictactoe-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandozuchi%2Ftictactoe-js/lists"}