ABC do Codigo - Jogo da Memória em JavaScript

EXEMPLO DE COMO CRIAR UM JOGO DA MEMÓRIA EM JAVASCRIPT

Adicionado em 13/06/2023

Compartilhar em:

Movimentos: 0 Pontuação: 100 Vitórias: 0 Derrotas: 0

Nesse artigo vamos mostrar como criar um Jogo da Memória utilizando JavaScript.

Como mostramos nos exemplos anteriores, vamos abrir o Bloco de Notas, clicar em Arquivos, Salvar Como, mudar o Tipo de Arquivo para Todos os Arquivos (∗.∗), e salvar como jogo-da-memoria.js. Esse será o nosso arquivo JavaScript que irá conter o código de controle do jogo da memória.

Agora vamos adicionar o seguinte código ao arquivo:

let cartas = ['https://abcdocodigo.com/images/drag_drop.png', 'https://abcdocodigo.com/images/drag_drop.png', 'https://abcdocodigo.com/images/icone_HD.png', 'https://abcdocodigo.com/images/icone_HD.png', 'https://abcdocodigo.com/images/icon_windows.png', 'https://abcdocodigo.com/images/icon_windows.png', 'https://abcdocodigo.com/images/Xadrez.png', 'https://abcdocodigo.com/images/Xadrez.png', 'https://abcdocodigo.com/images/delphi_cripto_icon.png', 'https://abcdocodigo.com/images/delphi_cripto_icon.png', 'https://abcdocodigo.com/images/xlstocsv.png', 'https://abcdocodigo.com/images/xlstocsv.png'];
let atual = [];
let adivinhando = false;
let correspondencias = 0;
let contagemMovimentos = 0;
let pontuacao = 100;
let vitorias = 0;
let derrotas = 0;

function embaralharArray(array) {
    for(let i = array.length - 1; i > 0; i--){
        const j = Math.floor(Math.random() ∗ i)
        const temp = array[i]
        array[i] = array[j]
        array[j] = temp
    }
}

function configurarCartas() {
    let tabuleiro = document.getElementById('tabuleiro'); // alteração feita aqui
    embaralharArray(cartas);
    for(let i = 0; i < cartas.length; i++){
        let carta = document.createElement('div');
        carta.dataset.item = cartas[i];
        carta.dataset.index = i;
        carta.innerHTML = "<img class='card-img' src='" + cartas[i] + "' alt='imagem'><div class='cover'></div>";
        carta.onclick = aoClicarCarta;
        tabuleiro.appendChild(carta);
    }
}

function aoClicarCarta(e) {
    if(adivinhando) return;
    let alvo = e.currentTarget;
    if(atual.length < 2) {
        alvo.classList.add('flipped');
        atual.push(alvo);
    }

contagemMovimentos++;
    document.getElementById('moves').textContent = 'Movimentos: ' + contagemMovimentos;

if(atual.length == 2) {
        adivinhando = true;
        if(atual[0].dataset.item == atual[1].dataset.item) {
            correspondencias++;
            adivinhando = false;
            atual = [];
            if(correspondencias == cartas.length/2) {
                alert('Você venceu!');
                vitorias++;
                document.getElementById('wins').textContent = 'Vitórias: ' + vitorias;
            }
        } else {
            setTimeout(function() {
                atual[0].classList.remove('flipped');
                atual[1].classList.remove('flipped');
                atual = [];
                adivinhando = false;
            }, 1000);
        }
    }

pontuacao--;
    document.getElementById('score').textContent = 'Pontuação: ' + pontuacao;
    if(pontuacao <= 0) {
        alert('Você perdeu!');
        derrotas++;
        document.getElementById('losses').textContent = 'Derrotas: ' + derrotas;
        reiniciarJogo();
    }
}

function reiniciarJogo() {
    atual = [];
    adivinhando = false;
    correspondencias = 0;
    contagemMovimentos = 0;
    pontuacao = 100;

document.getElementById('tabuleiro').innerHTML = ''; // alteração feita aqui
    document.getElementById('moves').textContent = 'Movimentos: ' + contagemMovimentos;
    document.getElementById('score').textContent = 'Pontuação: ' + pontuacao;

configurarCartas();
}

configurarCartas();

Veja que esse código está totalmente comentado a fim de que você possa modificar alguma coisa caso sinta vontade.

É importante ressaltar que a variável cartas representa endereço de imagens do nosso site que já estão na internet. Obviamente, você pode mudar essa parte do código para endereços de imagens que você deseja utilizar.

Agora, precisamos do código HTML para conectar e apresentar a página web do nosso jogo em JavaScript. Para isso, crie um novo documento em branco no Bloco de Notas, e assim como você fez para o código JavaScript, clique em Arquivos, Salvar Como e, novamente, mude o Tipo de Arquivos para Todos os Arquivos (∗.∗). Agora, salve a sua página HTML como você preferir (no nosso caso salvamos como Jogo_da_Memoria.html). O importante é que você salve o seu arquivo com a extensão HTML no final.

Agora, adicione o seguinte código HTML ao seu Bloco de Notas e clique em salvar o arquivo.

<!DOCTYPE html>
<html>
    <head>
        <title>Jogo da Memória</title>
        <style>
            #tabuleiro {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
                width: 300px;
                margin: 0 auto;
            }
            #tabuleiro > div {
                width: 80px;
                height: 80px;
                position: relative;
                overflow: hidden;
                border: 1px solid black;
                cursor: pointer;
            }
            #tabuleiro > div img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                z-index: 2;
                opacity: 0;
                transition: opacity 0.5s ease;
            }
            #tabuleiro > div.flipped img {
                opacity: 1;
            }
            #tabuleiro > div .cover {
                background: #ccc;
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 1;
            }
            #controles {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div id="tabuleiro">
            
        </div>
        <div id="controles">
            <button onclick="reiniciarJogo()">Novo Jogo</button>
            <span id="moves">Movimentos: 0</span>
            <span id="score">Pontuação: 100</span>
            <span id="wins">Vitórias: 0</span>
            <span id="losses">Derrotas: 0</span>
        </div>
        <script src="jogo-da-memoria.js"></script>
    </body>
</html>

Esse código HTML é bem básico e pode ser implementado dentro da sua página web.

Pronto, agora vá até o arquivo html que você criou, dê dois clicks para abrir, e a página HTML contendo seu jogo deve estar funcionando.

O seu jogo deve parecer como o que está no topo da página, clique em Novo Jogo (Sinta-se a vontade para visualizar o código HTML da nossa página, e ver como fizemos para implementar o jogo dentro da nossa página).

Contato