Quer dar um passo gigante na sua jornada de programação? 🚀 Neste guia completo, você vai aprender a criar um jogo da velha com JavaScript do zero! É o projeto perfeito para quem está começando ou querendo reforçar os conhecimentos em desenvolvimento web. Vamos transformar linhas de código em um jogo funcional e divertido. Preparado? 😉
Se você está em transição de carreira, buscando uma nova oportunidade na área de tecnologia ou simplesmente querendo tirar o pó dos seus conhecimentos de programação, você veio ao lugar certo. Construir pequenos projetos é, sem dúvida, a melhor maneira de aprender. E um clássico como o Jogo da Velha aborda conceitos fundamentais de lógica, manipulação de elementos da página e interatividade, que são essenciais para qualquer desenvolvedor web.
Neste tutorial, não vamos apenas jogar código na tela. Vamos explicar o “porquê” de cada linha, conectando a teoria com a prática de uma forma que faça sentido. Ao final, você não só terá um jogo da velha com JavaScript funcionando, mas também uma compreensão muito mais sólida sobre como HTML, CSS e JavaScript trabalham juntos. Vamos começar essa jornada! 💪
Índice
🤔 Por que criar um Jogo da Velha para aprender a programar?
Você pode estar se perguntando: “Com tantos projetos complexos por aí, por que começar com um Jogo da Velha?”. A resposta é simples: ele é o equilíbrio perfeito entre simplicidade e aprendizado prático. Primeiramente, as regras do jogo são universalmente conhecidas, então não precisamos gastar tempo explicando a lógica do jogo em si, mas sim como traduzir essa lógica para o código.
Além disso, este projeto permite que você trabalhe com os três pilares do desenvolvimento front-end de forma integrada:
- HTML (A Estrutura 뼈): Você vai aprender a estruturar a página do jogo, criando o tabuleiro e os elementos de interface, como o botão de reiniciar e as mensagens de status.
- CSS (O Estilo 🎨): Em seguida, você vai dar vida ao tabuleiro, estilizando as células, as marcações de “X” e “O”, e garantindo que o jogo seja visualmente agradável.
- JavaScript (A Inteligência ✨): Por fim, aqui é onde a mágica acontece. Você vai programar toda a lógica do jogo: quem joga, onde clicou, se houve um vencedor, se deu empate e como reiniciar a partida.
Ao construir um jogo da velha com JavaScript, você pratica conceitos cruciais como a manipulação do DOM (Document Object Model), o gerenciamento de eventos (cliques do mouse), a utilização de condicionais (if/else) e o trabalho com arrays para guardar o estado do jogo. Portanto, é um exercício completo e extremamente valioso para o seu portfólio inicial.
Primeiro Passo: Estruturando o Tabuleiro com HTML
Vamos começar pelo esqueleto do nosso jogo. O HTML será responsável por criar todos os elementos que vemos na tela. Para este projeto, você só precisa de um editor de código (como o Visual Studio Code, que é gratuito) e um navegador de internet.
Criando o arquivo index.html
Crie uma pasta para o seu projeto e, dentro dela, um arquivo chamado index.html. Este arquivo conterá a estrutura principal. Abra-o e cole o código abaixo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo da Velha com JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Jogo da Velha</h1>
<div id="game-board">
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
</div>
<h2 id="status-text">É a vez do X</h2>
<button id="restart-button">Reiniciar Jogo</button>
<script src="script.js"></script>
</body>
</html>O que fizemos aqui? Criamos um título (<h1>), o tabuleiro do jogo (<div id="game-board">) com nove células (<div class="cell">), um texto para exibir o status do jogo (<h2>) e um botão para reiniciar (<button>). Além disso, já linkamos nossos futuros arquivos de CSS (style.css) e JavaScript (script.js).
Segundo Passo: Estilizando o Jogo com CSS
Um jogo sem estilo não tem graça, não é mesmo? 😅 Agora, vamos criar o arquivo style.css na mesma pasta e adicionar o código que vai transformar nosso HTML bruto em um tabuleiro de verdade.
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
#game-board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
margin: 20px 0;
}
.cell {
width: 100px;
height: 100px;
background-color: white;
border: 2px solid #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
cursor: pointer;
user-select: none; /* Impede que o texto seja selecionado */
}
.cell.x, .cell.o {
cursor: not-allowed;
}
.cell.x::before {
content: 'X';
color: #09c372;
}
.cell.o::before {
content: 'O';
color: #498afb;
}
#restart-button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
border: none;
background-color: #ff4757;
color: white;
}Com esse CSS, nós centralizamos tudo na página, criamos um grid 3×3 para o nosso tabuleiro e estilizamos as células. Também definimos a aparência do “X” e do “O” usando pseudoelementos (::before). Isso é uma técnica muito útil! Observe que, quando uma célula for marcada, adicionaremos a ela a classe “x” ou “o”, e o CSS se encarregará de exibir o símbolo correto. Simples e eficiente!
Terceiro Passo: A Lógica do Jogo da Velha com JavaScript
Chegou a hora mais esperada! Vamos criar o cérebro do nosso jogo. Crie o arquivo script.js e vamos construir a lógica passo a passo. Esta é a parte mais densa, mas também a mais recompensadora. Vamos lá!
1. Selecionando Elementos e Definindo Variáveis
Primeiro, precisamos que o nosso JavaScript “enxergue” os elementos do HTML. Além disso, vamos definir as variáveis que controlarão o estado do jogo.
const cells = document.querySelectorAll('[data-cell]');
const statusText = document.getElementById('status-text');
const restartButton = document.getElementById('restart-button');
const X_CLASS = 'x';
const O_CLASS = 'o';
const WINNING_COMBINATIONS = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Linhas
[0, 3, 6], [1, 4, 7], [2, 5, 8], // Colunas
[0, 4, 8], [2, 4, 6] // Diagonais
];
let oTurn; // Variável para controlar de quem é a vez
startGame(); // Inicia o jogo pela primeira vez
restartButton.addEventListener('click', startGame);
function startGame() {
oTurn = false; // X sempre começa
cells.forEach(cell => {
cell.classList.remove(X_CLASS);
cell.classList.remove(O_CLASS);
cell.removeEventListener('click', handleCellClick);
cell.addEventListener('click', handleCellClick, { once: true });
});
statusText.innerText = `É a vez do X`;
}Aqui, criamos uma constante para todas as combinações de vitória possíveis. O array `WINNING_COMBINATIONS` contém sub-arrays com os índices das células que formam uma linha, coluna ou diagonal vencedora. A função startGame prepara o tabuleiro para uma nova partida.
2. A Lógica do Clique e Verificação de Vitória
Agora, vamos criar a função que será executada toda vez que um jogador clicar em uma célula.
function handleCellClick(e) {
const cell = e.target;
const currentClass = oTurn ? O_CLASS : X_CLASS;
// 1. Marcar a célula
placeMark(cell, currentClass);
// 2. Verificar por vitória
if (checkWin(currentClass)) {
endGame(false); // false indica que não foi empate
} else if (isDraw()) {
// 3. Verificar por empate
endGame(true); // true indica que foi empate
} else {
// 4. Mudar o turno
swapTurns();
updateStatusText();
}
}
function placeMark(cell, currentClass) {
cell.classList.add(currentClass);
}
function swapTurns() {
oTurn = !oTurn;
}
function updateStatusText() {
statusText.innerText = `É a vez do ${oTurn ? 'O' : 'X'}`;
}
function checkWin(currentClass) {
return WINNING_COMBINATIONS.some(combination => {
return combination.every(index => {
return cells[index].classList.contains(currentClass);
});
});
}
function isDraw() {
return [...cells].every(cell => {
return cell.classList.contains(X_CLASS) || cell.classList.contains(O_CLASS);
});
}
function endGame(draw) {
if (draw) {
statusText.innerText = 'Empate! 😐';
} else {
statusText.innerText = `${oTurn ? "O" : "X"} Venceu! 🏆`;
}
// Remove os event listeners para não poder mais clicar
cells.forEach(cell => {
cell.removeEventListener('click', handleCellClick);
});
}Ufa! Bastante código, né? Mas vamos quebrar em partes. A função handleCellClick orquestra tudo. Ela chama outras funções menores com responsabilidades únicas: placeMark apenas adiciona a classe “x” ou “o” na célula clicada. checkWin verifica, para o jogador atual, se alguma das combinações de vitória foi atingida. isDraw verifica se todas as células foram preenchidas. E, finalmente, endGame encerra a partida, declarando o vencedor ou o empate. Essa separação de responsabilidades torna o código muito mais fácil de ler e manter. Esse é um princípio fundamental na programação!
Conclusão: Você Criou seu Primeiro Jogo! 🎉
Parabéns! Você conseguiu! 🥳 Você passou por todas as etapas, desde a criação da estrutura com HTML, a estilização com CSS, até a implementação da lógica complexa com JavaScript. Agora você tem um jogo da velha com JavaScript totalmente funcional criado por você!
Mais importante do que o resultado final é a jornada de aprendizado. Você agora tem uma experiência prática com manipulação do DOM, eventos, lógica condicional e organização de código. Estes são os blocos de construção para projetos muito maiores e mais complexos no futuro.
Não pare por aqui! Use este projeto como um trampolim. Desafie-se a adicionar novas funcionalidades: que tal um placar para contar as vitórias? Ou um modo de jogo contra um “computador” com uma lógica simples? As possibilidades são infinitas. Continue codificando, continue aprendendo e, acima de tudo, divirta-se no processo. Você está no caminho certo para se tornar um ótimo desenvolvedor!
Gostou deste conteúdo? Ele te ajudou de alguma forma?
Sua opinião é muito importante! Deixe um comentário abaixo com suas dúvidas, sugestões ou apenas para dizer um “oi!”. 👋
Se este artigo foi útil, que tal compartilhá-lo em suas redes sociais para que mais pessoas possam aprender? E para não perder nenhum tutorial como este, assine nossa Newsletter e nos siga em todas as nossas redes. Estamos sempre postando novidades e dicas valiosas por lá. Esperamos por você!
