{"id":20876826,"url":"https://github.com/brawlingthebits/tic-tac-toe","last_synced_at":"2026-04-14T12:33:13.282Z","repository":{"id":156620350,"uuid":"412175897","full_name":"brawlingthebits/tic-tac-toe","owner":"brawlingthebits","description":null,"archived":false,"fork":false,"pushed_at":"2021-10-01T15:52:27.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-19T09:30:25.694Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/brawlingthebits.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":"2021-09-30T18:18:49.000Z","updated_at":"2021-10-01T15:52:30.000Z","dependencies_parsed_at":"2023-09-12T15:32:14.096Z","dependency_job_id":null,"html_url":"https://github.com/brawlingthebits/tic-tac-toe","commit_stats":null,"previous_names":["brawlingthebits/tic-tac-toe"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brawlingthebits%2Ftic-tac-toe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brawlingthebits%2Ftic-tac-toe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brawlingthebits%2Ftic-tac-toe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brawlingthebits%2Ftic-tac-toe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brawlingthebits","download_url":"https://codeload.github.com/brawlingthebits/tic-tac-toe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243250698,"owners_count":20261070,"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","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":"2024-11-18T06:55:07.246Z","updated_at":"2025-12-25T12:24:13.810Z","avatar_url":"https://github.com/brawlingthebits.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Atividade: Jogo da Velha\n\nNeste famoso jogo, um jogador usa um \"X\" e o outro usa um \"O\". Os jogadores se alternam desenhando seus símbolos nas células de uma **tabela 3x3**. O primeiro jogador que formar uma linha com **três** de seus símbolos (seja horizontal, vertical ou diagonal) vence.\n\nO jogo pode terminar em empate quando todas as células estiverem preenchidas e nenhum jogador conseguir os três símbolos em linha.\n\n## Sua Tarefa\n\nCoece fazendo o clone desse repositório.\n\nImplementar o Jogo da Velha usando HTML, CSS e JavaScript. Nesta implementação, os jogadores estarão usando o mesmo teclado \u0026 mouse, se revezando.\n\nUse o GitHub Pages para hospedar seu jogo finalizado de forma que qualquer pessoa possa jogá-lo online.\n\n## Implementação\n\nNesta avaliação, forneceremos um passo a passo.\n\n### Desenhe o Tabuleiro\n\nVamos começar desenhando nosso tabuleiro. Precisaremos de uma tabela 3x3, então vamos criar o index.html e abri-lo no editor. Precisamos de 3 linhas com 3 células em cada uma, então vamos adicionar o seguinte:\n\n```html\n\u003cbody\u003e\n\t\u003ctable\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/table\u003e\n\u003c/body\u003e\n```\n\nAgora vamos abrir o `index.html` em nosso navegador. Não tem muita coisa nele, né? É porque nossa tabela está vazia e falta estilizá-la. Iremos estilizá-la ao criar um `tictactoe.css` com os seguintes estilos:\n\n```css\ntd {\n  border: 1px solid blue;\n}\n\ntd:hover {\n  background: orange;\n}\n\ntable {\n  border: 1px solid green;\n}\n```\n\nConecte ao nosso novo estilo do `index.html` ao conectar a tag `\u003chead\u003e` ao nosso arquivo CSS:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"tictactoe.css\"\u003e\n```\n\nAgora quando abrirmos o `index.html` no navegador, veremos nossa tabela 3x3, e as células ficam laranjas quando passamos o mouse sobre elas 💫\n\n\u003c!-- ![](http://g.recordit.co/8WgErWCje3.gif) --\u003e\n\n![](https://files-kenzie-academy-brasil.s3.amazonaws.com/q1/sprint3/687474703a2f2f672e7265636f726469742e636f2f385767457257436a65332e676966.gif)\nCerto, ainda não iremos ganhar um [Webby](https://www.webbyawards.com/winners/2017/), mas já temos alguma coisa.\n\n💡 Este seria um *excelente*, momento para fazer o check in no controle de versão. Faça o push dos nossos dois arquivos `index.html` e `tictactoe.css` antes de continuarmos.\n\n### Configurando o Estado Inicial do Jogo\n\nPara que nosso jogo funcione, precisamos responder algumas perguntas depois de cada turno:\n\n* De quem é a vez agora?\n* Quais células cada jogador selecionou?\n* Algum dos jogadores selecionou alguma combinação vencedora (ou seja, 3-em-linha)?\n\nVamos criar um novo arquivo `tictactoe.js` e começar com algumas variáveis para armazenar a resposta das duas primeiras perguntas:\n\n```js\nlet currentPlayer = 'X';\nlet nextPlayer = 'O';\n\nlet playerXSelections = [];\nlet playerOSelections = [];\n```\n\nTambém estaremos registrando a variável `nextPlayer`, que será útil mais tarde.\n\nE criaremos um constante *array de arrays* para armazenar a possível combinação de vitória de nossa tabela 3x3:\n\n```js\nconst winningCombinations = [\n\t[1, 2, 3],\n\t[4, 5, 6],\n\t[7, 8, 9],\n\t[1, 4, 7],\n\t[2, 5, 8],\n\t[3, 6, 9],\n\t[1, 5, 9],\n\t[3, 5, 7]\n];\n```\n\nCertifique-se de adicionar `\u003cscript src=\"tictactoe.js\"\u003e\u003c/script\u003e` logo antes do `\u003c/body\u003e` em seu HTML.\n\n💡 Adicione o novo arquivo Javascript e as alterações do seu arquivo HTML ao controle de versão antes de continuar.\n\n### Detectar Quando uma Célula é Clicada\n\nPara que nosso Javascript saiba qual célula foi clicada, precisaremos identificar cada célula de alguma forma. Por enquanto, usaremos o atributo `id` dos elementos `td` para dar a cada célula um ID de `1` até `9`.\n\n```html\n\u003ctd id=\"1\"\u003e\u003c/td\u003e\n\u003ctd id=\"2\"\u003e\u003c/td\u003e\n...\n\u003ctd id=\"9\"\u003e\u003c/td\u003e\n```\n\nAgora estamos prontos para adicionar um listener de evento. O código abaixo faz o seguinte:\n\n1. Cria uma função chamada `handleClick()`. Por enquanto, isso só registra o ID da célula que foi clicada.\n1. Obtém um array de todas as células usando [`document.querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)\n1. Itera essas células para adicionar um Listener de Evento\n\n```js\nconst handleClick = function(event) {\n\tconst cell = event.target\n\tconsole.log(cell.id);\n}\n\nconst cells = document.querySelectorAll('td');\n\nfor (let i = 0; i \u003c cells.length; i++) {\n\tcells[i].addEventListener('click', handleClick);\n}\n```\n\n💡 Salve seus arquivos e recarregue o index.html em seu navegador com o console Javascript aberto. Tente clicar em algumas células. \n\nVocê deve ver algo desse tipo: \n![](https://files-kenzie-academy-brasil.s3.amazonaws.com/tictactoe-console.png)\n\nCerto, agora temos um tabuleiro que responde aos nossos eventos de clique. Agora vamos adicionar a lógica do jogo.\n\n💡 Este é um ótimo momento para fazer um `git commit` .\n\n### Jogabilidade\n\nVamos fazer com que nossa função `handleClick` faça algo um pouco mais útil: vamos imprimir o caractere do jogador atual (X ou O) no tabuleiro e alternar o jogador. E já que estamos fazendo isso, vamos armazenar a nova seleção no array de seleção do jogador apropriado.\n\n```js\nconst handleClick = function (event) {\n\tconst cell = event.target;\n\n\tcell.innerHTML = currentPlayer;\n\n\tif (currentPlayer === 'X' ) {\n\t\tplayerSelections = playerXSelections;\n\t\tnextPlayer = 'O';\n\t} else {\n\t\tplayerSelections = playerOSelections;\n\t\tnextPlayer = 'X';\n\t}\n\n\tplayerSelections.push(Number(cell.id));\n\n\t// Swap players\n\tcurrentPlayer = nextPlayer;\n}\n```\n\nAgora você deve ser capaz de clicar no tabuleiro e desenhar alternando entre X e O.\n\n\u003c!-- ![](http://g.recordit.co/cR1yznTFt2.gif)--\u003e\n![](https://files-kenzie-academy-brasil.s3.amazonaws.com/q1/sprint3/687474703a2f2f672e7265636f726469742e636f2f635231797a6e544674322e676966.gif)\n\nAbra seu console e certifique-se de que o `playerXSelections` e o `playerOSelections` contém os valores que você espera.\n\n### Verifique a combinação de vitória\n\nComo podemos verificar se um jogador venceu?\n\nTemos um array para a seleção de cada jogador, e um array de arrays das possíveis combinações de vitória. Queremos verificar se o jogador atual tem todas as células de alguma combinação de vitória.\n\nVamos começar com alguns loops aninhados em **pseudo-código**.\n\n```js\nfunction checkWinner {\n   // Verifica para cada combinação  se o jogador tem todos os valores\n   for each winning combination\n       matches = 0\n       for each cell in combination\n           if player has cell\n               matches++\n           else break // vai para a próxima combinação\n           if there are 3 matches\n               return true\n \n   // Se nós percorremos todas as combinações sem retornar true\n   // então o jogador não venceu\n   return false\n}\n```\n\nConverta este pseudo-código em um JavaScript de verdade.\n\n💡 **Dica:**\n\n* Use `console.log()` para verificar seu trabalho enquanto progride.\n* “if player has cell” poderia ser escrito usando o método de array `includes()`.\n* [`break`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/break) encerra o loop *atual*. Trabalhar com loops aninhados significa avançar o loop externo.\n* `return` para a execução da função, encerrando todos os loops.\n* Evite fazer [hard code](https://pt.wikipedia.org/wiki/Codifica%C3%A7%C3%A3o_r%C3%ADgida) do valor `3`.\n\n### Verificar Empate\n\nHá várias maneiras de verificar um empate. Uma delas é ver se os jogadores selecionaram 9 células.\n\n```js\nfunction checkDraw() {\n   return (playerOSelections.length + playerXSelections.length) \u003e= cells.length;\n}\n```\n\n### Terminando o Jogo\n\nPara reiniciar o tabuleiro, precisamos limpar as seleções dos jogadores e apagar os Xs e Os.\n\n```js\nfunction resetGame() {\n   playerXSelections = new Array();\n   playerOSelections = new Array();\n   for (let i = 0; i \u003c cells.length; i++) {\n       cells[i].innerHTML = '';\n   }\n}\n```\n\n### Juntando Tudo\n\nNossa função `handleClick()` completa incorporando as novas funções deve ficar mais ou menos assim:\n\n```js\nconst handleClick = function(event) {\n   const cell = event.target;\n \n   cell.innerHTML = currentPlayer;\n \n   if (currentPlayer === 'X' ) {\n       playerSelections = playerXSelections;\n       nextPlayer = 'O';\n   } else {\n       playerSelections = playerOSelections;\n       nextPlayer = 'X';\n   }\n \n   playerSelections.push(Number(cell.id));\n \n     if (checkWinner(playerSelections)) {\n       alert('Player ' + currentPlayer + ' wins!');\n       resetGame();\n     }\n \n     if (checkDraw()) {\n       alert('Draw!');\n       resetGame();\n     }\n \n     // Troca jogadores\n     currentPlayer = nextPlayer;\n}\n```\n\n## Exemplo concluído\n\nAqui está um GIF de uma implementação concluída:\n\n\u003c!-- ![](http://g.recordit.co/5niABH7QAY.gif)--\u003e\n![](https://files-kenzie-academy-brasil.s3.amazonaws.com/q1/sprint3/687474703a2f2f672e7265636f726469742e636f2f356e69414248375141592e676966.gif)\n## Próximos Passos\n\nQuer refinar seu jogo? Aqui vão algumas ideias.\n\n**JavaScript:**\n\n* Impeça que os usuários selecionem a mesma célula mais de uma vez (do jeito que está agora, um jogador pode invadir a seleção de outro jogador).\n* Exiba de quem é a vez.\n* Registre a quantidade de vitórias de cada jogador (e a quantidade de empates).\n\n**CSS:**\n\n* Use `cursor: pointer;` para mostrar a conhecida *mão com o dedo indicador estendido* ao passar o mouse sobre as células.\n* Deixe seu tabuleiro mais bonito.\n* Adicione uma animação quando os Xs e Os forem adicionados ao tabuleiro.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrawlingthebits%2Ftic-tac-toe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrawlingthebits%2Ftic-tac-toe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrawlingthebits%2Ftic-tac-toe/lists"}