Game Jams no Browser: Você Não Precisa de Unity

Se você já fez algum front-end interativo, já tem 80% do que precisa pra fazer um jogo simples. Game jams como a June Solstice são desculpa perfeita pra testar isso — três semanas, tema aberto, e você descobre que canvas + requestAnimationFrame levam longe.

Por Que Desenvolvedores Web Deviam Fazer Game Jams

A maioria dos devs que conheço nunca tentou fazer um jogo porque acha que precisa aprender Unity ou Unreal. Mas se você já mexeu com animações CSS, state management ou physics simulators básicos pra UI, você já cruzou metade da ponte. Game jams forçam escopo pequeno — você não vai fazer Elden Ring em três semanas, vai fazer um Snake com twist. E isso cabe perfeitamente no que o browser oferece.

Além disso, jogos web rodam em qualquer lugar. Sem instalador, sem App Store review, sem build pra cinco plataformas. Você manda um link e qualquer um joga. Pra um jam onde o pessoal precisa testar dezenas de jogos rápido, isso importa.

Canvas API: Seu Motor Gráfico Embutido

O <canvas> existe desde 2010 e faz exatamente o que você precisa: desenhar pixels, shapes e imagens num loop de 60fps. A estrutura básica de qualquer jogo 2D cabe em 30 linhas:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const gameState = {
  player: { x: 50, y: 50, speed: 2 },
  enemies: []
};

function update(deltaTime) {
  // Input handling
  if (keys['ArrowRight']) gameState.player.x += gameState.player.speed;
  if (keys['ArrowLeft']) gameState.player.x -= gameState.player.speed;

  // Game logic
  gameState.enemies.forEach(enemy => {
    enemy.x += Math.sin(Date.now() / 1000) * 0.5;
  });
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw player
  ctx.fillStyle = '#00ff00';
  ctx.fillRect(gameState.player.x, gameState.player.y, 20, 20);

  // Draw enemies
  gameState.enemies.forEach(enemy => {
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(enemy.x, enemy.y, 15, 15);
  });
}

let lastTime = 0;
function gameLoop(currentTime) {
  const deltaTime = currentTime - lastTime;
  lastTime = currentTime;

  update(deltaTime);
  render();
  requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);

Esse padrão — update() pra lógica, render() pra desenho, gameLoop() amarrando tudo — é o mesmo de engines profissionais. A diferença é escala, não conceito.

Colisões e Física Sem Biblioteca

A parte que pega mais gente é detecção de colisão. Mas pra um jogo simples tipo jam, AABB (Axis-Aligned Bounding Box) resolve 90% dos casos:

function checkCollision(rectA, rectB) {
  return rectA.x < rectB.x + rectB.width &&
         rectA.x + rectA.width > rectB.x &&
         rectA.y < rectB.y + rectB.height &&
         rectA.y + rectA.height > rectB.y;
}

// No update()
gameState.enemies.forEach(enemy => {
  if (checkCollision(gameState.player, enemy)) {
    gameState.lives -= 1;
    enemy.x = -100; // Remove offscreen
  }
});

Física básica também é só Newton. Quer gravidade? player.velocityY += 0.5; player.y += player.velocityY;. Quer bounce? Inverte a velocidade quando bater no chão. Você não precisa de Box2D pra um platformer de jam.

Quando Usar um Framework

Canvas puro é divertido pra aprender, mas se você quer algo mais sólido, Phaser 3 é o meio-termo perfeito. Ele abstrai o canvas mas te deixa no controle:

import Phaser from 'phaser';

class GameScene extends Phaser.Scene {
  create() {
    this.player = this.physics.add.sprite(100, 100, 'player');
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-160);
    } else if (this.cursors.right.isDown) {
      this.player.setVelocityX(160);
    } else {
      this.player.setVelocityX(0);
    }
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: { default: 'arcade' },
  scene: GameScene
};

new Phaser.Game(config);

Phaser dá física de graça, sprite sheets, tilemaps, tween animations. Você pula as 200 linhas de boilerplate e vai direto pro gameplay. Pra um jam de três semanas, isso é a diferença entre terminar e não terminar.

Caveats que Aprendi na Prática

Performance: Canvas 2D aguenta uns 1000 sprites antes de engasgar. Se você precisa de mais, WebGL direto ou PixiJS. Mas honestamente, se o seu jogo de jam tem mil objetos na tela, o problema não é técnico — é design.

Mobile: Touch events não mapeiam direto pra teclado. Você vai precisar de botões virtuais ou gestures. E testa no celular cedo — Chrome DevTools não mostra quão lento o seu loop roda num Android médio.

Asset pipeline: Não existe importador automático de sprites. Você carrega tudo na mão (new Image()). Dá pra fazer um loader simples com Promises, mas se você tem muitos assets, Phaser ou uma build tool que processa imagens salva tempo.

Audio: <audio> funciona, mas latência mata jogos de ritmo. Web Audio API é mais complexa mas necessária se timing importa. Ou usa Howler.js e não pensa nisso.

Não reinvente tudo: Se você nunca fez um jogo, copie a estrutura de um exemplo de Phaser e ajuste. Jams recompensam execução, não pureza arquitetural. Você pode refatorar depois se quiser continuar o projeto.

TL;DR

• Desenvolvedores web já sabem o suficiente pra fazer jogos 2D simples — Canvas + game loop é tudo.
• AABB collision detection resolve a maioria dos casos sem física engine.
• Canvas puro ensina os fundamentos; Phaser 3 acelera produção sem esconder a mecânica.
• Performance de Canvas 2D é boa até ~1000 sprites; depois disso, WebGL.
• Game jams são escopo perfeito pra testar: três semanas, um mechanic core, ship algo jogável.