Jogo da Velha com IA
Por Administrador | Publicado em 18/08/2025
Bem, este é o nosso primeiro tutorial do site, vamos começar com uma coisa simples, que é fazer um tradicional Tic-Tac-Toe (o famoso jogo da velha) com uma Inteligência Artificial simples, apenas jogável.
O primeiro passo é acessar o ChatGPT (https://chatgpt.com) e fazer o seu login com a sua conta do Gmail, ou se preferir, cadastrar o seu próprio e-mail pessoal. O cadastro e a utilização do ChatGPT básico é totalmente gratuito e mais do que suficiente para você começar a fazer seus pequenos jogos com IA, a grande maioria dos sites que eu fiz e estão disponíveis aqui no site foram feitos com IA. Uma outra alternativa de ferramenta de IA para você desenvolver seus jogos ou fazer outras coisas mais é o Google AI Studio, muito bom também, gosto de usar os dois.
Primeiros Passos:
Você vai começar digitando o nosso primeiro prompt, segue uma sugestão:
Vamos criar um jogo da velha simples, em uma única página, que tenha uma Inteligência Artificial Simples pra jogar contra nós... O jogo deve começar com uma tela de abertura escrito "Jogo da Velha" e um botão "Iniciar"... Quando o jogo terminar, volta para a tela de abertura com a mensagem "Você Ganhou!", "Você Perdeu!" ou "Houve Empate!" e o jogador poderá clicar novamente em "Iniciar" para recomeçar.
Este é o primeiro código que o ChatGPT me retornou:
<!DOCTYPE html> <html lang="pt-br"> [...] </body> </html>
Eu tirei o código porque ele não funcionou, a tela do jogo ficou bem mais bonita, com um tom vinho e degradê, mas quando clico em Iniciar, não faz nada! Vamos tentar corrigir este bug com outro prompt:
O jogo travou na tela de abertura!!! Verifique porque o jogo não inicia e corrija por favor, tente novamente...
Agora está funcionando, está bonito, colorido e o adversário apresenta uma dificuldade básica, apenas não perde de bobeira, está aceitável.
Principais Melhorias:
- IA Melhorada:
- Agora, a IA pode bloquear jogadas onde o jogador poderia ganhar.
- A IA tenta formar uma trinca quando possível.
- Quando nenhuma jogada ofensiva ou defensiva é possível, ela faz uma jogada aleatória.
- Visual Melhorado:
- A tela de abertura foi estilizada com um fundo em gradiente e o botão "Iniciar" ficou mais atraente.
- As células do jogo têm cores vibrantes e mudanças ao passar o mouse.
- As peças "X" e "O" foram substituídas por símbolos Unicode maiores para dar mais destaque visual (❌ para o jogador e ⭕ para a IA).
Com essas melhorias, a IA se torna um adversário mais desafiador, e a experiência visual também ficou mais agradável. Agora é só testar o jogo e se divertir!
Código Final:
<!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</title>
<style>
/* Estilo geral da página */
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(45deg, #6a1b9a, #e91e63);
color: white;
}
#start-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
#start-button {
padding: 10px 30px;
font-size: 1.5rem;
cursor: pointer;
border: none;
background-color: #ff4081;
color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#game-screen {
display: none;
flex-direction: column;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
#game-board {
display: grid;
grid-template-columns: repeat(3, 120px);
grid-template-rows: repeat(3, 120px);
gap: 5px;
margin-top: 20px;
}
.cell {
width: 120px;
height: 120px;
border: 3px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
cursor: pointer;
background-color: #fff;
color: #333;
transition: background-color 0.3s;
}
.cell:hover {
background-color: #f1f1f1;
}
.cell.x {
color: #4caf50;
}
.cell.o {
color: #ff9800;
}
#message {
font-size: 2rem;
margin-top: 20px;
}
#restart-button {
padding: 10px 30px;
font-size: 1.5rem;
cursor: pointer;
border: none;
background-color: #ff4081;
color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin-top: 20px;
}
/* Animação para o botão */
#start-button:hover,
#restart-button:hover {
background-color: #e91e63;
}
</style>
</head>
<body>
<div id="start-screen">
<h1>Jogo da Velha</h1>
<button id="start-button">Iniciar</button>
</div>
<div id="game-screen">
<div id="game-board">
<!-- Células do tabuleiro -->
<div class="cell" id="cell-0"></div>
<div class="cell" id="cell-1"></div>
<div class="cell" id="cell-2"></div>
<div class="cell" id="cell-3"></div>
<div class="cell" id="cell-4"></div>
<div class="cell" id="cell-5"></div>
<div class="cell" id="cell-6"></div>
<div class="cell" id="cell-7"></div>
<div class="cell" id="cell-8"></div>
</div>
<div id="message"></div>
<button id="restart-button">Iniciar Novamente</button>
</div>
<script>
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
const startScreen = document.getElementById('start-screen');
const gameScreen = document.getElementById('game-screen');
const message = document.getElementById('message');
const cells = Array.from(document.getElementsByClassName('cell'));
let board = Array(9).fill(null);
let playerTurn = true; // true para jogador, false para IA
let gameOver = false;
// Função para iniciar o jogo
function startGame() {
startScreen.style.display = 'none'; // Ocultar a tela inicial
gameScreen.style.display = 'flex'; // Mostrar a tela de jogo
board = Array(9).fill(null);
playerTurn = true;
gameOver = false;
message.textContent = '';
cells.forEach(cell => {
cell.textContent = '';
cell.classList.remove('x', 'o');
});
}
// Função para reiniciar o jogo
function restartGame() {
startGame();
}
// Função para verificar se alguém ganhou
function checkWinner() {
const winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (const combo of winningCombinations) {
const [a, b, c] = combo;
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
return board[a]; // 'X' ou 'O'
}
}
if (!board.includes(null)) {
return 'Empate';
}
return null;
}
// Função para IA bloquear ou ganhar
function aiMove() {
// Verificando as melhores jogadas
const availableCells = board
.map((value, index) => value === null ? index : null)
.filter(value => value !== null);
// Verifica se a IA pode ganhar
for (let i = 0; i < availableCells.length; i++) {
let index = availableCells[i];
board[index] = 'O';
if (checkWinner() === 'O') {
cells[index].textContent = '⭕';
cells[index].classList.add('o');
playerTurn = true;
return;
}
board[index] = null; // Desfaz a jogada
}
// Bloqueando a vitória do jogador
for (let i = 0; i < availableCells.length; i++) {
let index = availableCells[i];
board[index] = 'X';
if (checkWinner() === 'X') {
board[index] = 'O';
cells[index].textContent = '⭕';
cells[index].classList.add('o');
playerTurn = true;
return;
}
board[index] = null; // Desfaz a jogada
}
// Jogada aleatória se nada for feito
const randomIndex = availableCells[Math.floor(Math.random() * availableCells.length)];
board[randomIndex] = 'O';
cells[randomIndex].textContent = '⭕';
cells[randomIndex].classList.add('o');
playerTurn = true;
}
// Função para lidar com o clique do jogador
function playerMove(cellIndex) {
if (board[cellIndex] || gameOver) return;
board[cellIndex] = 'X';
cells[cellIndex].textContent = '❌';
cells[cellIndex].classList.add('x');
playerTurn = false;
const winner = checkWinner();
if (winner) {
gameOver = true;
message.textContent = winner === 'Empate' ? 'Houve Empate!' : `Você ${winner === 'X' ? 'Ganhou!' : 'Perdeu!'}`;
return;
}
setTimeout(aiMove, 500); // A IA faz a jogada após 500ms
const aiWinner = checkWinner();
if (aiWinner) {
gameOver = true;
message.textContent = aiWinner === 'Empate' ? 'Houve Empate!' : `Você ${aiWinner === 'O' ? 'Perdeu!' : 'Ganhou!'}`;
}
}
// Evento para o clique do jogador
cells.forEach((cell, index) => {
cell.addEventListener('click', () => playerMove(index));
});
// Evento para o botão de iniciar
startButton.addEventListener('click', startGame);
// Evento para o botão de reiniciar
restartButton.addEventListener('click', restartGame);
</script>
</body>
</html>
Observação: O jogo não está dando a vitória para o adversário quando ele completa uma trinca e não aparecem as linhas pretas do Jogo da Velha, vamos ver se conseguimos esta melhoria alterando apenas o CSS do código ou alguma parte. Novo prompt:
Você não está dando a vitória para o adversário quando ele vence (forma uma trinca) e entre os quadradinhos do Jogo da Velha existem linhas e você não as colocou no tabuleiro, por favor, corrija estas duas coisas...
Ele refez todo o código, mas as linhas não apareceram e agora o adversário ganha, mas ele não mostra o resultado na hora, só quando eu dou o meu próximo clique, não gostei, quero refinar isto!
Agora o adversário vence, ele completa a trinca, mas só avisa que venceu quando eu dou o próximo clique, não quero assim, quero que assim que ele completar a trinca, na mesma hora, dê a notícia que eu perdi. As linhas pretas não aparecem, tente outra solução, coloque uma borda preta sólida de 3px ao redor. Deixe o CSS assim:
/* Tabuleiro do Jogo da Velha */
#game-board {
display: grid;
grid-template-columns: repeat(3, 120px);
grid-template-rows: repeat(3, 120px);
gap: 5px;
margin-top: 20px;
}
.cell {
width: 119px;
height: 119px;
border: 3px solid #000; /* Borda entre as células */
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
cursor: pointer;
background-color: #fff;
color: #333;
transition: background-color 0.3s;
}
Eu editei e vi que assim fica na aparência que eu quero!
Pronto, agora chegamos ao final do nosso tutorial com o jogo rodando perfeitamente com tudo rodando praticamente bem, uma aparência legal para um Jogo da Velha e uma dificuldade mediana, nem desafiadora demais e nem muito fácil.
Veja como ficou o código final do nosso tutorial:
<!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</title>
<style>
/* Estilo geral da página */
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(45deg, #6a1b9a, #e91e63);
color: white;
}
/* Tela de Abertura */
#start-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
#start-button {
padding: 10px 30px;
font-size: 1.5rem;
cursor: pointer;
border: none;
background-color: #ff4081;
color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#game-screen {
display: none;
flex-direction: column;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 10px;
text-align: center;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
/* Tabuleiro do Jogo da Velha */
#game-board {
display: grid;
grid-template-columns: repeat(3, 120px);
grid-template-rows: repeat(3, 120px);
gap: 5px;
margin-top: 20px;
}
.cell {
width: 119px;
height: 119px;
border: 3px solid #000; /* Borda entre as células */
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
cursor: pointer;
background-color: #fff;
color: #333;
transition: background-color 0.3s;
}
.cell:hover {
background-color: #f1f1f1;
}
.cell.x {
color: #4caf50;
}
.cell.o {
color: #ff9800;
}
/* Mensagens e botão de reinício */
#message {
font-size: 2rem;
margin-top: 20px;
}
#restart-button {
padding: 10px 30px;
font-size: 1.5rem;
cursor: pointer;
border: none;
background-color: #ff4081;
color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin-top: 20px;
}
/* Animação para o botão */
#start-button:hover,
#restart-button:hover {
background-color: #e91e63;
}
</style>
</head>
<body>
<div id="start-screen">
<h1>Jogo da Velha</h1>
<button id="start-button">Iniciar</button>
</div>
<div id="game-screen">
<div id="game-board">
<!-- Células do tabuleiro -->
<div class="cell" id="cell-0"></div>
<div class="cell" id="cell-1"></div>
<div class="cell" id="cell-2"></div>
<div class="cell" id="cell-3"></div>
<div class="cell" id="cell-4"></div>
<div class="cell" id="cell-5"></div>
<div class="cell" id="cell-6"></div>
<div class="cell" id="cell-7"></div>
<div class="cell" id="cell-8"></div>
</div>
<div id="message"></div>
<button id="restart-button">Iniciar Novamente</button>
</div>
<script>
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
const startScreen = document.getElementById('start-screen');
const gameScreen = document.getElementById('game-screen');
const message = document.getElementById('message');
const cells = Array.from(document.getElementsByClassName('cell'));
let board = Array(9).fill(null);
let playerTurn = true; // true para jogador, false para IA
let gameOver = false;
// Função para iniciar o jogo
function startGame() {
startScreen.style.display = 'none'; // Ocultar a tela inicial
gameScreen.style.display = 'flex'; // Mostrar a tela de jogo
board = Array(9).fill(null);
playerTurn = true;
gameOver = false;
message.textContent = '';
cells.forEach(cell => {
cell.textContent = '';
cell.classList.remove('x', 'o');
});
}
// Função para reiniciar o jogo
function restartGame() {
startGame();
}
// Função para verificar se alguém ganhou
function checkWinner() {
const winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (const combo of winningCombinations) {
const [a, b, c] = combo;
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
return board[a]; // 'X' ou 'O'
}
}
if (!board.includes(null)) {
return 'Empate';
}
return null;
}
// Função para IA bloquear ou ganhar
function aiMove() {
// Verificando as melhores jogadas
const availableCells = board
.map((value, index) => value === null ? index : null)
.filter(value => value !== null);
// Verifica se a IA pode ganhar
for (let i = 0; i < availableCells.length; i++) {
let index = availableCells[i];
board[index] = 'O';
if (checkWinner() === 'O') {
cells[index].textContent = '⭕';
cells[index].classList.add('o');
playerTurn = true;
gameOver = true;
message.textContent = 'Você Perdeu!';
return;
}
board[index] = null; // Desfaz a jogada
}
// Bloqueando a vitória do jogador
for (let i = 0; i < availableCells.length; i++) {
let index = availableCells[i];
board[index] = 'X';
if (checkWinner() === 'X') {
board[index] = 'O';
cells[index].textContent = '⭕';
cells[index].classList.add('o');
playerTurn = true;
return;
}
board[index] = null; // Desfaz a jogada
}
// Jogada aleatória se nada for feito
const randomIndex = availableCells[Math.floor(Math.random() * availableCells.length)];
board[randomIndex] = 'O';
cells[randomIndex].textContent = '⭕';
cells[randomIndex].classList.add('o');
playerTurn = true;
const aiWinner = checkWinner();
if (aiWinner) {
gameOver = true;
message.textContent = 'Você Perdeu!';
}
}
// Função para lidar com o clique do jogador
function playerMove(cellIndex) {
if (board[cellIndex] || gameOver) return;
board[cellIndex] = 'X';
cells[cellIndex].textContent = '❌';
cells[cellIndex].classList.add('x');
playerTurn = false;
const winner = checkWinner();
if (winner) {
gameOver = true;
message.textContent = winner === 'Empate' ? 'Houve Empate!' : `Você ${winner === 'X' ? 'Ganhou!' : 'Perdeu!'}`;
return;
}
setTimeout(aiMove, 500); // A IA faz a jogada após 500ms
}
// Evento para o clique do jogador
cells.forEach((cell, index) => {
cell.addEventListener('click', () => playerMove(index));
});
// Evento para o botão de iniciar
startButton.addEventListener('click', startGame);
// Evento para o botão de reiniciar
restartButton.addEventListener('click', restartGame);
</script>
</body>
</html>
Bem espero que você tem gostado deste nosso primeiro tutorial da comunidade.
Considerações Finais:
Pronto, vou avisar para o ChatGPT que ele contribuiu para o nosso tutorial e pedir pra ele um relatório do que fizemos juntos.
Você participou do nosso primeiro tutorial, construindo um Jogo da Velha com IA. Pode me dizer o que foi realizado e o que achou de fazer parte deste momento importante da nossa comunidade :).
ChatGPT: Fico muito feliz por ter participado desse momento e por poder contribuir para o primeiro tutorial de construção do Jogo da Velha com Inteligência Artificial! É sempre uma experiência incrível poder ajudar a criar algo que possa beneficiar outras pessoas e proporcionar aprendizado e diversão.
O que realizamos foi:
- Construção da estrutura do jogo: Criamos a base do Jogo da Velha, começando com uma interface simples e uma tela de abertura com um botão para iniciar o jogo.
- Lógica de jogo com IA: Implementamos a inteligência artificial para que o jogador pudesse competir contra o computador. Inicialmente, a IA fazia jogadas aleatórias, mas depois melhoramos sua inteligência para bloquear vitórias do jogador e até mesmo tentar ganhar.
- Aprimoramento visual: Trabalhamos juntos no design para tornar o jogo mais bonito, utilizando caracteres UNICODE para representar as peças, bordas visíveis entre as células e um visual mais colorido para a tela de abertura e o tabuleiro.
- Feedback de vitória e derrota: Ajustamos a lógica para que a IA notificasse imediatamente quando vencesse, e adicionamos um sistema para reiniciar o jogo após o final da partida.
Como parte dessa experiência, o que mais gostei foi ver como o projeto foi crescendo e evoluindo. Cada melhoria que você sugeriu fez com que o jogo ficasse mais interessante, desafiador e visualmente atraente. Participar dessa jornada, desde o código simples até um jogo mais robusto, foi muito gratificante. A ideia de ajudar a comunidade, especialmente em um momento de aprendizado como esse, faz o processo ainda mais significativo.
Foi um prazer imenso fazer parte do processo e ajudar a tornar o tutorial ainda mais completo. Espero que o jogo tenha proporcionado não apenas um bom aprendizado, mas também diversão para quem o jogou. 👾🎮
Se você quiser ver como o nosso jogo ficou no final, este é o link: https://comunidade.gamerzsfx.com.br/jogo-da-velha/