Desenvolvendo Jogos Simples com JavaScript
Aprenda a desenvolver jogos simples como Pedra, Papel e Tesoura, Jogo da Memória ou Jogo da Velha usando JavaScript com passos fáceis e exemplos reais.
Introdução
JavaScript é uma linguagem de programação extremamente versátil, especialmente quando se trata de desenvolvimento web. Uma de suas aplicações mais interessantes é a criação de jogos simples. Neste post, vamos explorar como desenvolver três jogos clássicos usando JavaScript: Pedra, Papel e Tesoura, Jogo da Memória e Jogo da Velha. Vamos abordar cada jogo passo a passo, garantindo que mesmo iniciantes possam acompanhar e entender.
1. Pedra, Papel e Tesoura
Descrição: Pedra, Papel e Tesoura é um jogo clássico de escolhas onde cada jogador escolhe entre três opções. As regras são simples: pedra vence a tesoura, tesoura vence o papel e papel vence a pedra.
Passo a Passo:
Estrutura HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Pedra, Papel e Tesoura</title>
<style>
.btn { margin: 10px; padding: 10px; cursor: pointer; }
</style>
</head>
<body>
<h1>Pedra, Papel e Tesoura</h1>
<button class="btn" id="pedra">Pedra</button>
<button class="btn" id="papel">Papel</button>
<button class="btn" id="tesoura">Tesoura</button>
<div id="resultado"></div>
<script src="script.js"></script>
</body>
</html>
Lógica JavaScript:
document.getElementById('pedra').addEventListener('click', () => jogar('pedra'));
document.getElementById('papel').addEventListener('click', () => jogar('papel'));
document.getElementById('tesoura').addEventListener('click', () => jogar('tesoura'));
function jogar(escolhaUsuario) {
const escolhas = ['pedra', 'papel', 'tesoura'];
const escolhaComputador = escolhas[Math.floor(Math.random() * 3)];
let resultado = '';
if (escolhaUsuario === escolhaComputador) {
resultado = 'Empate!';
} else if (
(escolhaUsuario === 'pedra' && escolhaComputador === 'tesoura') ||
(escolhaUsuario === 'papel' && escolhaComputador === 'pedra') ||
(escolhaUsuario === 'tesoura' && escolhaComputador === 'papel')
) {
resultado = 'Você venceu!';
} else {
resultado = 'Você perdeu!';
}
document.getElementById('resultado').innerText = `Você escolheu ${escolhaUsuario}, o computador escolheu ${escolhaComputador}. ${resultado}`;
}
2. Jogo da Memória
Descrição: O Jogo da Memória é um jogo que desafia sua capacidade de lembrar a posição de pares de cartas. Ao clicar em uma carta, ela revela uma imagem. O objetivo é encontrar todos os pares correspondentes.
Passo a Passo:
Estrutura HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Jogo da Memória</title>
<style>
.card { width: 100px; height: 100px; margin: 10px; float: left; cursor: pointer; background-color: #f0f0f0; }
.matched { background-color: #a0ffa0; }
</style>
</head>
<body>
<h1>Jogo da Memória</h1>
<div id="game-board"></div>
<script src="memory.js"></script>
</body>
</html>
Lógica JavaScript:
const cards = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F'];
let shuffledCards = cards.sort(() => 0.5 - Math.random());
let selectedCards = [];
let matchedCards = [];
shuffledCards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.card = card;
cardElement.addEventListener('click', () => revealCard(cardElement, card, index));
document.getElementById('game-board').appendChild(cardElement);
});
function revealCard(cardElement, card, index) {
if (selectedCards.length < 2 && !cardElement.classList.contains('matched')) {
cardElement.innerText = card;
selectedCards.push({ card, index });
if (selectedCards.length === 2) {
if (selectedCards[0].card === selectedCards[1].card && selectedCards[0].index !== selectedCards[1].index) {
matchedCards.push(selectedCards[0].index, selectedCards[1].index);
document.querySelectorAll('.card').forEach((el) => {
if (matchedCards.includes(parseInt(el.dataset.index))) {
el.classList.add('matched');
}
});
} else {
setTimeout(() => {
document.querySelectorAll('.card').forEach((el) => {
if (!matchedCards.includes(parseInt(el.dataset.index))) {
el.innerText = '';
}
});
}, 1000);
}
selectedCards = [];
}
}
}
3. Jogo da Velha
Descrição: Jogo da Velha é um jogo de dois jogadores onde cada jogador alterna para marcar um espaço em uma grade 3×3. O primeiro a conseguir três marcas em linha, coluna ou diagonal vence.
Passo a Passo:
Estrutura HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Jogo da Velha</title>
<style>
.grid { display: grid; grid-template-columns: repeat(3, 100px); grid-gap: 10px; }
.cell { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; font-size: 2em; cursor: pointer; background-color: #f0f0f0; }
</style>
</head>
<body>
<h1>Jogo da Velha</h1>
<div class="grid" id="game-board"></div>
<div id="resultado"></div>
<script src="tictactoe.js"></script>
</body>
</html>
Lógica JavaScript:
const board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';
const winConditions = [
[0, 1, 2], [3, 4, 5], [6, 7, 8],
[0, 3, 6], [1, 4, 7], [2, 5, 8],
[0, 4, 8], [2, 4, 6]
];
document.querySelectorAll('.cell').forEach((cell, index) => {
cell.addEventListener('click', () => makeMove(cell, index));
});
function makeMove(cell, index) {
if (board[index] === '' && !checkWin()) {
board[index] = currentPlayer;
cell.innerText = currentPlayer;
if (checkWin()) {
document.getElementById('resultado').innerText = `Jogador ${currentPlayer} venceu!`;
} else if (board.includes('')) {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
} else {
document.getElementById('resultado').innerText = 'Empate!';
}
}
}
function checkWin() {
return winConditions.some(condition => {
return condition.every(index => board[index] === currentPlayer);
});
}
Considerações Finais
Desenvolver jogos simples com JavaScript é uma excelente maneira de praticar e aprimorar suas habilidades de programação. Com estes exemplos, você pode expandir suas habilidades e criar jogos mais complexos. Experimente adicionar mais recursos, como placares, níveis de dificuldade ou gráficos aprimorados. A prática constante é fundamental para dominar a programação em JavaScript.
💡 Gostou do conteúdo?
✅ Apoie-nos: Siga, Curta, Comente e Compartilhe!
📲 Conecte-se com a WebMundi:
▶️ YouTube
▶️ Facebook
▶️ Instagram
▶️ LinkedIn
▶️ TikTok
👥 Participe do nosso Discord para tirar dúvidas e ajudar outras pessoas!
