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.

Dicas de JavaScript básico para iniciantes - Manipulação de DOM — Tutorial de JavaScript básico para iniciantes

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.