Como criar um jogo da velha usando HTML, CSS e JS
Tic tac toe é um jogo popular e simples que envolve dois jogadores que se revezam marcando os espaços em uma grade 3x3 com X ou O. O jogador que conseguir colocar três de suas marcas em uma linha horizontal, vertical ou diagonal é o vencedor. Tic tac toe também é conhecido como jogo do galo ou Xs e Os, e tem uma longa história que remonta ao antigo Egito e Roma.
Neste artigo, você aprenderá como criar seu próprio jogo da velha usando HTML, CSS e JS. Você usará HTML para criar a estrutura básica do tabuleiro do jogo, CSS para estilizar o tabuleiro e os sÃmbolos e JS para adicionar interatividade e lógica ao jogo. Você também aprenderá como implementar a estratégia vencedora e o botão de reinicialização do jogo. Seguindo estas etapas, você poderá criar um jogo da velha divertido e responsivo que pode ser jogado em seu navegador ou compartilhado com seus amigos.
tic tac toe html code download
seção HTML
O primeiro passo é criar o arquivo HTML para o jogo da velha. Você pode nomeá-lo como index.html ou o que quiser. Neste arquivo, você criará a estrutura básica do tabuleiro do jogo usando tags e atributos HTML. Você também vinculará os arquivos CSS e JS externos que criará posteriormente.
O arquivo HTML deve se parecer com isto:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tic Tac Toe Game</title> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="[18]( <link href="[17]( rel="stylesheet"> </head> <body> <main > <section > <h1>Tic Tac Toe</h1> </section> <section > Player <span >X</span>'s turn </section> <section > <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </section> <section > <button >Reset Game</button> </section> </main> <script src="script.js"></script> </body> </html>
Vamos detalhar o código HTML e ver o que cada parte faz:
A declaração especifica a versão HTML que o documento está usando.
O elemento é o elemento raiz do documento e possui um atributo lang que especifica o idioma do documento.
O elemento contém os metadados do documento, como o tÃtulo, a codificação de caracteres, a viewport e os links para os arquivos externos.
O elemento define o tÃtulo do documento que aparece na aba do navegador.
Os elementos vinculam os arquivos CSS e JS externos ao arquivo HTML.O primeiro elemento de link também vincula uma fonte do Google que usaremos para estilizar o jogo.
O elemento contém o conteúdo visÃvel do documento, como os elementos main, section e div.
O elemento é um elemento semântico que define o conteúdo principal do documento. Ele tem um atributo de classe que usaremos para estilizar o plano de fundo do jogo.
Os elementos são elementos semânticos que definem diferentes seções do documento. Cada seção tem um atributo de classe que usaremos para estilizar e selecionar os elementos. A primeira seção contém o tÃtulo do jogo, a segunda seção contém a exibição da vez do jogador atual, a terceira seção contém o tabuleiro do jogo e a quarta seção contém o botão de reinicialização.
Os elementos são contêineres genéricos que usaremos para criar e estilizar as peças do tabuleiro do jogo. Cada elemento div possui um atributo de classe que usaremos para estilizar e selecionar os blocos.
O elemento define o tÃtulo principal do documento, que também é o tÃtulo do jogo.
O elemento define uma parte do texto dentro de outro elemento. Vamos usá-lo para exibir e estilizar o sÃmbolo do jogador atual (X ou O).
O elemento define um botão clicável que usaremos para reiniciar o jogo.
O elemento vincula o arquivo JS externo ao arquivo HTML. Ele deve ser colocado no final do elemento body para que seja executado após o carregamento dos elementos HTML.
seção CSS
A próxima etapa é criar o arquivo CSS para o jogo da velha. Você pode nomeá-lo como style.css ou o que quiser. Neste arquivo, você estilizará e aplicará alguns estilos a eles, como cor.
O seletor .reset seleciona o elemento de seção com o atributo de classe reset e aplica alguns estilos a ele, como margin-top.
O seletor .reset-button seleciona o elemento de botão com o atributo de classe do botão de redefinição e aplica alguns estilos a ele, como largura, altura, borda, raio da borda, famÃlia da fonte, tamanho da fonte, cor, cor de fundo e cursor.
O seletor .reset-button:hover seleciona o elemento do botão de redefinição quando o ponteiro do mouse passa sobre ele e aplica alguns estilos a ele, como transformar.
A regra @media screen and (max-width: 600px) define uma consulta de mÃdia que aplica alguns estilos aos elementos quando a largura da tela é menor ou igual a 600px. Isso torna o jogo responsivo e adaptável a diferentes tamanhos de tela.
A regra de salto @keyframes define uma animação que faz os elementos saltarem alterando sua propriedade de escala.
O seletor .winner seleciona os elementos do bloco com o atributo de classe do vencedor e aplica uma animação a eles usando a propriedade animation.
seção JS
A etapa final é criar o arquivo JS para o jogo da velha. Você pode nomeá-lo como script.js ou qualquer coisa que desejar. Neste arquivo, você adicionará interatividade e lógica ao jogo usando variáveis, funções, eventos e condições JS. Você também implementará a estratégia vencedora e o botão de reinicialização do jogo.
O arquivo JS deve se parecer com isto:
// Selecionando os elementos do arquivo HTML const tiles = document.querySelectorAll(".tile"); const display = document.querySelector(".display"); const displayPlayer = document.querySelector(".display-player"); const resetButton = document.querySelector(".reset-button"); // Declarando algumas variáveis para armazenar o estado do jogo let currentPlayer = "X"; // O sÃmbolo do jogador atual (X ou O) let gameStatus = "Game On"; // O status do jogo (Game On ou Game Over) let board = ["", "", "", "", "", "", "", "", ""]; // O array que representa o tabuleiro do jogo // Declarando algumas constantes para armazenar as combinações vencedoras constwinningCombos = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; // Adicionando um ouvinte de evento a cada elemento tile tiles.forEach((tile) => tile.addEventListener("click", () => // Verificando se o tile está vazio e o jogo está ligado if (tile.innerHTML === "" && gameStatus === "Game On") // Marcando o tile com o sÃmbolo do jogador atual tile.innerHTML = currentPlayer; // Atualizando o array do tabuleiro com o sÃmbolo do jogador atual[parseInt( tile.id)] = currentPlayer; // Verificando se o jogador atual venceu checkWin(); // Mudando para o próximo jogador switchPlayer(); ); ); // Adicionando um ouvinte de evento ao elemento do botão de reinicialização resetButton.addEventListener("click", () => // Redefinindo o estado do jogo currentPlayer = "X"; gameStatus = "Game On"; board = ["", "", "", "", "", "", "", "", ""]; // Limpando todos os tiles tiles.forEach((tile) => tile.innerHTML = ""; tile.classList.remove("winner"); ); // Atualizando o display displayPlayer.innerHTML = currentPlayer; displayPlayer.classList.remove("playerO"); displayPlayer.classList.add("playerX"); display.innerHTML =`Volta do jogador $currentPlayer`; ); // Definindo uma função que verifica se o jogador atual ganhou function checkWin() // Percorrendo o array de combinações vencedoras for (let i = 0; i
Vamos detalhar o código JS e ver o que cada parte faz:
As quatro primeiras linhas selecionam os elementos do arquivo HTML usando os métodos document.querySelectorAll e document.querySelector e os armazenam em variáveis para uso posterior.
As próximas três linhas declaram algumas variáveis para armazenar o estado do jogo, como o sÃmbolo do jogador atual, o status do jogo e a matriz do tabuleiro.
A próxima linha declara uma constante para armazenar as combinações vencedoras, que são matrizes de três Ãndices que correspondem à s peças do tabuleiro do jogo.
O próximo bloco de código adiciona um ouvinte de evento a cada elemento tile usando o método forEach e uma função de seta. O ouvinte de evento escuta um evento de clique e executa uma função de retorno de chamada que verifica se o bloco está vazio e o jogo está iniciado, marca o bloco com o sÃmbolo do jogador atual, atualiza a matriz do tabuleiro com o sÃmbolo do jogador atual, verifica se o jogador atual venceu e muda para o próximo jogador.
O próximo bloco de código adiciona um ouvinte de evento ao elemento do botão de redefinição usando uma função de seta. O ouvinte de evento escuta um evento de clique e executa uma função de retorno de chamada que redefine o estado do jogo, limpa todos os blocos e atualiza a exibição.
O próximo bloco de código define uma função que verifica se o jogador atual ganhou usando um loop for e uma instrução if. A função percorre o array de combinações vencedoras e verifica se o array do tabuleiro tem o mesmo sÃmbolo em todos os três Ãndices de cada combinação vencedora. Nesse caso, ele altera o status do jogo para Game Over, atualiza a exibição e adiciona uma classe vencedora à s peças que formam a combinação vencedora. Caso contrário, ele verifica se a matriz do tabuleiro não possui espaços vazios. Nesse caso, ele altera o status do jogo para Game Over e atualiza a exibição com uma mensagem de empate.
O último bloco de código define uma função que alterna para o próximo jogador usando uma instrução if e um operador ternário.A função verifica se o jogo ainda está em andamento e muda o jogador atual para o sÃmbolo oposto usando um operador ternário. Ele também atualiza a exibição com o sÃmbolo e a vez do jogador atual.
Conclusão
Parabéns! Você criou com sucesso um jogo da velha usando HTML, CSS e JS. Você aprendeu como usar tags e atributos HTML para criar a estrutura básica do tabuleiro de jogo, como usar propriedades e seletores CSS para estilizar o tabuleiro e os sÃmbolos, como usar variáveis, funções, eventos e condições JS para adicionar interatividade e lógica ao jogo e como implementar a estratégia vencedora e o botão de reset para o jogo. Você também aprendeu como tornar o jogo responsivo e atraente usando consultas de mÃdia e animações.
Agora que você criou seu próprio jogo da velha, pode tentar melhorá-lo ou personalizá-lo de diferentes maneiras. Aqui estão algumas dicas e desafios para você:
Tente adicionar alguns efeitos sonoros ou música ao jogo usando o elemento de áudio HTML e o objeto JS Audio.
Tente adicionar alguns nÃveis ou modos de dificuldade ao jogo, como fácil, médio, difÃcil ou multijogador.
Tente adicionar alguns recursos ou opções ao jogo, como alterar os sÃmbolos, cores ou fontes do jogo.
Tente criar uma versão ou variação diferente do jogo, como grade 4x4, jogo da velha 3D ou jogo da velha com gravidade.
Espero que você tenha gostado deste artigo e aprendido algo novo. Se você tiver alguma dúvida ou feedback, sinta-se à vontade para deixar um comentário abaixo. Codificação feliz!
perguntas frequentes
O que é o jogo da velha?
Tic tac toe é um jogo popular e simples que envolve dois jogadores que se revezam marcando os espaços em uma grade 3x3 com X ou O. O jogador que conseguir colocar três de suas marcas em uma linha horizontal, vertical ou diagonal é o vencedor.
Como você cria um jogo da velha usando HTML, CSS e JS?
Você pode criar um jogo da velha usando HTML, CSS e JS seguindo estas etapas:
Crie um arquivo HTML que contenha a estrutura básica do tabuleiro de jogo usando tags e atributos HTML e vincule os arquivos CSS e JS externos.
Crie um arquivo CSS que estilize o tabuleiro do jogo e os sÃmbolos usando propriedades e seletores CSS e torne o jogo responsivo e atraente usando consultas de mÃdia e animações.
Crie um arquivo JS que adicione interatividade e lógica ao jogo usando variáveis, funções, eventos e condições JS e implemente a estratégia vencedora e o botão de reinicialização do jogo.
Como você torna um jogo da velha responsivo?
Você pode tornar um jogo da velha responsivo usando consultas de mÃdia em seu arquivo CSS. As consultas de mÃdia permitem aplicar diferentes estilos a diferentes tamanhos de tela ou dispositivos. Por exemplo, você pode usar a tela @media e (largura máxima: 600px) para aplicar alguns estilos quando a largura da tela for menor ou igual a 600px.
Como você implementa a estratégia vencedora para o jogo da velha?
Você pode implementar a estratégia vencedora para o jogo da velha usando uma matriz que armazena todas as combinações possÃveis de três Ãndices que correspondem à s peças do tabuleiro de jogo. Você pode então usar um loop e uma condição para verificar se a matriz do tabuleiro tem o mesmo sÃmbolo em todos os três Ãndices de cada combinação vencedora. Nesse caso, você pode declarar o jogador atual como o vencedor e atualizar a exibição e as peças de acordo.
Como adicionar efeitos sonoros ou música ao jogo da velha?
Você pode adicionar efeitos sonoros ou música ao jogo da velha usando o elemento de áudio HTML e o objeto JS Audio. O elemento de áudio HTML permite incorporar um arquivo de áudio em seu arquivo HTML, e o objeto JS Audio permite controlar a reprodução do arquivo de áudio usando métodos e propriedades JS. Por exemplo, você pode usar new Audio("sound.mp3") para criar um objeto de áudio a partir de um arquivo de som e usar audio.play() e audio.pause() para reproduzir e pausar o áudio, respectivamente. 0517a86e26