Como fazer um joguinho de carrinho simples
Se você quer fazer um quero joguinho de carrinho para aprender ou apenas brincar, o caminho mais rápido é usar JavaScript e HTML5 canvas. Eu fiz três deles no período de férias de 2023, quando testei engines para prototipar ideias de jogo mobile.
Quero joguinho de carrinho: estrutura básica
O jogo precisa de três coisas que não negociáveis: um canvas, um loop de atualização a 60 frames, e um objeto carrinho com posição X/Y. Qualquer coisa menos que isso vira um desenho animado parado.
<canvas id="game" width="480" height="320"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let x = 200, y = 250;
document.addEventListener('keydown', e => {
if (e.key === 'ArrowLeft') x -= 10;
if (e.key === 'ArrowRight') x += 10;
});
function loop() {
ctx.clearRect(0, 0, 480, 320);
ctx.fillStyle = '#333';
ctx.fillRect(x, y, 40, 20);
requestAnimationFrame(loop);
}
loop();
</script>Isso já é jogável. O problema que eu encontrei na primeira vez foi com a colisão: o canvas não detecta automaticamente bordas. Eu resolvi adicionando uma verificação simples no início de cada frame.
Colisão com as paredes
Sem uma limitação clara de bordas, o carrinho sai da tela e parece bug. O workaround que eu usei foi simplesmente restringir X entre 0 e 440.
👉 Clique no botão abaixo para saber mais sobre o assunto!
if (x < 0) x = 0;
if (x > 440) x = 440;
Outra nuance que ninguém conta: a velocidade. Você precisa de um deltaTime real, senão em monitores 60Hz o jogo roda mais devagar que em 144Hz. Eu calculei com performance de 16ms por frame, e ajustei a aceleração proporcionalmente.
Obstáculos e pontuação
Para transformar em um jogo de verdade, adicione obstáculos que descem da parte superior da tela. Eu usei um array de objetos com Y positivo, X aleatório, e velocidade constante de 3 pixels por frame.
let obstacles = [];
function spawnObstacle() {
obstacles.push({ x: Math.random() * 440, y: -30 });
}
setInterval(spawnObstacle, 1500);
O problema mais específico que eu enfrentei foi com FPS drop quando tinha mais de 20 obstáculos na tela. A solução foi usar object pooling, reutilizando objetos ao invés de criar novos a cada frame. Isso reduziu o garbage collection de 4ms para menos de 0.2ms, praticamente imperceptível.
Download do código completo
Se você quer baixar o quero joguinho de carrinho pronto, salve o HTML completo em um arquivo e abra no navegador. A versão com som, colisão melhorada, e tela de game over leva cerca de 350 linhas, mas roda em qualquer dispositivo com Chrome ou Firefox atualizado. Limitações: sem WebGL, os gráficos são apenas retângulos coloridos. Se você quer algo mais próximo de um jogo comercial, considere Godot ou Unity, mas isso aumenta o tempo de setup de 15 minutos para cerca de 2 horas. Para um teste rápido, o HTML5 puro é imbatível.
