1. O que é o Elemento Canvas?
O canvas é um elemento HTML que permite desenhar gráficos 2D diretamente em uma página web. Ele fornece uma área de desenho onde você pode criar formas, imagens e animações através do uso do JavaScript. O canvas funciona como uma tela em branco que podemos preencher com gráficos, sendo ideal para jogos simples e interativos.
2. Configurando o Canvas
Para começar, crie um arquivo HTML com o elemento <canvas>. No exemplo abaixo, definimos o tamanho do canvas e vinculamos um arquivo JavaScript que será responsável pela lógica do jogo.
Exemplo de 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 Simples com Canvas</title>
<style>
canvas {
background-color: #f0f0f0;
display: block;
margin: auto;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="meuCanvas" width="600" height="400"></canvas>
<script src="jogo.js"></script>
</body>
</html>
O canvas criado acima tem 600px de largura e 400px de altura, e o arquivo jogo.js conterá toda a lógica do jogo.
3. Desenhando no Canvas com JavaScript
Agora, no arquivo jogo.js, começaremos obtendo o contexto 2D do canvas e desenhando uma bola, que será o principal elemento do nosso jogo. O contexto 2D é a interface que permite desenhar no canvas.
Exemplo de Código:
// Obtendo o canvas e o contexto 2D
const canvas = document.getElementById('meuCanvas');
const ctx = canvas.getContext('2d');
// Definindo as propriedades da bola
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;
const raio = 10;
// Função para desenhar a bola
function desenharBola() {
ctx.beginPath();
ctx.arc(x, y, raio, 0, Math.PI * 2);
ctx.fillStyle = '#0095DD';
ctx.fill();
ctx.closePath();
}
// Função para atualizar a posição da bola
function atualizarPosicao() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
desenharBola();
// Verifica colisão com as bordas
if (x + dx > canvas.width - raio || x + dx < raio) {
dx = -dx;
}
if (y + dy > canvas.height - raio || y + dy < raio) {
dy = -dy;
}
x += dx;
y += dy;
}
// Função principal para animar o jogo
function jogo() {
atualizarPosicao();
requestAnimationFrame(jogo);
}
jogo();
Esse código desenha uma bola no canvas e a faz se mover pela tela, rebatendo nas bordas. A função requestAnimationFrame() é usada para criar uma animação suave, chamando a função jogo() repetidamente.
4. Adicionando uma Raquete para Interação
Vamos adicionar uma raquete controlada pelo usuário para rebater a bola. A raquete será controlada pelas teclas de seta esquerda e direita.
Exemplo de Código:
// Variáveis da raquete
let larguraRaquete = 75;
let alturaRaquete = 10;
let xRaquete = (canvas.width - larguraRaquete) / 2;
let teclaEsquerda = false;
let teclaDireita = false;
// Função para desenhar a raquete
function desenharRaquete() {
ctx.beginPath();
ctx.rect(xRaquete, canvas.height - alturaRaquete, larguraRaquete, alturaRaquete);
ctx.fillStyle = '#0095DD';
ctx.fill();
ctx.closePath();
}
// Eventos de teclado para mover a raquete
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
teclaDireita = true;
} else if (e.key === 'ArrowLeft') {
teclaEsquerda = true;
}
});
document.addEventListener('keyup', (e) => {
if (e.key === 'ArrowRight') {
teclaDireita = false;
} else if (e.key === 'ArrowLeft') {
teclaEsquerda = false;
}
});
// Função para mover a raquete
function moverRaquete() {
if (teclaDireita && xRaquete < canvas.width - larguraRaquete) {
xRaquete += 7;
} else if (teclaEsquerda && xRaquete > 0) {
xRaquete -= 7;
}
}
// Atualizando a função de animação
function atualizarPosicao() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
desenharBola();
desenharRaquete();
moverRaquete();
// Verifica colisão com a raquete
if (y + dy > canvas.height - raio) {
if (x > xRaquete && x < xRaquete + larguraRaquete) {
dy = -dy;
} else {
// Reiniciar a bola no centro em caso de falha
x = canvas.width / 2;
y = canvas.height - 30;
dx = 2;
dy = -2;
}
}
if (x + dx > canvas.width - raio || x + dx < raio) {
dx = -dx;
}
if (y + dy < raio) {
dy = -dy;
}
x += dx;
y += dy;
}
jogo();
Nesse exemplo, adicionamos a raquete e a lógica para movê-la com as teclas de seta. A bola rebaterá na raquete quando colidir com ela, e o jogo será reiniciado se a bola passar pela raquete.
5. Conclusão
Com o elemento canvas e algumas linhas de JavaScript, é possível criar jogos simples e interativos diretamente no navegador. Neste exemplo, criamos um jogo básico de bola e raquete, mas o canvas oferece muitas outras possibilidades, como criar gráficos complexos, animações e jogos mais avançados. Explore o canvas e continue aprimorando suas habilidades em desenvolvimento de jogos com JavaScript.