Tic-tac-toe é um jogo popular que usa uma grade 3 × 3. O objetivo do jogo é ser o primeiro jogador a colocar três símbolos em linha reta horizontal, vertical ou diagonal.
Você pode criar um jogo da velha que seja executado em um navegador da Web usando HTML, CSS e JavaScript. Você pode usar HTML para adicionar o conteúdo que contém a grade 3 × 3 e CSS para adicionar estilo ao design do jogo.
Você pode então usar JavaScript para a funcionalidade do jogo. Isso inclui colocar símbolos, revezando-se entre os jogadores e decidindo quem ganha.
Como criar a interface do usuário para o jogo Tic-Tac-Toe
Você pode ler e baixar o código-fonte completo deste jogo em seu Repositório GitHub.
Tic-tac-toe é um dos muitos jogos que você pode fazer ao aprender a programar. É bom praticar um novo idioma ou ambiente, como o mecanismo de desenvolvimento de jogos PICO-8.
Para criar um jogo Tic-tac-toe executado em um navegador da Web, você precisará adicionar HTML ao conteúdo da página. Você pode estilizar isso usando CSS.
- Crie um novo arquivo chamado "index.html".
- Dentro de "index.html", adicione a estrutura básica de um arquivo HTML:
html>
<htmlidioma="pt-BR">
<cabeça>
<título>jogo da velhatítulo>
cabeça>
<corpo>
corpo>
html> - Dentro da tag body do HTML, adicione uma tabela que contenha três linhas, com três células em cada linha:
<divaula="recipiente">
<mesa>
<tr>
<tdeu ia="1">td>
<tdeu ia="2">td>
<tdeu ia="3">td>
tr>
<tr>
<tdeu ia="4">td>
<tdeu ia="5">td>
<tdeu ia="6">td>
tr>
<tr>
<tdeu ia="7">td>
<tdeu ia="8">td>
<tdeu ia="9">td>
tr>
mesa>
div> - Na mesma pasta do seu arquivo HTML, crie um novo arquivo chamado "styles.css".
- Dentro do arquivo CSS, adicione um pouco de estilo à sua grade 3 por 3:
mesa {
colapso da fronteira: colapso;
margem: 0 auto;
}td {
largura: 100px;
altura: 100px;
alinhamento de texto: Centro;
alinhamento vertical: meio;
fronteira: 1pxsólidopreto;
} - Vincule o arquivo CSS ao seu arquivo HTML adicionando-o à tag head:
<linkrele="folha de estilo"tipo="texto/css"href="estilos.css">
Como se revezam adicionando símbolos ao tabuleiro de jogo
No jogo, haverá dois jogadores, cada um com um símbolo "X" ou "O". Você pode adicionar um símbolo "X" ou "O" clicando em uma das células da grade. Isso continuará até que um de vocês tenha criado uma linha reta horizontal, vertical ou diagonal.
Você pode adicionar essa funcionalidade usando JavaScript.
- Na mesma pasta que seus arquivos HTML e CSS, crie um arquivo JavaScript chamado "script.js".
- Vincule o arquivo JavaScript ao seu arquivo HTML adicionando o script na parte inferior da tag body:
<corpo>
Seu código aqui
<roteiroorigem="script.js">roteiro>
corpo> - Dentro do arquivo JavaScript, adicione uma string para representar o símbolo do jogador. Pode ser "X" ou "O". Por padrão, o primeiro jogador colocará um "X":
deixar jogadorSímbolo = "X"; - Adicione outra variável para acompanhar se o jogo terminou:
deixar gameEnded = falso - Cada célula na tabela HTML tem um ID entre 1 e 9. Para cada célula da tabela, adicione um event listener que será executado sempre que um usuário clicar na célula:
para (deixar eu = 1; eu <= 9; i++) {
documento.getElementById (i.toString()).addEventListener(
"clique",
função() {
}
);
} - Dentro do ouvinte de eventos, altere o HTML interno para exibir o símbolo atual. Certifique-se de usar uma instrução condicional JavaScript para primeiro certificar-se de que a célula está vazia e que o jogo ainda não terminou:
se (esse.innerHTML "" && !gameEnded) {
esse.innerHTML = playerSymbol;
} - Adicione uma classe ao elemento HTML para estilizar o símbolo que será exibido na grade. O nome das classes CSS será "X" ou "O", dependendo do símbolo:
esse.classList.add (playerSymbol.toLowerCase()); - Dentro do arquivo "styles.css", adicione essas duas novas classes para os símbolos "X" e "O". Os símbolos "X" e "O" serão exibidos em cores diferentes:
.x {
cor: azul;
tamanho da fonte: 80px;
}.o {
cor: vermelho;
tamanho da fonte: 80px;
} - No arquivo JavaScript, após alterar o innerHTML para exibir o símbolo, troque o símbolo. Por exemplo, se o jogador acabou de colocar um "X", mude o próximo símbolo para "O":
se (jogadorSímbolo "X")
jogadorSímbolo = "O"
outro
jogadorSímbolo = "X" - Para executar o jogo, abra o arquivo "index.html" em um navegador da Web para exibir a grade 3 por 3:
- Comece colocando símbolos na grade clicando nas células. O jogo alternará entre os símbolos "X" e "O":
Como determinar o vencedor
No momento, o jogo continuará mesmo que um jogador tenha colocado três símbolos consecutivos. Você precisará adicionar uma condição final para verificar isso após cada turno.
- Dentro de seu arquivo JavaScript, adicione uma nova variável para armazenar todas as possíveis posições "vencedoras" para a grade 3 por 3. Por exemplo, "[1,2,3]" é a linha superior ou "[1,4,7]" é uma linha diagonal.
deixar winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Adicione uma nova função chamada checkWin():
funçãocheckWin() {
} - Dentro da função, percorra cada uma das possíveis posições vencedoras:
para (deixar eu = 0; i < winPos.length; i++) {} - Dentro do loop for, verifique se todas as células contêm o símbolo do jogador:
se (
documento.getElementById (winPos[i][0]).innerHTML playerSímbolo &&
documento.getElementById (winPos[i][1]).innerHTML playerSímbolo &&
documento.getElementById (winPos[i][2]).innerHTML playerSímbolo
) {} - Se a condição for verdadeira, todos os símbolos estarão em uma linha reta. Dentro da instrução if, exiba uma mensagem para o usuário. Você também pode alterar o estilo do elemento HTML adicionando uma classe CSS chamada "win":
documento.getElementById (winPos[i][0]).classList.add("ganhar");
documento.getElementById (winPos[i][1]).classList.add("ganhar");
documento.getElementById (winPos[i][2]).classList.add("ganhar");
gameEnded = verdadeiro;setTimeout(função() {
alerta (playerSymbol + "ganha!");
}, 500); - Adicione esta classe CSS "win" ao arquivo "styles.css". Quando o jogador vencer, ele mudará a cor de fundo das células vencedoras para amarelo:
.ganhar {
cor de fundo: amarelo;
} - Chame a função checkWin() toda vez que um jogador jogar, dentro do manipulador de eventos adicionado nas etapas anteriores:
para (deixar eu = 1; eu <= 9; i++) {
// Sempre que um jogador clicar em uma célula
documento.getElementById (i.toString()).addEventListener(
"clique",
função() {
se (esse.innerHTML "" && !gameEnded) {
// Exibe "X" ou "O" na célula e estiliza
esse.innerHTML = playerSymbol;
esse.classList.add (playerSymbol.toLowerCase());
// Verifica se um jogador ganhou
checkWin();
// Troca o símbolo por outro no próximo turno
se (jogadorSímbolo "X")
jogadorSímbolo = "O"
outro
jogadorSímbolo = "X"
}
}
);
}
Como Redefinir o Tabuleiro de Jogo
Depois que um jogador ganha o jogo, você pode redefinir o tabuleiro de jogo. Você também pode redefinir o tabuleiro de jogo em caso de empate.
- No arquivo HTML, após a tabela, adicione um botão de reset:
<botãoeu ia="reiniciar">Reiniciarbotão> - Adicione um pouco de estilo ao botão de redefinição:
.recipiente {
mostrar: flex;
direção flexível: coluna;
}#reiniciar {
margem: 48px 40%;
preenchimento: 20px;
} - No arquivo JavaScript, adicione um manipulador de eventos que será executado sempre que o usuário clicar no botão de reinicialização:
documento.getElementById("reiniciar").addEventListener(
"clique",
função() {}
); - Para cada célula na grade, obtenha o elemento HTML usando a função getElementById(). Redefina o innerHTML para remover os símbolos "O" e "X" e remova todos os outros estilos CSS:
para (deixar eu = 1; eu <= 9; i++) {
documento.getElementById (i.toString()).innerHTML = "";
documento.getElementById (i.toString()).classList.remove("x");
documento.getElementById (i.toString()).classList.remove("o");
documento.getElementById (i.toString()).classList.remove("ganhar");
gameEnded = falso;
} - Execute o jogo abrindo o arquivo "index.html" em um navegador da web.
- Comece colocando os símbolos "X" e "O" na grade. Tente fazer um dos símbolos vencer.
- Pressione o botão de reset para redefinir o tabuleiro de jogo.
Aprendendo JavaScript fazendo jogos
Você pode continuar melhorando suas habilidades de programação criando mais projetos em JavaScript. É fácil criar jogos e ferramentas simples em um ambiente da Web, usando tecnologias abertas e multiplataforma, como JavaScript e HTML.
Não há melhor maneira de melhorar sua programação do que praticar a escrita de programas!
