Como Criar um Jogo da Cobrinha em JavaScript, HTML e CSS

Atualizado em: 25 de fevereiro de 2025

Introdução

Neste tutorial, você aprenderá a criar o clássico jogo da cobrinha usando HTML, CSS e JavaScript. Vamos passo a passo construir o jogo, desde a estrutura básica até a lógica de movimentação e colisão. Esse projeto é ótimo para quem quer aprimorar suas habilidades em JavaScript e lógica de programação.

Passo 1: Estrutura Básica em HTML

Vamos começar criando o arquivo HTML que conterá a estrutura do nosso jogo. Ele terá um <canvas>, onde desenharemos a cobra e a comida, e um título simples.

HTML

<!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 Cobrinha</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Jogo da Cobrinha</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

Aqui temos:

Um <canvas> que vai servir de espaço para desenhar a cobra e a comida.
Um arquivo CSS (style.css) para adicionar estilos e um arquivo JavaScript (script.js) onde a lógica do jogo será desenvolvida.

Passo 2: Estilizando o Jogo com CSS

Agora, vamos adicionar um pouco de estilo para centralizar o jogo na tela e deixar o canvas com uma borda.

CSS

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

canvas {
    border: 2px solid #000;
}

Passo 3: Lógica do Jogo com JavaScript

Agora, vamos à parte mais interessante: o JavaScript. A lógica do jogo da cobrinha envolve:

Movimentar a cobra em uma direção até que ela colida com a parede ou com seu próprio corpo.
Fazer a cobra crescer ao comer a comida.
Verificar colisões e reiniciar o jogo quando necessário.

Aqui está o código JavaScript que implementa a lógica:

JavaScript

// Inicializamos o canvas e o contexto 2D para desenhar
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d'); // O contexto 2D é usado para desenhar no canvas

// Configuramos o grid do jogo (cada célula terá 20px)
const grid = 20;

// Variável de controle para desacelerar a velocidade do jogo
let count = 0;

// Definimos a posição inicial da cobra (um array com a cabeça da cobra)
let snake = [{ x: 160, y: 160 }];

// Direção inicial da cobra (movendo-se para a direita)
let dx = grid; // A cobra se move horizontalmente no eixo X
let dy = 0;    // A cobra não se move verticalmente inicialmente

// Posição inicial da comida, gerada aleatoriamente no grid
let food = { 
    x: Math.floor(Math.random() * 20) * grid, // Posição X da comida
    y: Math.floor(Math.random() * 20) * grid  // Posição Y da comida
};

// Inicializamos a pontuação
let score = 0;

// Função principal do jogo, responsável por atualizar e desenhar a cada frame
function gameLoop() {
    // Controla a velocidade do jogo (executa o loop a cada 6 frames)
    if (++count < 6) return;
    count = 0;

    // Define a nova posição da cabeça da cobra com base na direção (dx, dy)
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };

    // Verifica se a cabeça da cobra bateu nas bordas do canvas
    if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
        alert('Fim de jogo! Sua pontuação foi: ' + score); // Exibe a pontuação final
        document.location.reload(); // Recarrega a página para reiniciar o jogo
    }

    // Verifica se a cobra colidiu com ela mesma
    for (let i = 0; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
            alert('Fim de jogo! Sua pontuação foi: ' + score); // Exibe a pontuação final
            document.location.reload(); // Recarrega a página para reiniciar o jogo
        }
    }

    // Adiciona a nova cabeça da cobra ao início do array
    snake.unshift(head);

    // Verifica se a cobra comeu a comida
    if (head.x === food.x && head.y === food.y) {
        score++; // Aumenta a pontuação
        // Gera uma nova posição aleatória para a comida no grid
        food = { 
            x: Math.floor(Math.random() * 20) * grid, 
            y: Math.floor(Math.random() * 20) * grid 
        };
    } else {
        snake.pop(); // Remove a última parte da cobra, simulando o movimento
    }

    // Limpa o canvas para redesenhar a nova posição da cobra e da comida
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Desenha a comida (um quadrado vermelho)
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, grid, grid);

    // Desenha a cobra (um conjunto de quadrados verdes)
    ctx.fillStyle = 'green';
    snake.forEach(part => ctx.fillRect(part.x, part.y, grid, grid));
}

// Escuta eventos de tecla para mudar a direção da cobra
document.addEventListener('keydown', function(e) {
    // Move para a esquerda (somente se a cobra não estiver indo para a direita)
    if (e.key === 'ArrowLeft' && dx === 0) { 
        dx = -grid; // Muda a direção para o eixo X negativo (esquerda)
        dy = 0;     // Para o movimento vertical
    }
    // Move para cima (somente se a cobra não estiver indo para baixo)
    if (e.key === 'ArrowUp' && dy === 0) { 
        dx = 0;     // Para o movimento horizontal
        dy = -grid; // Muda a direção para o eixo Y negativo (cima)
    }
    // Move para a direita (somente se a cobra não estiver indo para a esquerda)
    if (e.key === 'ArrowRight' && dx === 0) { 
        dx = grid;  // Muda a direção para o eixo X positivo (direita)
        dy = 0;     // Para o movimento vertical
    }
    // Move para baixo (somente se a cobra não estiver indo para cima)
    if (e.key === 'ArrowDown' && dy === 0) { 
        dx = 0;     // Para o movimento horizontal
        dy = grid;  // Muda a direção para o eixo Y positivo (baixo)
    }
});

// Inicia o loop do jogo, chamando a função gameLoop a cada 50ms
setInterval(gameLoop, 50);

Explicando o JavaScript:

Movimentação da Cobra: Cada vez que a função gameLoop é chamada, atualizamos a posição da cobra com base na direção (dx, dy).
Comida: Quando a cabeça da cobra atinge a comida, a cobra cresce e uma nova comida é gerada em uma posição aleatória.
Colisão: Verificamos se a cobra colidiu com as bordas ou com o próprio corpo, reiniciando o jogo se houver colisão.

Passo 4: Melhorias

Você pode melhorar o jogo adicionando funcionalidades como níveis de dificuldade, sons e animações. Um exemplo seria aumentar a velocidade do jogo conforme a pontuação aumenta.

Conclusão

Neste tutorial, você aprendeu como criar um jogo da cobrinha utilizando HTML, CSS e JavaScript. Esse projeto é um ótimo exemplo para treinar suas habilidades em programação e pode ser expandido de várias maneiras. Divirta-se programando!