Os assistentes de programação com IA evoluíram do simples preenchimento automático para agentes autônomos capazes de planejar, editar vários arquivos, executar testes e criar pull requests. Este tutorial aborda as três principais ferramentas: Claude Code, Cursor e GitHub Copilot.

1) O que torna uma ferramenta "agêntica"?

O preenchimento automático tradicional com IA sugere as próximas linhas. As ferramentas agênticas vão além:

As ferramentas agênticas podem compreender toda a estrutura do seu projeto, planejar alterações em vários arquivos, executar essas alterações, rodar testes e iterar até que a tarefa seja concluída.

2) Comparação rápida: Claude Code vs Cursor vs Copilot

3) Fundamentos do Claude Code

O Claude Code usa o Opus 4.8 (seu modelo padrão atual), com grandes janelas de contexto. Instale e autentique:

# Instale o Claude Code (instalador nativo, recomendado)
curl -fsSL https://claude.ai/install.sh | bash

# Ou via npm (requer Node 18+)
npm install -g @anthropic-ai/claude-code

# Autentique-se: execute claude e siga a solicitação no navegador
claude

# Inicie no seu projeto
cd your-project
claude

Comandos básicos

# Pergunte sobre seu código-fonte
claude "Como a autenticação é implementada aqui?"

# Gere código
claude "Adicione um middleware de limitação de taxa"

# Refatore vários arquivos
claude "Renomeie UserService para AuthService em todo o código-fonte"

# Crie um PR
claude "Crie um PR que adicione validação de entrada a todos os endpoints da API"

Configuração do projeto

Coloque o contexto do projeto em um arquivo CLAUDE.md na raiz do repositório. O Claude Code o lê automaticamente no início de cada sessão:

# Observações do projeto

- Linguagem: TypeScript, formatado com Prettier
- Testes: Vitest, em tests/
- Não altere node_modules/ nem dist/

As configurações legíveis por máquina (permissões de ferramentas, variáveis de ambiente e hooks) ficam em .claude/settings.json. Por exemplo, para exigir aprovação antes da execução de ferramentas destrutivas, configure as permissões nesse arquivo.

Memória e contexto

O contexto persistente do projeto fica em arquivos CLAUDE.md, que o Claude Code carrega no início de cada sessão, além de um armazenamento de memória automática que o próprio Claude atualiza com base nas suas correções e preferências. Para fornecer contexto permanente, edite o CLAUDE.md em vez de enviar uma instrução avulsa como "Lembre-se:":

# CLAUDE.md
Este é um monorepo. O código compartilhado fica em packages/.

Use o comando /clear durante uma sessão para redefinir o contexto de trabalho.

4) Recursos agênticos da IDE Cursor

O Cursor foi desenvolvido em torno de fluxos de trabalho agênticos. Principais recursos:

Modo Agent

Pressione Cmd+Shift+I (Mac) ou Ctrl+Shift+I (Windows/Linux) para abrir o Composer no modo Agent:

Fluxo de trabalho do modo Agent:
1. Descreva sua tarefa
2. O agente cria um plano
3. Você aprova ou modifica
4. O agente executa as alterações
5. Revise e itere

Modo Plan

Para tarefas complexas, use explicitamente o modo Plan:

@plan Adicione autenticação de usuário com:
- Tokens JWT
- Rotação de refresh tokens
- Hash de senhas com bcrypt
- Limitação de tentativas de login

O agente irá:

1. Analisar seu código existente
2. Criar um plano de implementação detalhado
3. Aguardar sua aprovação
4. Executar o plano passo a passo

Injeção de contexto

Use @ para adicionar um contexto específico:

@file src/api/auth.ts
@folder src/middleware
@docs https://jwt.io/introduction

Implemente um middleware de verificação de JWT seguindo estes padrões

Agentes em paralelo

Execute vários agentes simultaneamente em branches diferentes:

# No Cursor:
1. Abra a Paleta de Comandos
2. "Cursor: New Agent in Worktree"
3. Cada agente trabalha isoladamente
4. Compare os resultados lado a lado

O Cursor 3 adicionou uma janela de agentes (abra-a com Cmd+Shift+P e depois "Agents Window") que executa vários agentes em paralelo entre checkouts locais, worktrees do git e ambientes na nuvem. O comando /worktree coloca cada agente em seu próprio worktree isolado do git, enquanto /best-of-n executa a mesma tarefa em vários modelos para que você possa comparar os resultados lado a lado.

Regras para manter a consistência

Crie .cursor/rules/project.mdc:

# Regras do projeto

## Estilo do código
- Use o modo estrito do TypeScript
- Prefira componentes funcionais
- Use exportações nomeadas, não padrão

## Testes
- Todo recurso precisa de testes
- Use blocos describe/it
- Simule serviços externos

## Segurança
- Nunca faça commit de segredos
- Valide todas as entradas do usuário
- Use consultas parametrizadas

5) Recursos agênticos do GitHub Copilot

O Copilot evoluiu para além do preenchimento automático:

Copilot Chat

Abra o painel de chat e use comandos com barra:

/explain - Explique o código selecionado
/fix - Corrija problemas na seleção
/tests - Gere testes
/doc - Adicione documentação

Agente de programação (de issue a pull request)

# No GitHub:
1. Abra uma issue do GitHub
2. Atribua-a ao "Copilot"
3. O agente de programação trabalha em segundo plano:
   analisa a issue, edita arquivos e executa testes
4. Ele abre um pull request para sua revisão

Isso é diferente do modo Agent do Copilot na IDE, que trabalha de forma síncrona ao seu lado no VS Code ou no JetBrains.

O Copilot agora divide seu trabalho autônomo em duas partes: o modo Agent é executado de forma síncrona dentro da sua IDE (VS Code e JetBrains), decidindo quais arquivos editar, executando comandos no terminal e iterando sobre erros; o agente de programação é executado de forma assíncrona na nuvem, assumindo uma issue atribuída e entregando um pull request enquanto você trabalha em outra coisa.

Sugestões inline com contexto

O Copilot lê seu código-fonte. Ajude-o com comentários:

// Middleware de autenticação que:
// - Extrai o JWT do cabeçalho Authorization
// - Valida a assinatura do token
// - Anexa o usuário à requisição
// - Retorna 401 se for inválido
export function authMiddleware(req, res, next) {
  // O Copilot gera a implementação
}

6) Boas práticas para todas as ferramentas

Escreva prompts claros

❌ Ruim: "Corrija o bug"

✅ Bom: "Corrija a exceção de ponteiro nulo em UserService.getById 
quando o usuário não existir. Retorne null em vez de lançar uma exceção."

❌ Ruim: "Adicione testes"

✅ Bom: "Adicione testes unitários para o CartService cobrindo:
- Adição de itens a um carrinho vazio
- Remoção de itens
- Cálculo de totais com descontos
- Caso extremo: quantidades negativas"

Use o modo de planejamento para tarefas complexas

Para qualquer tarefa que altere 3 ou mais arquivos, sempre:

1. Peça primeiro um plano
2. Revise o plano
3. Aprove ou modifique
4. Deixe o agente executar
5. Revise as alterações antes de fazer commit

Forneça contexto arquitetural

Antes de trabalhos importantes, contextualize o agente:

"Esta é uma arquitetura de microsserviços:
- api-gateway: Encaminha requisições
- auth-service: JWT, sessões
- user-service: CRUD de usuários
- notification-service: E-mail, push

Os serviços se comunicam via pub/sub do Redis.
O banco de dados é PostgreSQL com o ORM Prisma."

Desenvolvimento orientado a testes com agentes

1. Escreva primeiro um teste que falhe:
   "Escreva um teste de cadastro de usuário que exija a validação do e-mail"

2. Deixe o agente ver o teste falhando:
   "Implemente o cadastro para fazer este teste passar"

3. Continue iterando até tudo passar:
   "Corrija as falhas de teste restantes"

7) Considerações de segurança

As ferramentas agênticas têm poder real. Defina limites:

Etapas de aprovação

// .claude/config.json
{
  "safety": {
    "requireApproval": [
      "rm",
      "git push",
      "npm publish",
      "database migrations",
      "env file changes"
    ]
  }
}

Sandboxing

# Execute agentes em ambientes isolados
docker run -v $(pwd):/workspace -it claude-sandbox

# Ou use worktrees do git para isolamento
git worktree add ../feature-branch feature-branch

Arquivos confidenciais

# .cursorignore / .claudeignore
.env
.env.*
secrets/
credentials/
*.pem
*.key

Revise todas as alterações

# Antes de aceitar as alterações do agente:
git diff --stat
git diff

# Use o staging interativo
git add -p

# Nunca faça merge automático sem revisão

8) Padrões de fluxo de trabalho que funcionam

Padrão 1: Explorar, planejar, executar

Sessão 1: "Como funciona o sistema de pagamentos?"
          → O agente explora, você aprende

Sessão 2: "O que seria necessário para adicionar o Stripe?"
          → O agente cria um plano

Sessão 3: "Implemente a integração com o Stripe"
          → O agente executa o plano

Padrão 2: Exploração em paralelo

# No Cursor com agentes em paralelo:

Agente 1: "Implemente cache com Redis"
Agente 2: "Implemente cache com Memcached"
Agente 3: "Implemente cache com LRU em memória"

→ Compare as implementações e escolha a melhor abordagem

Padrão 3: Migração incremental

Etapa 1: "Identifique todos os usos da API obsoleta"
Etapa 2: "Crie um adaptador para a nova API"
Etapa 3: "Migre o módulo A para usar o adaptador"
Etapa 4: "Migre o módulo B..."
...
Etapa N: "Remova o adaptador e use a nova API diretamente"

Padrão 4: Desenvolvimento de recursos começando pelos testes

1. "Escreva testes de aceitação para a edição do perfil de usuário"
2. "Escreva testes unitários para a validação do perfil"
3. "Implemente para fazer os testes passarem"
4. "Adicione testes de integração"
5. "Refatore para melhorar a clareza"

9) Quando usar cada ferramenta

10) Como medir a eficácia

Acompanhe estas métricas para avaliar as ferramentas agênticas:

const metrics = {
  // Produtividade
  suggestionsAccepted: 'porcentagem de sugestões que você manteve',
  timeToFeature: 'horas desde o início até o merge do PR',
  linesPerHour: 'velocidade de produção de código (use com cuidado)',
  
  // Qualidade
  bugsIntroduced: 'defeitos atribuídos a código gerado por IA',
  testCoverage: 'cobertura do código gerado por IA',
  reviewChanges: 'quanto você modifica as sugestões da IA',
  
  // Custo
  apiCosts: 'gasto mensal com ferramentas de IA',
  creditsUsed: 'créditos do Cursor consumidos',
  
  // Aprendizado
  newPatternsLearned: 'técnicas que você aprendeu com a IA',
  codebaseUnderstanding: 'quanto a IA ajudou você a aprender',
}

11) Armadilhas comuns

Confiar demais no agente

❌ Aceitar grandes alterações sem revisão
❌ Permitir que agentes executem comandos destrutivos
❌ Não entender o código antes de publicá-lo

✅ Revise cada alteração
✅ Entenda o que você publica
✅ Use agentes como colaboradores, não como substitutos

Poluição de contexto

❌ Prompts enormes com contexto irrelevante
❌ Não limpar o contexto entre tarefas não relacionadas
❌ Incluir arquivos gerados no contexto

✅ Mantenha os prompts focados
✅ Use referências específicas com @file
✅ Exclua artefatos de build

Ambiguidade no prompt

❌ "Melhore isso"
❌ "Corrija os problemas"
❌ "Adicione alguns testes"

✅ "Reduza a complexidade de tempo de O(n²) para O(n log n)"
✅ "Trate o caso null na linha 45 retornando antecipadamente"
✅ "Adicione testes para casos extremos: entrada vazia, tamanho máximo, unicode"

12) Checklist para começar

## Checklist de configuração

### Claude Code
- [ ] Instale a CLI: `npm install -g @anthropic/claude-code`
- [ ] Autentique-se: `claude login`
- [ ] Crie `.claude/config.json`
- [ ] Adicione `.claudeignore` para arquivos confidenciais

### Cursor
- [ ] Baixe em cursor.com
- [ ] Importe as configurações do VS Code
- [ ] Configure `.cursor/rules/`
- [ ] Aprenda a usar `Cmd+Shift+I` para o modo Agent

### GitHub Copilot
- [ ] Instale a extensão na sua IDE
- [ ] Ative o Copilot Chat
- [ ] Experimente o Copilot Workspace para issues
- [ ] Configure `.github/copilot-instructions.md`

### Todas as ferramentas
- [ ] Configure etapas de aprovação para operações destrutivas
- [ ] Crie arquivos de exclusão para segredos
- [ ] Estabeleça um fluxo de trabalho de revisão
- [ ] Acompanhe métricas desde o primeiro dia

Conteúdo relacionado

• Publique um jogo web que carregue rapidamente
• Web Workers para a lógica do jogo
• Game jams e hackathons — as ferramentas de IA para código estão mudando o que é possível fazer em uma jam de 48 horas
• Comparação entre engines de jogos web — escolha uma engine que combine bem com fluxos de trabalho assistidos por IA

As ferramentas de analytics ajudam você a entender o que os jogadores fazem, onde encontram dificuldades e o que mantém o interesse deles. Este tutorial mostra o que acompanhar e como fazer isso.

1) O que acompanhar

Métricas de engajamento:

• Inícios e duração das sessões
• Fases iniciadas e concluídas
• Recursos utilizados
• Retenção (visitas recorrentes)

Métricas de desempenho:

• Tempo de carregamento
• Taxa de quadros
• Uso de memória
• Erros e travamentos

Métricas de conversão:

• Conclusão do tutorial
• Primeira compra
• Compartilhamentos em redes sociais

2) Rastreamento simples de eventos

class Analytics {
  constructor(endpoint) {
    this.endpoint = endpoint
    this.sessionId = crypto.randomUUID()
    this.queue = []
    this.flushInterval = 30000 // 30 seconds
    
    setInterval(() => this.flush(), this.flushInterval)
    // Flush when the page is being hidden, not on beforeunload.
    // beforeunload/unload are unreliable (often don't fire on mobile,
    // and block the back/forward cache). visibilitychange + pagehide
    // are the recommended events for end-of-session sends.
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') this.flush()
    })
    window.addEventListener('pagehide', () => this.flush())
  }
  
  track(event, data = {}) {
    this.queue.push({
      event,
      data,
      sessionId: this.sessionId,
      timestamp: Date.now(),
      url: location.href,
    })
    
    // Flush immediately for important events
    if (event === 'error' || event === 'purchase') {
      this.flush()
    }
  }
  
  async flush() {
    if (this.queue.length === 0) return
    
    const events = [...this.queue]
    this.queue = []
    
    try {
      await fetch(this.endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ events }),
        keepalive: true, // Important for beforeunload
      })
    } catch {
      // Put events back in queue
      this.queue.unshift(...events)
    }
  }
}

const analytics = new Analytics('/api/analytics')

3) Rastreamento de sessões

// Track session start
analytics.track('session_start', {
  referrer: document.referrer,
  screen: `${screen.width}x${screen.height}`,
  devicePixelRatio: window.devicePixelRatio,
  userAgent: navigator.userAgent,
})

// Track session end
let sessionStart = Date.now()

// Send session_end when the page is hidden, not on beforeunload.
// beforeunload is unreliable on mobile and breaks the bfcache.
function recordSessionEnd() {
  analytics.track('session_end', {
    duration: Date.now() - sessionStart,
  })
}
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') recordSessionEnd()
})
window.addEventListener('pagehide', recordSessionEnd)

// Track visibility changes
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    analytics.track('tab_hidden')
  } else {
    analytics.track('tab_visible')
  }
})

4) Eventos específicos do jogo

// Level tracking
function onLevelStart(levelId) {
  analytics.track('level_start', { levelId })
}

function onLevelComplete(levelId, score, time) {
  analytics.track('level_complete', {
    levelId,
    score,
    timeSeconds: time,
  })
}

function onLevelFail(levelId, reason) {
  analytics.track('level_fail', {
    levelId,
    reason, // 'death', 'timeout', 'quit'
  })
}

// Achievement tracking
function onAchievementUnlocked(achievementId) {
  analytics.track('achievement', { achievementId })
}

// Tutorial tracking
function onTutorialStep(step, skipped = false) {
  analytics.track('tutorial', { step, skipped })
}

5) Monitoramento de desempenho

class PerformanceMonitor {
  constructor(analytics) {
    this.analytics = analytics
    this.frameTimes = []
    this.lastFrame = performance.now()
  }
  
  recordFrame() {
    const now = performance.now()
    this.frameTimes.push(now - this.lastFrame)
    this.lastFrame = now
    
    // Keep last 60 frames
    if (this.frameTimes.length > 60) {
      this.frameTimes.shift()
    }
  }
  
  getAverageFPS() {
    if (this.frameTimes.length === 0) return 0
    const avgFrameTime = this.frameTimes.reduce((a, b) => a + b) / this.frameTimes.length
    return 1000 / avgFrameTime
  }
  
  reportPerformance() {
    const fps = this.getAverageFPS()
    const memory = performance.memory?.usedJSHeapSize
    
    this.analytics.track('performance', {
      avgFPS: Math.round(fps),
      memoryMB: memory ? Math.round(memory / 1024 / 1024) : null,
    })
  }
}

// Report every minute
const perfMonitor = new PerformanceMonitor(analytics)
setInterval(() => perfMonitor.reportPerformance(), 60000)

Identifique a origem dos engasgos com Long Animation Frames

O contador de FPS acima informa quando há quedas de quadros, mas não por quê. A API Long Animation Frames (LoAF), lançada no Chrome e no Edge 123, preenche essa lacuna. Ela sinaliza qualquer quadro que leve mais de 50 ms e detalha quais scripts causaram o atraso, permitindo atribuir os engasgos a trechos específicos de código em vez de tentar adivinhar.

if (PerformanceObserver.supportedEntryTypes?.includes('long-animation-frame')) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      analytics.track('long_frame', {
        durationMs: Math.round(entry.duration),
        blockingMs: Math.round(entry.blockingDuration),
        // scripts[] names the source URLs that ate the frame
        scripts: entry.scripts?.map((s) => s.sourceURL),
      })
    }
  })
  observer.observe({ type: 'long-animation-frame', buffered: true })
}

Por enquanto, a LoAF está disponível apenas em navegadores baseados em Chromium (não no Firefox nem no Safari). Portanto, detecte a compatibilidade antes de usá-la e mantenha o contador de FPS como referência compatível com diferentes navegadores.

6) Rastreamento de erros

window.addEventListener('error', (event) => {
  analytics.track('error', {
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    stack: event.error?.stack,
  })
})

window.addEventListener('unhandledrejection', (event) => {
  analytics.track('error', {
    message: event.reason?.message || String(event.reason),
    type: 'unhandledrejection',
    stack: event.reason?.stack,
  })
})

// Custom error tracking
function trackGameError(context, error) {
  analytics.track('game_error', {
    context,
    message: error.message,
    stack: error.stack,
  })
}

7) Rastreamento do tempo de carregamento

// Track initial load
window.addEventListener('load', () => {
  const timing = performance.timing
  const loadTime = timing.loadEventEnd - timing.navigationStart
  const domReady = timing.domContentLoadedEventEnd - timing.navigationStart
  
  analytics.track('page_load', {
    totalMs: loadTime,
    domReadyMs: domReady,
  })
})

// Track game-specific load phases
async function loadGame() {
  const start = performance.now()
  
  await loadCriticalAssets()
  const criticalTime = performance.now() - start
  
  analytics.track('load_critical', { ms: Math.round(criticalTime) })
  
  await loadGameAssets()
  const totalTime = performance.now() - start
  
  analytics.track('load_complete', { ms: Math.round(totalTime) })
}

8) Rastreamento de funil

Acompanhe o progresso dos jogadores pelos fluxos principais:

class FunnelTracker {
  constructor(analytics, funnelName) {
    this.analytics = analytics
    this.funnelName = funnelName
    this.startTime = Date.now()
  }
  
  step(stepName) {
    this.analytics.track('funnel_step', {
      funnel: this.funnelName,
      step: stepName,
      elapsedMs: Date.now() - this.startTime,
    })
  }
  
  complete() {
    this.analytics.track('funnel_complete', {
      funnel: this.funnelName,
      totalMs: Date.now() - this.startTime,
    })
  }
  
  abandon(reason) {
    this.analytics.track('funnel_abandon', {
      funnel: this.funnelName,
      reason,
      elapsedMs: Date.now() - this.startTime,
    })
  }
}

// Usage
const onboarding = new FunnelTracker(analytics, 'onboarding')
onboarding.step('welcome_shown')
// ... player clicks continue
onboarding.step('name_entered')
// ... player completes tutorial
onboarding.complete()

9) Suporte a testes A/B

class ABTest {
  constructor(testName, variants) {
    this.testName = testName
    this.variants = variants
    
    // Get or assign variant
    const stored = localStorage.getItem(`ab_${testName}`)
    if (stored && variants.includes(stored)) {
      this.variant = stored
    } else {
      this.variant = variants[Math.floor(Math.random() * variants.length)]
      localStorage.setItem(`ab_${testName}`, this.variant)
    }
    
    // Track assignment
    analytics.track('ab_assignment', {
      test: testName,
      variant: this.variant,
    })
  }
  
  getVariant() {
    return this.variant
  }
  
  trackConversion(metric) {
    analytics.track('ab_conversion', {
      test: this.testName,
      variant: this.variant,
      metric,
    })
  }
}

// Usage
const difficultyTest = new ABTest('difficulty', ['easy', 'normal', 'hard'])
game.difficulty = difficultyTest.getVariant()

// When player completes level
difficultyTest.trackConversion('level_complete')

10) Considerações sobre privacidade

class PrivacyAwareAnalytics extends Analytics {
  constructor(endpoint) {
    super(endpoint)
    this.enabled = this.checkConsent()
  }
  
  checkConsent() {
    return localStorage.getItem('analytics_consent') === 'true'
  }
  
  setConsent(enabled) {
    localStorage.setItem('analytics_consent', enabled ? 'true' : 'false')
    this.enabled = enabled
    
    if (enabled) {
      this.track('consent_granted')
    }
  }
  
  track(event, data = {}) {
    if (!this.enabled) return
    
    // Strip PII
    const sanitized = { ...data }
    delete sanitized.email
    delete sanitized.name
    delete sanitized.ip
    
    super.track(event, sanitized)
  }
}

// Show consent dialog
function showConsentDialog() {
  const dialog = document.createElement('div')
  dialog.innerHTML = `
    <p>Usamos dados de analytics para melhorar o jogo. Tudo bem para você?</p>
    <button id="accept">Aceitar</button>
    <button id="decline">Recusar</button>
  `
  document.body.appendChild(dialog)
  
  dialog.querySelector('#accept').onclick = () => {
    analytics.setConsent(true)
    dialog.remove()
  }
  
  dialog.querySelector('#decline').onclick = () => {
    analytics.setConsent(false)
    dialog.remove()
  }
}

Alternativas de terceiros

Se você não quiser criar sua própria solução:

• Plausible — Simples e focado em privacidade
• Amplitude — Analytics de produto e funis
• Mixpanel — Rastreamento de eventos e jornadas dos usuários
• Sentry — Específico para rastreamento de erros

// Example: Plausible
const script = document.createElement('script')
script.defer = true
script.dataset.domain = 'yourgame.com'
script.src = 'https://plausible.io/js/plausible.js'
document.head.appendChild(script)

// Track custom events
window.plausible('level_complete', { props: { level: '1' } })

Conteúdo relacionado

• Publique um jogo web que carrega rápido
• Salvamentos de jogos com IndexedDB
• Para criadores
• Como lançar seu jogo no itch.io — analytics do itch.io e rastreamento de downloads
• Estratégia para o Steam Next Fest — medição de listas de desejos e taxas de conversão da demo

Recursos externos

• Plausible Analytics — analytics leve e focado em privacidade
• PostHog — analytics de produto de código aberto com rastreamento de eventos
• Sentry — monitoramento de erros e relatórios de travamentos para aplicativos web

O loop de jogo é o coração do seu jogo. Ele é executado continuamente, atualizando o estado do jogo e desenhando quadros tão rápido quanto o navegador permite. Faça isso direito e todo o resto ficará mais fácil. Faça errado e você ficará procurando bugs que só aparecem em determinadas máquinas.

Experimente (use as setas ou WASD):

const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

function gameLoop() {
  update()
  render()
  requestAnimationFrame(gameLoop)
}

function update() {
  // Game logic here
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // Drawing here
}

gameLoop()

let lastTime = 0

function gameLoop(currentTime) {
  const dt = (currentTime - lastTime) / 1000 // convert to seconds
  lastTime = currentTime
  
  update(dt)
  render()
  
  requestAnimationFrame(gameLoop)
}

function update(dt) {
  player.x += player.speed * dt // now works at any frame rate
}

requestAnimationFrame(gameLoop)

const FIXED_DT = 1 / 60 // 60 physics updates per second
let accumulator = 0
let lastTime = 0

function gameLoop(currentTime) {
  const frameTime = Math.min((currentTime - lastTime) / 1000, 0.25)
  lastTime = currentTime
  
  accumulator += frameTime
  
  while (accumulator >= FIXED_DT) {
    update(FIXED_DT)
    accumulator -= FIXED_DT
  }
  
  render()
  requestAnimationFrame(gameLoop)
}

const game = {
  state: 'playing', // 'menu', 'playing', 'paused', 'gameover'
  score: 0,
  player: {
    x: 100,
    y: 100,
    vx: 0,
    vy: 0,
    speed: 200,
    width: 32,
    height: 32,
  },
  entities: [],
}

const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

const FIXED_DT = 1 / 60
let accumulator = 0
let lastTime = 0

const input = { left: false, right: false, up: false, down: false }

const game = {
  player: { x: 100, y: 100, speed: 200 },
}

function update(dt) {
  const p = game.player
  
  if (input.left) p.x -= p.speed * dt
  if (input.right) p.x += p.speed * dt
  if (input.up) p.y -= p.speed * dt
  if (input.down) p.y += p.speed * dt
  
  // Keep in bounds
  p.x = Math.max(0, Math.min(canvas.width - 32, p.x))
  p.y = Math.max(0, Math.min(canvas.height - 32, p.y))
}

function render() {
  ctx.fillStyle = '#1a1a2e'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  
  ctx.fillStyle = '#4ade80'
  ctx.fillRect(game.player.x, game.player.y, 32, 32)
}

function gameLoop(currentTime) {
  const frameTime = Math.min((currentTime - lastTime) / 1000, 0.25)
  lastTime = currentTime
  
  accumulator += frameTime
  
  while (accumulator >= FIXED_DT) {
    update(FIXED_DT)
    accumulator -= FIXED_DT
  }
  
  render()
  requestAnimationFrame(gameLoop)
}

// Input handling
window.addEventListener('keydown', (e) => {
  if (e.code === 'ArrowLeft' || e.code === 'KeyA') input.left = true
  if (e.code === 'ArrowRight' || e.code === 'KeyD') input.right = true
  if (e.code === 'ArrowUp' || e.code === 'KeyW') input.up = true
  if (e.code === 'ArrowDown' || e.code === 'KeyS') input.down = true
})

window.addEventListener('keyup', (e) => {
  if (e.code === 'ArrowLeft' || e.code === 'KeyA') input.left = false
  if (e.code === 'ArrowRight' || e.code === 'KeyD') input.right = false
  if (e.code === 'ArrowUp' || e.code === 'KeyW') input.up = false
  if (e.code === 'ArrowDown' || e.code === 'KeyS') input.down = false
})

requestAnimationFrame(gameLoop)

const sprites = {}

async function loadSprite(name, url) {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => {
      sprites[name] = img
      resolve(img)
    }
    img.src = url
  })
}

function drawSprite(name, x, y, width, height) {
  const sprite = sprites[name]
  if (sprite) {
    ctx.drawImage(sprite, x, y, width || sprite.width, height || sprite.height)
  }
}

class AnimatedSprite {
  constructor(image, frameWidth, frameHeight, frameCount, fps = 10) {
    this.image = image
    this.frameWidth = frameWidth
    this.frameHeight = frameHeight
    this.frameCount = frameCount
    this.frameDuration = 1 / fps
    this.currentFrame = 0
    this.elapsed = 0
  }
  
  update(dt) {
    this.elapsed += dt
    if (this.elapsed >= this.frameDuration) {
      this.currentFrame = (this.currentFrame + 1) % this.frameCount
      this.elapsed = 0
    }
  }
  
  draw(ctx, x, y) {
    ctx.drawImage(
      this.image,
      this.currentFrame * this.frameWidth, 0,
      this.frameWidth, this.frameHeight,
      x, y,
      this.frameWidth, this.frameHeight
    )
  }
}

const playerWalk = new AnimatedSprite(walkImage, 32, 32, 4, 12)

// In update:
playerWalk.update(dt)

// In render:
playerWalk.draw(ctx, player.x, player.y)

function rectCollision(a, b) {
  return (
    a.x < b.x + b.width &&
    a.x + a.width > b.x &&
    a.y < b.y + b.height &&
    a.y + a.height > b.y
  )
}

function circleCollision(a, b) {
  const dx = a.x - b.x
  const dy = a.y - b.y
  const distance = Math.sqrt(dx * dx + dy * dy)
  return distance < a.radius + b.radius
}

// In update:
for (const enemy of game.enemies) {
  if (rectCollision(game.player, enemy)) {
    handleCollision(game.player, enemy)
  }
}

const camera = {
  x: 0,
  y: 0,
  
  follow(target) {
    this.x = target.x - canvas.width / 2
    this.y = target.y - canvas.height / 2
  }
}

function render() {
  ctx.save()
  ctx.translate(-camera.x, -camera.y)
  
  // Draw world
  drawWorld()
  drawEntities()
  
  ctx.restore()
  
  // Draw UI (not affected by camera)
  drawUI()
}

let paused = false

window.addEventListener('keydown', (e) => {
  if (e.code === 'Escape') {
    paused = !paused
  }
})

function gameLoop(currentTime) {
  const frameTime = Math.min((currentTime - lastTime) / 1000, 0.25)
  lastTime = currentTime
  
  if (!paused) {
    accumulator += frameTime
    while (accumulator >= FIXED_DT) {
      update(FIXED_DT)
      accumulator -= FIXED_DT
    }
  }
  
  render()
  
  if (paused) {
    renderPauseOverlay()
  }
  
  requestAnimationFrame(gameLoop)
}

function renderPauseOverlay() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  
  ctx.fillStyle = '#fff'
  ctx.font = '32px sans-serif'
  ctx.textAlign = 'center'
  ctx.fillText('PAUSADO', canvas.width / 2, canvas.height / 2)
}

Se o seu jogo para web (ou a exportação da sua engine) usa threads do WebAssembly, ele geralmente depende de SharedArrayBuffer. Os navegadores modernos exigem isolamento entre origens para isso.

1) Verificação rápida: sua página está isolada?

Abra o DevTools e execute:

self.crossOriginIsolated

Se o resultado for true, você está no estado de segurança correto para usar SharedArrayBuffer.

Referência oficial:

• https://developer.mozilla.org/docs/Web/API/Window/crossOriginIsolated

2) Os dois cabeçalhos necessários

Envie estes cabeçalhos de resposta no seu HTML (e, normalmente, em todo o seu aplicativo):

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Referências oficiais:

• https://web.dev/articles/why-coop-coep
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
• https://developer.chrome.com/blog/enabling-shared-array-buffer/

3) O principal motivo para “ainda não funcionar”: sub-recursos

Com COEP: require-corp, sua página não pode mais incorporar livremente recursos de outras origens.

Se você carregar um script, imagem, worker, vídeo ou outro recurso de uma origem diferente, esse recurso precisará autorizar o uso por meio de:

• CORS (Access-Control-Allow-Origin) ou
• CORP (Cross-Origin-Resource-Policy)

Referência oficial:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cross-Origin_Resource_Policy

4) Configurações para copiar e colar

Nginx

add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;

Node / Express

app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  next()
})

Cloudflare Pages (_headers)

/*
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

5) Checklist de depuração

• Confirme se os cabeçalhos estão presentes na resposta do documento no painel Network.
• Verifique self.crossOriginIsolated.
• Procure solicitações bloqueadas (uma mensagem comum do DevTools inclui “blocked … by COEP”).
• Remova ou hospede por conta própria scripts de terceiros que não sejam compatíveis com CORS/CORP.

Conteúdo relacionado

• Publique um jogo para web que carregue rapidamente
• Stack tecnológica para jogos web em 2026
• Web Workers para a lógica do jogo — uso de Workers que se beneficiam do SharedArrayBuffer
• Noções básicas de jogos multijogador com WebSocket — jogos multijogador que precisam de isolamento entre origens
• Incorporação de jogos com iframe — como os cabeçalhos COOP/COEP afetam incorporações com iframe

Recursos externos

• MDN: Cross-Origin-Opener-Policy — referência do cabeçalho COOP
• MDN: Cross-Origin-Embedder-Policy — referência do cabeçalho COEP
• web.dev: Como isolar seu site entre origens — guia prático de implantação

Uma boa manipulação de entrada pode determinar o sucesso ou o fracasso de um jogo. Controles com atraso, entradas não detectadas ou mapeamentos de botões confusos frustram os jogadores antes mesmo que eles vejam o conteúdo do seu jogo. Este tutorial mostra como lidar com teclado, mouse, toque e controle de forma unificada.

Experimente primeiro:

const input = {
  left: false,
  right: false,
  up: false,
  down: false,
  action: false,
  pointer: { x: 0, y: 0, down: false },
}

const keyMap = {
  ArrowLeft: 'left',
  ArrowRight: 'right',
  ArrowUp: 'up',
  ArrowDown: 'down',
  KeyA: 'left',
  KeyD: 'right',
  KeyW: 'up',
  KeyS: 'down',
  Space: 'action',
}

window.addEventListener('keydown', (e) => {
  const action = keyMap[e.code]
  if (action) {
    input[action] = true
    e.preventDefault()
  }
})

window.addEventListener('keyup', (e) => {
  const action = keyMap[e.code]
  if (action) input[action] = false
})

const canvas = document.getElementById('game')

canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect()
  input.pointer.x = e.clientX - rect.left
  input.pointer.y = e.clientY - rect.top
})

canvas.addEventListener('mousedown', () => {
  input.pointer.down = true
  input.action = true
})

canvas.addEventListener('mouseup', () => {
  input.pointer.down = false
  input.action = false
})

canvas.addEventListener('touchstart', (e) => {
  e.preventDefault()
  const touch = e.touches[0]
  const rect = canvas.getBoundingClientRect()
  input.pointer.x = touch.clientX - rect.left
  input.pointer.y = touch.clientY - rect.top
  input.pointer.down = true
  input.action = true
}, { passive: false })

canvas.addEventListener('touchmove', (e) => {
  e.preventDefault()
  const touch = e.touches[0]
  const rect = canvas.getBoundingClientRect()
  input.pointer.x = touch.clientX - rect.left
  input.pointer.y = touch.clientY - rect.top
}, { passive: false })

canvas.addEventListener('touchend', () => {
  input.pointer.down = false
  input.action = false
})

function createVirtualDpad(container) {
  const dpad = document.createElement('div')
  dpad.className = 'virtual-dpad'
  dpad.innerHTML = `
    <button data-dir="up">↑</button>
    <button data-dir="left">←</button>
    <button data-dir="right">→</button>
    <button data-dir="down">↓</button>
  `
  
  dpad.querySelectorAll('button').forEach(btn => {
    const dir = btn.dataset.dir
    btn.addEventListener('touchstart', (e) => {
      e.preventDefault()
      input[dir] = true
    })
    btn.addEventListener('touchend', () => input[dir] = false)
  })
  
  container.appendChild(dpad)
}

function pollGamepads() {
  const gamepads = navigator.getGamepads()
  const gp = gamepads[0]
  
  if (gp) {
    // Direcional ou analógico esquerdo
    input.left = gp.buttons[14]?.pressed || gp.axes[0] < -0.5
    input.right = gp.buttons[15]?.pressed || gp.axes[0] > 0.5
    input.up = gp.buttons[12]?.pressed || gp.axes[1] < -0.5
    input.down = gp.buttons[13]?.pressed || gp.axes[1] > 0.5
    
    // Botão A (mapeamento padrão)
    input.action = gp.buttons[0]?.pressed
  }
}

window.addEventListener('gamepadconnected', (e) => {
  console.log('Controle conectado:', e.gamepad.id)
})

window.addEventListener('gamepaddisconnected', (e) => {
  console.log('Controle desconectado:', e.gamepad.id)
})

function update(dt) {
  pollGamepads()
  
  if (input.left) player.x -= player.speed * dt
  if (input.right) player.x += player.speed * dt
  if (input.up) player.y -= player.speed * dt
  if (input.down) player.y += player.speed * dt
  
  if (input.action && player.canShoot) {
    player.shoot()
  }
}

const inputPrev = { ...input }

function wasJustPressed(action) {
  return input[action] && !inputPrev[action]
}

function endFrame() {
  Object.assign(inputPrev, input)
}

window.addEventListener('blur', () => {
  input.left = input.right = input.up = input.down = input.action = false
})

A simulação de física dá vida aos jogos — objetos caindo, bolas quicando, ragdolls, veículos e ambientes destrutíveis. Este guia aborda as principais bibliotecas de física disponíveis para jogos web, com exemplos reais de código e uma avaliação sincera dos prós e contras.

Visão geral

Legenda:

• CCD = detecção contínua de colisão (impede que objetos rápidos atravessem paredes)
• ⚠️ Determinismo = possível com um passo de tempo fixo, mas não é garantido entre plataformas

Recomendações rápidas

Comparação detalhada

Mecanismos de física 3D

Mecanismos de física 2D

Mecanismos de física 3D

Rapier — A escolha moderna

Rapier é um mecanismo de física em Rust com bindings para JavaScript/WASM. É a opção de maior desempenho para jogos web em 2025–2026, com melhorias de velocidade de 2 a 5 vezes em relação à sua versão de 2024.

Instalação:

npm install @dimforge/rapier3d
# Or with SIMD (faster, requires modern browsers):
npm install @dimforge/rapier3d-simd

Configuração básica:

import RAPIER from '@dimforge/rapier3d'

// Initialize (async required for WASM)
await RAPIER.init()

// Create world with gravity
const gravity = { x: 0, y: -9.81, z: 0 }
const world = new RAPIER.World(gravity)

// Create ground (static body)
const groundDesc = RAPIER.RigidBodyDesc.fixed()
const groundBody = world.createRigidBody(groundDesc)
const groundCollider = RAPIER.ColliderDesc.cuboid(50, 0.1, 50)
world.createCollider(groundCollider, groundBody)

// Create falling box (dynamic body)
const boxDesc = RAPIER.RigidBodyDesc.dynamic()
  .setTranslation(0, 10, 0)
const boxBody = world.createRigidBody(boxDesc)
const boxCollider = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5)
  .setDensity(1.0)
  .setRestitution(0.5)
world.createCollider(boxCollider, boxBody)

Integração com o loop do jogo:

const FIXED_TIMESTEP = 1 / 60

function physicsStep() {
  world.step()
}

function gameLoop() {
  physicsStep()
  
  // Sync render objects with physics
  const position = boxBody.translation()
  const rotation = boxBody.rotation()
  
  // Update your Three.js/Babylon mesh
  mesh.position.set(position.x, position.y, position.z)
  mesh.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w)
  
  requestAnimationFrame(gameLoop)
}

Detecção de colisões:

// Event-based collision detection
world.contactPairsWith(boxCollider, (otherCollider) => {
  console.log('Box is touching:', otherCollider)
})

// Ray casting
const ray = new RAPIER.Ray({ x: 0, y: 10, z: 0 }, { x: 0, y: -1, z: 0 })
const hit = world.castRay(ray, 100, true)
if (hit) {
  const hitPoint = ray.pointAt(hit.timeOfImpact)
  console.log('Hit at:', hitPoint)
}

Juntas:

// Create a hinge joint (door)
const jointData = RAPIER.JointData.revolute(
  { x: 0, y: 0, z: 0 },  // Anchor on body1
  { x: -1, y: 0, z: 0 }, // Anchor on body2
  { x: 0, y: 1, z: 0 }   // Rotation axis
)
world.createImpulseJoint(jointData, body1, body2, true)

Controlador de veículo:

// Create chassis rigid body
const chassisDesc = RAPIER.RigidBodyDesc.dynamic()
  .setTranslation(0, 2, 0)
const chassis = world.createRigidBody(chassisDesc)
const chassisCollider = RAPIER.ColliderDesc.cuboid(1, 0.5, 2)
  .setDensity(100)
world.createCollider(chassisCollider, chassis)

// Create vehicle controller
const vehicle = world.createVehicleController(chassis)

// Add wheels (front-left, front-right, rear-left, rear-right)
const suspensionRestLength = 0.3
const wheelRadius = 0.4

// Front wheels (steering)
vehicle.addWheel(
  { x: -0.8, y: 0, z: 1.2 },   // Connection point
  { x: 0, y: -1, z: 0 },       // Suspension direction
  { x: -1, y: 0, z: 0 },       // Axle direction
  suspensionRestLength,
  wheelRadius
)
vehicle.addWheel(
  { x: 0.8, y: 0, z: 1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)

// Rear wheels (drive)
vehicle.addWheel(
  { x: -0.8, y: 0, z: -1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)
vehicle.addWheel(
  { x: 0.8, y: 0, z: -1.2 },
  { x: 0, y: -1, z: 0 },
  { x: -1, y: 0, z: 0 },
  suspensionRestLength,
  wheelRadius
)

// Configure suspension for all wheels
for (let i = 0; i < 4; i++) {
  vehicle.setWheelSuspensionStiffness(i, 30)
  vehicle.setWheelSuspensionCompression(i, 4.4)
  vehicle.setWheelSuspensionRelaxation(i, 2.3)
  vehicle.setWheelMaxSuspensionTravel(i, 0.5)
  vehicle.setWheelFrictionSlip(i, 2)
}

// In game loop
function updateVehicle(steering, engineForce, brakeForce) {
  // Steering (front wheels only)
  vehicle.setWheelSteering(0, steering)
  vehicle.setWheelSteering(1, steering)
  
  // Engine (rear wheels)
  vehicle.setWheelEngineForce(2, engineForce)
  vehicle.setWheelEngineForce(3, engineForce)
  
  // Brakes (all wheels)
  for (let i = 0; i < 4; i++) {
    vehicle.setWheelBrake(i, brakeForce)
  }
  
  // Update vehicle physics
  vehicle.updateVehicle(world.timestep)
}

Prós:

• Melhor desempenho (WASM + SIMD)
• Excelente precisão na detecção de colisões
• Determinismo multiplataforma (mesmas entradas = mesmas saídas)
• Desenvolvimento ativo e API moderna
• Detecção contínua de colisão (sem atravessamento)
• Controladores de personagem e de veículo integrados

Contras:

• Bundle maior (~1,4 MB)
• Requer inicialização assíncrona
• API mais complexa do que as alternativas em JavaScript puro
• A depuração de WASM pode ser complicada

Cannon-es — Simples e eficaz

Cannon-es é o fork mantido do Cannon.js. Escrito em JavaScript puro, é fácil de entender e excelente para aprendizado e protótipos.

Instalação:

npm install cannon-es

Configuração básica:

import * as CANNON from 'cannon-es'

// Create world
const world = new CANNON.World({
  gravity: new CANNON.Vec3(0, -9.81, 0)
})

// Ground
const groundBody = new CANNON.Body({
  type: CANNON.Body.STATIC,
  shape: new CANNON.Plane()
})
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0)
world.addBody(groundBody)

// Falling sphere
const sphereBody = new CANNON.Body({
  mass: 1,
  shape: new CANNON.Sphere(0.5),
  position: new CANNON.Vec3(0, 10, 0)
})
sphereBody.linearDamping = 0.1
world.addBody(sphereBody)

Loop do jogo:

const TIMESTEP = 1 / 60

function animate() {
  world.step(TIMESTEP)
  
  // Sync with Three.js
  mesh.position.copy(sphereBody.position)
  mesh.quaternion.copy(sphereBody.quaternion)
  
  requestAnimationFrame(animate)
}

Eventos de colisão:

sphereBody.addEventListener('collide', (event) => {
  const contact = event.contact
  const impactVelocity = contact.getImpactVelocityAlongNormal()
  
  if (Math.abs(impactVelocity) > 5) {
    console.log('Hard impact!')
  }
})

Restrições:

// Distance constraint (rope-like)
const constraint = new CANNON.DistanceConstraint(
  bodyA, bodyB, 
  2 // distance
)
world.addConstraint(constraint)

// Hinge constraint
const hinge = new CANNON.HingeConstraint(bodyA, bodyB, {
  pivotA: new CANNON.Vec3(1, 0, 0),
  axisA: new CANNON.Vec3(0, 1, 0),
  pivotB: new CANNON.Vec3(-1, 0, 0),
  axisB: new CANNON.Vec3(0, 1, 0)
})
world.addConstraint(hinge)

Prós:

• JavaScript puro, sem a complexidade do WASM
• Bundle pequeno (~150 KB)
• Fácil de aprender e depurar
• Funciona em qualquer lugar
• Excelente integração com Three.js
• Boa documentação

Contras:

• Mais lento do que as alternativas em WASM
• Tem dificuldades com muitos corpos (>100)
• Suporte limitado a malhas trianguladas
• Sem CCD integrado (objetos podem atravessar superfícies)
• Desenvolvimento menos ativo

Ammo.js — Todo o poder do Bullet Physics

Ammo.js é o mecanismo Bullet Physics compilado para WebAssembly. Oferece o conjunto máximo de recursos, incluindo corpos deformáveis, veículos e restrições avançadas.

Instalação:

npm install ammo.js
# Or use from CDN

Configuração básica:

import Ammo from 'ammo.js'

let physicsWorld

async function initPhysics() {
  await Ammo()
  
  const collisionConfig = new Ammo.btDefaultCollisionConfiguration()
  const dispatcher = new Ammo.btCollisionDispatcher(collisionConfig)
  const broadphase = new Ammo.btDbvtBroadphase()
  const solver = new Ammo.btSequentialImpulseConstraintSolver()
  
  physicsWorld = new Ammo.btDiscreteDynamicsWorld(
    dispatcher, broadphase, solver, collisionConfig
  )
  physicsWorld.setGravity(new Ammo.btVector3(0, -9.81, 0))
}

function createBox(mass, width, height, depth, x, y, z) {
  const transform = new Ammo.btTransform()
  transform.setIdentity()
  transform.setOrigin(new Ammo.btVector3(x, y, z))
  
  const motionState = new Ammo.btDefaultMotionState(transform)
  const shape = new Ammo.btBoxShape(
    new Ammo.btVector3(width / 2, height / 2, depth / 2)
  )
  
  const localInertia = new Ammo.btVector3(0, 0, 0)
  if (mass > 0) {
    shape.calculateLocalInertia(mass, localInertia)
  }
  
  const rbInfo = new Ammo.btRigidBodyConstructionInfo(
    mass, motionState, shape, localInertia
  )
  const body = new Ammo.btRigidBody(rbInfo)
  
  physicsWorld.addRigidBody(body)
  return body
}

Corpos deformáveis (tecido):

function createCloth(width, height, segments) {
  const softBodyHelpers = new Ammo.btSoftBodyHelpers()
  
  const corner00 = new Ammo.btVector3(-width/2, height, 0)
  const corner10 = new Ammo.btVector3(width/2, height, 0)
  const corner01 = new Ammo.btVector3(-width/2, 0, 0)
  const corner11 = new Ammo.btVector3(width/2, 0, 0)
  
  const softBody = softBodyHelpers.CreatePatch(
    physicsWorld.getWorldInfo(),
    corner00, corner10, corner01, corner11,
    segments, segments,
    0, true
  )
  
  const sbConfig = softBody.get_m_cfg()
  sbConfig.set_viterations(10)
  sbConfig.set_piterations(10)
  
  softBody.setTotalMass(0.9, false)
  Ammo.castObject(softBody, Ammo.btCollisionObject)
    .getCollisionShape().setMargin(0.05)
  
  physicsWorld.addSoftBody(softBody, 1, -1)
  return softBody
}

Física de veículos:

function createVehicle(chassisBody) {
  const tuning = new Ammo.btVehicleTuning()
  const rayCaster = new Ammo.btDefaultVehicleRaycaster(physicsWorld)
  const vehicle = new Ammo.btRaycastVehicle(tuning, chassisBody, rayCaster)
  
  vehicle.setCoordinateSystem(0, 1, 2)
  physicsWorld.addAction(vehicle)
  
  // Add wheels
  const wheelRadius = 0.4
  const wheelWidth = 0.3
  const suspensionRestLength = 0.3
  
  const wheelDirectionCS = new Ammo.btVector3(0, -1, 0)
  const wheelAxleCS = new Ammo.btVector3(-1, 0, 0)
  
  function addWheel(isFront, pos) {
    const wheelInfo = vehicle.addWheel(
      pos, wheelDirectionCS, wheelAxleCS,
      suspensionRestLength, wheelRadius, tuning, isFront
    )
    wheelInfo.set_m_suspensionStiffness(20)
    wheelInfo.set_m_wheelsDampingRelaxation(2.3)
    wheelInfo.set_m_wheelsDampingCompression(4.4)
    wheelInfo.set_m_frictionSlip(1000)
    wheelInfo.set_m_rollInfluence(0.1)
  }
  
  addWheel(true, new Ammo.btVector3(1, 0, 1.5))   // Front left
  addWheel(true, new Ammo.btVector3(-1, 0, 1.5))  // Front right
  addWheel(false, new Ammo.btVector3(1, 0, -1.5)) // Rear left
  addWheel(false, new Ammo.btVector3(-1, 0, -1.5))// Rear right
  
  return vehicle
}

Prós:

• Conjunto de recursos mais completo
• Corpos deformáveis, tecidos e cordas
• Física avançada de veículos
• Amplamente testado em produção (usado em muitos jogos AAA)
• Altamente configurável Contras:
• API complexa e verbosa
• Tamanho de bundle grande
• Exige gerenciamento de memória (destruir objetos)
• Curva de aprendizado acentuada
• Documentação dispersa
• Não é determinístico entre plataformas (apenas no mesmo dispositivo e com configuração cuidadosa)

Jolt — física 3D moderna de nível AAA

O Jolt Physics é o motor por trás de jogos como Horizon Forbidden West, e o JoltPhysics.js o leva ao navegador como um port para WASM. Ele é um excelente meio-termo entre Rapier e Ammo.js: oferece mais recursos que o Rapier (corpos macios, tecidos e um controlador de veículos com rodas), além da manutenção ativa que falta ao Ammo.js. O pacote npm é jolt-physics, e há integrações prontas para React Three Fiber (@react-three/jolt) e Babylon.js.

npm install jolt-physics

Assim como o Rapier, ele usa WASM com inicialização assíncrona e tem uma API verbosa, porém completa, que espelha a interface em C++. Escolha o Jolt quando quiser recursos do nível do Bullet (corpos macios e veículos), mas preferir uma base de código moderna e mantida em vez do Ammo.js.

Oimo.js — leve e rápido

O Oimo.js é um motor de física 3D leve. É excelente para jogos simples que não precisam de recursos avançados.

Instalação:

npm install oimo

Configuração básica:

import * as OIMO from 'oimo'

const world = new OIMO.World({
  timestep: 1/60,
  iterations: 8,
  broadphase: 2, // 1: força bruta, 2: varredura e poda, 3: árvore de volumes
  worldscale: 1,
  random: true,
  gravity: [0, -9.8, 0]
})

// Criar o chão
world.add({
  type: 'box',
  size: [100, 1, 100],
  pos: [0, -0.5, 0],
  move: false
})

// Criar uma esfera em queda
const sphere = world.add({
  type: 'sphere',
  size: [1],
  pos: [0, 10, 0],
  move: true,
  density: 1,
  friction: 0.4,
  restitution: 0.2
})

Loop do jogo:

function animate() {
  world.step()
  
  // Obter posição/rotação
  const pos = sphere.getPosition()
  const rot = sphere.getQuaternion()
  
  mesh.position.set(pos.x, pos.y, pos.z)
  mesh.quaternion.set(rot.x, rot.y, rot.z, rot.w)
  
  requestAnimationFrame(animate)
}

Prós:

• Muito pequeno (~100 KB)
• API simples
• Bom desempenho em cenas básicas
• Suporte integrado ao Babylon.js

Contras:

• Formas limitadas (apenas primitivas)
• Sem corpos macios
• Documentação escassa
• Desenvolvimento menos ativo
• Opções limitadas de juntas

Motores de física 2D

Matter.js — bonito e intuitivo

O Matter.js é um motor de física 2D repleto de recursos, com excelentes ferramentas de renderização e depuração.

Instalação:

npm install matter-js

Configuração básica:

import Matter from 'matter-js'

const { Engine, Render, World, Bodies, Runner } = Matter

// Criar o motor
const engine = Engine.create()

// Criar o renderizador (opcional, ótimo para depuração)
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false
  }
})

// Criar corpos
const ground = Bodies.rectangle(400, 580, 810, 60, { 
  isStatic: true 
})

const box = Bodies.rectangle(400, 200, 80, 80, {
  restitution: 0.8,
  friction: 0.5
})

const circle = Bodies.circle(300, 100, 40, {
  restitution: 0.9
})

// Adicionar ao mundo
World.add(engine.world, [ground, box, circle])

// Executar
Render.run(render)
Runner.run(Runner.create(), engine)

Eventos de colisão:

Matter.Events.on(engine, 'collisionStart', (event) => {
  event.pairs.forEach(pair => {
    console.log('Colisão entre:', pair.bodyA.label, pair.bodyB.label)
  })
})

Restrições:

// Restrição de pino
const pin = Matter.Constraint.create({
  pointA: { x: 400, y: 100 },
  bodyB: box,
  stiffness: 0.9
})

// Mola entre corpos
const spring = Matter.Constraint.create({
  bodyA: box,
  bodyB: circle,
  stiffness: 0.01,
  length: 100
})

World.add(engine.world, [pin, spring])

Interação com o mouse:

const mouse = Matter.Mouse.create(render.canvas)
const mouseConstraint = Matter.MouseConstraint.create(engine, {
  mouse: mouse,
  constraint: {
    stiffness: 0.2,
    render: { visible: false }
  }
})
World.add(engine.world, mouseConstraint)

Prós:

• Bela renderização padrão
• Ótimo para aprender e criar protótipos
• API intuitiva
• Boa documentação
• Comunidade ativa
• Determinístico por padrão — o Matter.Runner agora usa um passo de tempo fixo e determinístico (o passo de tempo não fixo foi removido na v0.20.0)

Contras:

• Sem CCD (objetos rápidos podem atravessar outros — use subpassos para atenuar o problema)
• Problemas de desempenho com muitos corpos
• Sem opção em WASM
• Precisão limitada em simulações complexas

Planck.js — Box2D para JavaScript

O Planck.js é uma reescrita completa do Box2D em JavaScript. Oferece física testada em produção e é determinístico ao usar um passo de tempo fixo.

Instalação:

npm install planck

Configuração básica:

import { World, Vec2, Box, Circle, Edge } from 'planck'

// Criar o mundo
const world = new World({
  gravity: Vec2(0, -10)
})

// Criar o chão
const ground = world.createBody()
ground.createFixture({
  shape: Edge(Vec2(-40, 0), Vec2(40, 0))
})

// Criar uma caixa dinâmica
const box = world.createBody({
  type: 'dynamic',
  position: Vec2(0, 10)
})
box.createFixture({
  shape: Box(1, 1),
  density: 1,
  friction: 0.3,
  restitution: 0.5
})

Loop do jogo com passo de tempo fixo:

const TIMESTEP = 1 / 60
const VELOCITY_ITERATIONS = 8
const POSITION_ITERATIONS = 3

function gameLoop() {
  world.step(TIMESTEP, VELOCITY_ITERATIONS, POSITION_ITERATIONS)
  
  // Percorrer todos os corpos
  for (let body = world.getBodyList(); body; body = body.getNext()) {
    const pos = body.getPosition()
    const angle = body.getAngle()
    // Atualize seus sprites...
  }
  
  requestAnimationFrame(gameLoop)
}

Callbacks de colisão:

world.on('begin-contact', (contact) => {
  const fixtureA = contact.getFixtureA()
  const fixtureB = contact.getFixtureB()
  console.log('Contato iniciado')
})

world.on('end-contact', (contact) => {
  console.log('Contato encerrado')
})

world.on('pre-solve', (contact, oldManifold) => {
  // É possível desativar o contato aqui
  // contact.setEnabled(false)
})

Juntas:

import { RevoluteJoint, DistanceJoint, PrismaticJoint } from 'planck'

// Junta de revolução (dobradiça)
const joint = world.createJoint(RevoluteJoint({
  bodyA: ground,
  bodyB: box,
  localAnchorA: Vec2(0, 5),
  localAnchorB: Vec2(-1, 0),
  enableMotor: true,
  maxMotorTorque: 1000,
  motorSpeed: 2
}))

// Junta de distância (mola)
world.createJoint(DistanceJoint({
  bodyA: boxA,
  bodyB: boxB,
  localAnchorA: Vec2(0, 0),
  localAnchorB: Vec2(0, 0),
  length: 5,
  stiffness: 10,
  damping: 0.5
}))

Prós:

• Determinístico com passo de tempo fixo
• Bem documentado (a documentação do Box2D também se aplica)
• Bom desempenho
• Suporte a TypeScript
• Bundle pequeno

Contras:

• O CCD não funciona com juntas, portanto objetos rápidos conectados por juntas podem se esticar
• Curva de aprendizado mais acentuada que a do Matter.js
• Sem renderizador integrado
• Peculiaridades do Box2D (a escala das unidades importa)

p2-es — física 2D flexível

O p2-es é o fork mantido do p2.js. É excelente para jogos que precisam de restrições e mecanismos complexos.

Instalação:

npm install p2-es

Configuração básica:

import * as p2 from 'p2-es'

const world = new p2.World({
  gravity: [0, -9.81]
})

// Chão
const groundBody = new p2.Body({
  mass: 0, // estático
  position: [0, -1]
})
groundBody.addShape(new p2.Plane())
world.addBody(groundBody)

// Círculo dinâmico
const circleBody = new p2.Body({
  mass: 1,
  position: [0, 5]
})
circleBody.addShape(new p2.Circle({ radius: 0.5 }))
world.addBody(circleBody)

Restrições avançadas:

// Restrição de engrenagem
const gear = new p2.GearConstraint(bodyA, bodyB, {
  ratio: 2 // bodyB gira duas vezes mais rápido
})
world.addConstraint(gear)

// Restrição prismática (deslizante)
const prismatic = new p2.PrismaticConstraint(bodyA, bodyB, {
  localAnchorA: [0, 0],
  localAnchorB: [0, 0],
  localAxisA: [1, 0],
  disableRotationalLock: false
})
world.addConstraint(prismatic)

// Restrição de bloqueio (solda)
const lock = new p2.LockConstraint(bodyA, bodyB)
world.addConstraint(lock)

Materiais de contato:

const ice = new p2.Material()
const rubber = new p2.Material()

const iceRubber = new p2.ContactMaterial(ice, rubber, {
  friction: 0.1,
  restitution: 0.9
})
world.addContactMaterial(iceRubber)

// Aplicar às formas
iceBody.shapes[0].material = ice
rubberBody.shapes[0].material = rubber

Prós:

• Sistema de restrições completo
• Materiais de contato
• Bom para mecanismos e máquinas
• Corpos em repouso (melhora o desempenho)
• Módulos ES e suporte a tree shaking

Contras:

• Sem renderizador integrado
• Alguns pares de formas não são compatíveis
• Menos ativo que as alternativas
• Lacunas na documentação

Dicas de desempenho

1. Use um passo de tempo fixo

const TIMESTEP = 1 / 60
let accumulator = 0

function gameLoop(deltaTime) {
  accumulator += deltaTime
  
  while (accumulator >= TIMESTEP) {
    world.step(TIMESTEP)
    accumulator -= TIMESTEP
  }
  
  // Interpolar para obter uma renderização suave
  const alpha = accumulator / TIMESTEP
  // lerp(previousState, currentState, alpha)
}

2. Coloque corpos inativos em repouso

A maioria dos motores oferece suporte ao repouso. Ative-o:

// Cannon-es
world.allowSleep = true
body.allowSleep = true
body.sleepSpeedLimit = 0.1
body.sleepTimeLimit = 1

// Rapier
bodyDesc.setCanSleep(true)

3. Use formas de colisão simples

// BOM: primitivas simples
const sphere = new CANNON.Sphere(1)
const box = new CANNON.Box(new CANNON.Vec3(1, 1, 1))

// EVITE: trimesh complexo para corpos dinâmicos
const trimesh = new CANNON.Trimesh(vertices, indices) // Lento!

4. Reduza as iterações do solver (com cuidado)

// Cannon-es
world.solver.iterations = 5 // Padrão: 10

// Rapier - configurado na criação do mundo

5. Execute a física em um Web Worker

// main.js
const worker = new Worker('physics-worker.js')

worker.postMessage({ type: 'step', deltaTime: 1/60 })
worker.onmessage = (e) => {
  const { positions, rotations } = e.data
  // Atualizar objetos de renderização
}

// physics-worker.js
importScripts('cannon-es.js')
const world = new CANNON.World()

onmessage = (e) => {
  if (e.data.type === 'step') {
    world.step(e.data.deltaTime)
    postMessage({
      positions: bodies.map(b => b.position.toArray()),
      rotations: bodies.map(b => b.quaternion.toArray())
    })
  }
}

Quando usar cada opção

Integração com renderizadores

Three.js + Rapier

import * as THREE from 'three'
import RAPIER from '@dimforge/rapier3d'

await RAPIER.init()

const scene = new THREE.Scene()
const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 })

const bodies = new Map() // corpo físico -> malha

function createPhysicsBox(x, y, z) {
  // Física
  const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setTranslation(x, y, z)
  const body = world.createRigidBody(bodyDesc)
  const collider = RAPIER.ColliderDesc.cuboid(0.5, 0.5, 0.5)
  world.createCollider(collider, body)
  
  // Renderização
  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0x00ff00 })
  )
  scene.add(mesh)
  
  bodies.set(body, mesh)
  return body
}

function syncPhysics() {
  bodies.forEach((mesh, body) => {
    const pos = body.translation()
    const rot = body.rotation()
    mesh.position.set(pos.x, pos.y, pos.z)
    mesh.quaternion.set(rot.x, rot.y, rot.z, rot.w)
  })
}

PixiJS + Matter.js

import * as PIXI from 'pixi.js'
import Matter from 'matter-js'

const app = new PIXI.Application({ width: 800, height: 600 })
document.body.appendChild(app.view)

const engine = Matter.Engine.create()
const bodies = new Map()

function createPhysicsSprite(texture, x, y, width, height) {
  // Física
  const body = Matter.Bodies.rectangle(x, y, width, height)
  Matter.World.add(engine.world, body)
  
  // Renderização
  const sprite = new PIXI.Sprite(texture)
  sprite.anchor.set(0.5)
  app.stage.addChild(sprite)
  
  bodies.set(body, sprite)
  return body
}

app.ticker.add(() => {
  Matter.Engine.update(engine, 1000 / 60)
  
  bodies.forEach((sprite, body) => {
    sprite.position.set(body.position.x, body.position.y)
    sprite.rotation = body.angle
  })
})

Armadilhas comuns

A escala importa

Os motores de física funcionam melhor com uma escala do mundo real (1 unidade = 1 metro). Não use coordenadas em pixels diretamente.

// RUIM: usar posições em pixels
const body = Bodies.circle(400, 300, 50) // Raio de 50 pixels?

// BOM: usar um fator de escala
const SCALE = 50 // 50 pixels por metro
const body = Bodies.circle(8, 6, 1) // Raio de 1 metro
// Depois, multiplicar por SCALE ao renderizar

Vazamentos de memória com motores WASM

Sempre faça a limpeza dos corpos ao removê-los:

// Rapier
world.removeRigidBody(body)

// Ammo.js
physicsWorld.removeRigidBody(body)
Ammo.destroy(body)
Ammo.destroy(shape)
Ammo.destroy(motionState)

Tunelamento (objetos atravessando uns aos outros)

Objetos em movimento rápido podem atravessar paredes finas. Soluções:

// Rapier: ativar CCD
const bodyDesc = RAPIER.RigidBodyDesc.dynamic().setCcdEnabled(true)

// Cannon-es: usar passos de tempo menores ou paredes mais grossas
world.step(1/120) // 120 Hz em vez de 60

Relacionados

• Fundamentos de WebGL para desenvolvedores de jogos
• Web Workers para lógica de jogos — transfira a física para uma thread de Worker
• Publique um jogo web que carregue rápido
• Loop de jogo com Canvas 2D — o padrão de passo de tempo fixo usado por todos os motores de física
• Stack tecnológico de jogos web em 2026 — como os motores de física se encaixam no stack mais amplo
• Comparação de motores de jogos web — motores com suporte integrado a física

Recursos externos

• Documentação do Rapier — documentação oficial e exemplos de física do Rapier
• Documentação do Cannon-es — referência da API e guias
• Documentação do Matter.js — referência completa da API
• Documentação do Planck.js — Box2D para JavaScript

A Gamepad API oferece suporte a controles com qualidade de console em jogos web. Compatível com controles de Xbox, PlayStation, Switch Pro e modelos genéricos.

1) Detectando gamepads

window.addEventListener('gamepadconnected', (e) => {
  console.log('Gamepad conectado:', e.gamepad.id)
  console.log('Índice:', e.gamepad.index)
  console.log('Botões:', e.gamepad.buttons.length)
  console.log('Eixos:', e.gamepad.axes.length)
})

window.addEventListener('gamepaddisconnected', (e) => {
  console.log('Gamepad desconectado:', e.gamepad.id)
})

2) Consultando o estado do gamepad

O estado do gamepad deve ser consultado periodicamente (em vez de ser orientado a eventos):

function pollGamepads() {
  const gamepads = navigator.getGamepads()
  
  for (const gamepad of gamepads) {
    if (gamepad) {
      processGamepad(gamepad)
    }
  }
}

// Chame no loop do jogo
function gameLoop() {
  pollGamepads()
  update()
  render()
  requestAnimationFrame(gameLoop)
}

3) Mapeamento padrão de botões

O mapeamento "standard" (usado pela maioria dos controles de Xbox e PlayStation):

const BUTTONS = {
  A: 0,           // X (PS) / A (Xbox)
  B: 1,           // Círculo (PS) / B (Xbox)
  X: 2,           // Quadrado (PS) / X (Xbox)
  Y: 3,           // Triângulo (PS) / Y (Xbox)
  LB: 4,          // L1 (PS) / LB (Xbox)
  RB: 5,          // R1 (PS) / RB (Xbox)
  LT: 6,          // L2 (PS) / LT (Xbox)
  RT: 7,          // R2 (PS) / RT (Xbox)
  SELECT: 8,      // Share (PS) / Back (Xbox)
  START: 9,       // Options (PS) / Start (Xbox)
  L3: 10,         // Pressionar o analógico esquerdo
  R3: 11,         // Pressionar o analógico direito
  DPAD_UP: 12,
  DPAD_DOWN: 13,
  DPAD_LEFT: 14,
  DPAD_RIGHT: 15,
  HOME: 16,       // Botão PS / botão Xbox
}

const AXES = {
  LEFT_X: 0,
  LEFT_Y: 1,
  RIGHT_X: 2,
  RIGHT_Y: 3,
}

4) Lendo botões e controles analógicos

function processGamepad(gamepad) {
  // Botões (digitais ou analógicos)
  const jump = gamepad.buttons[BUTTONS.A].pressed
  const shoot = gamepad.buttons[BUTTONS.X].pressed
  
  // Gatilhos (analógicos, de 0 a 1)
  const leftTrigger = gamepad.buttons[BUTTONS.LT].value
  const rightTrigger = gamepad.buttons[BUTTONS.RT].value
  
  // Controles analógicos (de -1 a 1)
  const leftX = gamepad.axes[AXES.LEFT_X]
  const leftY = gamepad.axes[AXES.LEFT_Y]
  const rightX = gamepad.axes[AXES.RIGHT_X]
  const rightY = gamepad.axes[AXES.RIGHT_Y]
  
  return { jump, shoot, leftTrigger, rightTrigger, leftX, leftY, rightX, rightY }
}

5) Tratamento da zona morta

Os controles analógicos raramente ficam exatamente em 0 quando estão em repouso:

function applyDeadzone(value, deadzone = 0.15) {
  if (Math.abs(value) < deadzone) return 0
  
  // Redimensiona o intervalo restante para 0-1
  const sign = Math.sign(value)
  const adjusted = (Math.abs(value) - deadzone) / (1 - deadzone)
  return sign * adjusted
}

function getStickInput(gamepad) {
  return {
    leftX: applyDeadzone(gamepad.axes[AXES.LEFT_X]),
    leftY: applyDeadzone(gamepad.axes[AXES.LEFT_Y]),
    rightX: applyDeadzone(gamepad.axes[AXES.RIGHT_X]),
    rightY: applyDeadzone(gamepad.axes[AXES.RIGHT_Y]),
  }
}

6) Zona morta radial (melhor para movimentação 2D)

function applyRadialDeadzone(x, y, deadzone = 0.15) {
  const magnitude = Math.sqrt(x * x + y * y)
  
  if (magnitude < deadzone) {
    return { x: 0, y: 0 }
  }
  
  const normalized = {
    x: x / magnitude,
    y: y / magnitude,
  }
  
  const adjusted = (magnitude - deadzone) / (1 - deadzone)
  
  return {
    x: normalized.x * adjusted,
    y: normalized.y * adjusted,
  }
}

// Uso
const stick = applyRadialDeadzone(
  gamepad.axes[AXES.LEFT_X],
  gamepad.axes[AXES.LEFT_Y]
)
player.vx = stick.x * player.speed
player.vy = stick.y * player.speed

7) Gerenciador completo de gamepads

class GamepadManager {
  constructor() {
    this.gamepads = new Map()
    this.prevState = new Map()
    
    window.addEventListener('gamepadconnected', (e) => {
      this.gamepads.set(e.gamepad.index, e.gamepad)
      console.log('Conectado:', e.gamepad.id)
    })
    
    window.addEventListener('gamepaddisconnected', (e) => {
      this.gamepads.delete(e.gamepad.index)
      this.prevState.delete(e.gamepad.index)
    })
  }
  
  poll() {
    const gamepads = navigator.getGamepads()
    for (const gp of gamepads) {
      if (gp) this.gamepads.set(gp.index, gp)
    }
  }
  
  getState(index = 0) {
    const gp = this.gamepads.get(index)
    if (!gp) return null
    
    const stick = applyRadialDeadzone(gp.axes[0], gp.axes[1])
    const rightStick = applyRadialDeadzone(gp.axes[2], gp.axes[3])
    
    return {
      connected: true,
      leftStick: stick,
      rightStick: rightStick,
      
      // Botões frontais
      a: gp.buttons[0].pressed,
      b: gp.buttons[1].pressed,
      x: gp.buttons[2].pressed,
      y: gp.buttons[3].pressed,
      
      // Botões superiores
      lb: gp.buttons[4].pressed,
      rb: gp.buttons[5].pressed,
      
      // Gatilhos (analógicos)
      lt: gp.buttons[6].value,
      rt: gp.buttons[7].value,
      
      // Direcional
      dpadUp: gp.buttons[12].pressed,
      dpadDown: gp.buttons[13].pressed,
      dpadLeft: gp.buttons[14].pressed,
      dpadRight: gp.buttons[15].pressed,
      
      // Meta
      select: gp.buttons[8].pressed,
      start: gp.buttons[9].pressed,
    }
  }
  
  isPressed(index, button) {
    const gp = this.gamepads.get(index)
    return gp?.buttons[button]?.pressed || false
  }
  
  wasJustPressed(index, button) {
    const current = this.isPressed(index, button)
    const prev = this.prevState.get(index)?.[button] || false
    return current && !prev
  }
  
  endFrame() {
    for (const [index, gp] of this.gamepads) {
      const state = {}
      for (let i = 0; i < gp.buttons.length; i++) {
        state[i] = gp.buttons[i].pressed
      }
      this.prevState.set(index, state)
    }
  }
}

// Uso
const gamepadManager = new GamepadManager()

function update() {
  gamepadManager.poll()
  
  const state = gamepadManager.getState(0)
  if (state) {
    player.vx = state.leftStick.x * player.speed
    player.vy = state.leftStick.y * player.speed
    
    if (gamepadManager.wasJustPressed(0, BUTTONS.A)) {
      player.jump()
    }
  }
  
  gamepadManager.endFrame()
}

8) Vibração / resposta tátil

function vibrate(gamepad, duration = 200, weakMagnitude = 0.5, strongMagnitude = 0.5) {
  if (gamepad.vibrationActuator) {
    gamepad.vibrationActuator.playEffect('dual-rumble', {
      startDelay: 0,
      duration,
      weakMagnitude,   // Motor de alta frequência
      strongMagnitude, // Motor de baixa frequência
    })
  }
}

// Uso
function onPlayerHit() {
  const gp = navigator.getGamepads()[0]
  if (gp) vibrate(gp, 150, 0.3, 0.6)
}

function onExplosion() {
  const gp = navigator.getGamepads()[0]
  if (gp) vibrate(gp, 300, 0.8, 1.0)
}

9) Vários jogadores

class LocalMultiplayer {
  constructor(maxPlayers = 4) {
    this.maxPlayers = maxPlayers
    this.players = []
  }
  
  getActivePlayers() {
    const gamepads = navigator.getGamepads()
    const active = []
    
    for (let i = 0; i < this.maxPlayers; i++) {
      if (gamepads[i]) {
        active.push({
          index: i,
          gamepad: gamepads[i],
          state: this.getState(gamepads[i])
        })
      }
    }
    
    return active
  }
  
  getState(gp) {
    // ... igual ao anterior
  }
}

// No loop do jogo
const multiplayer = new LocalMultiplayer(4)

function update() {
  const players = multiplayer.getActivePlayers()
  
  for (const { index, state } of players) {
    updatePlayer(index, state)
  }
}

10) Alternativa e entrada combinada

Ofereça suporte tanto ao teclado quanto ao gamepad:

class InputManager {
  constructor() {
    this.keyboard = new KeyboardInput()
    this.gamepad = new GamepadManager()
  }
  
  poll() {
    this.gamepad.poll()
  }
  
  getInput(playerIndex = 0) {
    const gpState = this.gamepad.getState(playerIndex)
    const kbState = this.keyboard.getState()
    
    // Combina as entradas (o gamepad tem prioridade para valores analógicos)
    return {
      moveX: gpState?.leftStick.x || (kbState.left ? -1 : kbState.right ? 1 : 0),
      moveY: gpState?.leftStick.y || (kbState.up ? -1 : kbState.down ? 1 : 0),
      jump: gpState?.a || kbState.space,
      shoot: gpState?.x || kbState.z,
      pause: gpState?.start || kbState.escape,
    }
  }
  
  endFrame() {
    this.gamepad.endFrame()
    this.keyboard.endFrame()
  }
}

Conteúdo relacionado

• Tratamento de entradas em jogos
• Jogos web compatíveis com dispositivos móveis
• Loop de jogo com Canvas 2D
• Pointer Lock para jogos FPS — combinando o gamepad com o controle de câmera pelo mouse
• Design de jogos cooperativos — projetando para entradas de vários controles no modo cooperativo local

Recursos externos

• MDN: Gamepad API — referência completa da API
• MDN: Como usar a Gamepad API — guia passo a passo
• Testador de gamepad — teste os mapeamentos do seu controle no navegador

Muitas plataformas (Itch.io, Newgrounds, Cinevva e seu próprio site) incorporam jogos em iframes. Este tutorial mostra como fazer seu jogo funcionar bem quando incorporado.

1) Configuração básica para incorporação

Seu jogo deve funcionar sem exigir controle total da página:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { margin: 0; padding: 0; }
    html, body { width: 100%; height: 100%; overflow: hidden; }
    canvas { display: block; width: 100%; height: 100%; }
  </style>
</head>
<body>
  <canvas id="game"></canvas>
  <script src="game.js"></script>
</body>
</html>

2) Detectando o contexto de iframe

const isEmbedded = window.self !== window.top

if (isEmbedded) {
  // Ajuste o comportamento para o contexto incorporado
  hideExternalLinks()
  adjustUIForSmallSize()
}

function hideExternalLinks() {
  document.querySelectorAll('a[target="_blank"]').forEach(link => {
    link.style.display = 'none'
  })
}

3) Permitindo as permissões necessárias no iframe

A página principal controla o que seu iframe pode fazer. Permissões comuns:

<iframe 
  src="https://game.example.com"
  allow="fullscreen; autoplay; gamepad; pointer-lock"
  sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-popups"
></iframe>

Seu jogo deve lidar de forma adequada com permissões ausentes:

// Verifique se a tela cheia está disponível
const canFullscreen = document.fullscreenEnabled || document.webkitFullscreenEnabled

if (!canFullscreen) {
  document.getElementById('fullscreen-btn').style.display = 'none'
}

4) Tela cheia a partir do iframe

A tela cheia exige o atributo allow="fullscreen":

async function requestFullscreen() {
  const elem = document.documentElement
  
  try {
    if (elem.requestFullscreen) {
      await elem.requestFullscreen()
    } else if (elem.webkitRequestFullscreen) {
      await elem.webkitRequestFullscreen()
    }
  } catch (err) {
    // Tela cheia não permitida — exiba uma mensagem
    showMessage('Tela cheia indisponível quando o jogo está incorporado')
  }
}

5) Comunicação com a página principal

Use postMessage para uma comunicação segura entre origens:

No seu jogo:

// Envie uma mensagem à página principal
function notifyParent(type, data) {
  if (window.parent !== window) {
    window.parent.postMessage({ type, data, source: 'game' }, '*')
  }
}

// Receba mensagens da página principal
window.addEventListener('message', (event) => {
  // Valide a origem, se necessário
  // if (event.origin !== 'https://trusted-host.com') return
  
  const { type, data } = event.data
  
  switch (type) {
    case 'pause':
      pauseGame()
      break
    case 'resume':
      resumeGame()
      break
    case 'setVolume':
      setVolume(data.volume)
      break
  }
})

// Avise quando o jogo estiver pronto
window.addEventListener('load', () => {
  notifyParent('ready', { width: 800, height: 600 })
})

// Avise sobre eventos do jogo
function onGameOver(score) {
  notifyParent('gameover', { score })
}

Na página principal:

const iframe = document.getElementById('game-iframe')

iframe.addEventListener('load', () => {
  // Aguarde mensagens do jogo
  window.addEventListener('message', (event) => {
    if (event.source !== iframe.contentWindow) return
    if (event.data.source !== 'game') return
    
    const { type, data } = event.data
    
    if (type === 'ready') {
      console.log('Jogo pronto:', data)
    }
    if (type === 'gameover') {
      showScoreModal(data.score)
    }
  })
})

// Envie comandos ao jogo
function pauseGame() {
  iframe.contentWindow.postMessage({ type: 'pause' }, '*')
}

6) Gerenciando o foco

Iframes podem perder o foco, interrompendo a entrada pelo teclado:

// Coloque o canvas em foco automaticamente ao receber um clique
canvas.addEventListener('click', () => {
  canvas.focus()
})

// Permita que o canvas receba foco
canvas.tabIndex = 1

// Gerencie a perda de foco
window.addEventListener('blur', () => {
  // Redefina as teclas pressionadas
  input.left = input.right = input.up = input.down = false
  
  if (isEmbedded) {
    // Pause opcionalmente
    // pauseGame()
  }
})

// Solicite foco à página principal
function requestFocus() {
  notifyParent('requestFocus', {})
}

7) Tamanho responsivo da incorporação

Adapte-se a diferentes dimensões de incorporação:

function handleResize() {
  const width = window.innerWidth
  const height = window.innerHeight
  
  // Ajuste a interface com base no tamanho
  if (width < 400 || height < 300) {
    enableCompactUI()
  } else {
    enableFullUI()
  }
  
  // Redimensione o jogo adequadamente
  resizeCanvas(width, height)
}

window.addEventListener('resize', handleResize)
handleResize()

8) Indicador de carregamento para incorporações

Exiba algo imediatamente:

// Inclua diretamente no HTML para exibição instantânea
const loadingHTML = `
  <div id="loading" style="
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: #fff;
    font-family: sans-serif;
  ">
    <div>
      <div class="spinner"></div>
      <p>Carregando...</p>
    </div>
  </div>
`

// Remova quando o jogo estiver pronto
function hideLoading() {
  const loading = document.getElementById('loading')
  if (loading) {
    loading.style.opacity = '0'
    loading.style.transition = 'opacity 0.3s'
    setTimeout(() => loading.remove(), 300)
  }
}

9) SDKs específicos das plataformas

Algumas plataformas têm APIs próprias:

Itch.io:

// Nenhum SDK é necessário, mas você pode usar postMessage para conquistas
window.parent.postMessage({ type: 'itch-achievement', data: { id: 'first-win' }}, '*')

Newgrounds:

// Inclua o SDK Newgrounds.io
const ngio = new Newgrounds.io.core('APP_ID', 'AES_KEY')
ngio.callComponent('Medal.unlock', { id: 12345 })

Cinevva:

// Sinalize que o jogo está pronto
window.parent.postMessage({ type: 'cinevva:ready' }, '*')

// Sinalize o estado jogável
window.parent.postMessage({ type: 'cinevva:playable' }, '*')

10) Considerações de segurança

// Valide as origens das mensagens em operações sensíveis
window.addEventListener('message', (event) => {
  const trustedOrigins = [
    'https://itch.io',
    'https://cinevva.com',
    'https://yoursite.com'
  ]
  
  if (!trustedOrigins.includes(event.origin)) {
    return // Ignore mensagens não confiáveis
  }
  
  // Processe a mensagem...
})

// Não exponha operações sensíveis via postMessage
// Permita apenas comandos incluídos na lista de permissões
const allowedCommands = ['pause', 'resume', 'setVolume', 'mute']

window.addEventListener('message', (event) => {
  const { type } = event.data
  if (!allowedCommands.includes(type)) return
  
  // Processe o comando...
})

Checklist de testes

• Teste local: use um servidor HTTP simples, não file://
• Entre origens: teste com o jogo realmente incorporado em um iframe
• Permissões: teste com um sandbox restrito
• Foco: teste o teclado depois de clicar fora do iframe
• Redimensionamento: teste com vários tamanhos de incorporação
• Dispositivos móveis: teste os controles por toque no contexto incorporado

<!-- Página de teste da incorporação -->
<!DOCTYPE html>
<html>
<body style="background: #333; padding: 20px;">
  <h1 style="color: #fff;">Teste de incorporação</h1>
  <iframe 
    src="http://localhost:8000" 
    width="800" 
    height="600"
    allow="fullscreen; autoplay; gamepad"
  ></iframe>
</body>
</html>

Conteúdo relacionado

• Publique um jogo web que carrega rapidamente
• Jogos web otimizados para dispositivos móveis
• Para criadores
• COOP/COEP e SharedArrayBuffer — cabeçalhos entre origens que afetam a incorporação em iframes
• Como lançar seu jogo no itch.io — o itch.io incorpora nativamente jogos de navegador em iframes

Recursos externos

• MDN: elemento iframe — referência completa dos atributos de iframe
• MDN: Política de Permissões — controle dos recursos que os iframes podem usar
• MDN: API postMessage — comunicação entre o iframe e a página principal

IndexedDB é a melhor opção para armazenar dados persistentes de jogos no navegador. Ele lida com grandes volumes de dados, funciona offline e não bloqueia a thread principal.

1) Por que usar IndexedDB em vez de localStorage?

Para jogos, IndexedDB quase sempre é a escolha certa.

2) Abrindo um banco de dados

function openGameDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('MyGame', 1)
    
    request.onerror = () => reject(request.error)
    request.onsuccess = () => resolve(request.result)
    
    request.onupgradeneeded = (event) => {
      const db = event.target.result
      
      // Cria os armazenamentos
      if (!db.objectStoreNames.contains('saves')) {
        db.createObjectStore('saves', { keyPath: 'slot' })
      }
      if (!db.objectStoreNames.contains('settings')) {
        db.createObjectStore('settings', { keyPath: 'key' })
      }
    }
  })
}

3) Salvando o estado do jogo

async function saveGame(slot, gameState) {
  const db = await openGameDB()
  
  return new Promise((resolve, reject) => {
    const tx = db.transaction('saves', 'readwrite')
    const store = tx.objectStore('saves')
    
    const saveData = {
      slot,
      state: gameState,
      timestamp: Date.now(),
    }
    
    const request = store.put(saveData)
    request.onsuccess = () => resolve()
    request.onerror = () => reject(request.error)
  })
}

4) Carregando o estado do jogo

async function loadGame(slot) {
  const db = await openGameDB()
  
  return new Promise((resolve, reject) => {
    const tx = db.transaction('saves', 'readonly')
    const store = tx.objectStore('saves')
    
    const request = store.get(slot)
    request.onsuccess = () => resolve(request.result?.state || null)
    request.onerror = () => reject(request.error)
  })
}

5) Listando todos os saves

async function listSaves() {
  const db = await openGameDB()
  
  return new Promise((resolve, reject) => {
    const tx = db.transaction('saves', 'readonly')
    const store = tx.objectStore('saves')
    
    const request = store.getAll()
    request.onsuccess = () => resolve(request.result)
    request.onerror = () => reject(request.error)
  })
}

6) Excluindo um save

async function deleteSave(slot) {
  const db = await openGameDB()
  
  return new Promise((resolve, reject) => {
    const tx = db.transaction('saves', 'readwrite')
    const store = tx.objectStore('saves')
    
    const request = store.delete(slot)
    request.onsuccess = () => resolve()
    request.onerror = () => reject(request.error)
  })
}

7) Uma classe GameStorage completa

class GameStorage {
  constructor(dbName = 'GameData', version = 1) {
    this.dbName = dbName
    this.version = version
    this.db = null
  }
  
  async init() {
    this.db = await this.openDB()
  }
  
  openDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version)
      request.onerror = () => reject(request.error)
      request.onsuccess = () => resolve(request.result)
      request.onupgradeneeded = (e) => {
        const db = e.target.result
        if (!db.objectStoreNames.contains('saves')) {
          db.createObjectStore('saves', { keyPath: 'slot' })
        }
        if (!db.objectStoreNames.contains('settings')) {
          db.createObjectStore('settings', { keyPath: 'key' })
        }
        if (!db.objectStoreNames.contains('assets')) {
          db.createObjectStore('assets', { keyPath: 'url' })
        }
      }
    })
  }
  
  async save(slot, data) {
    const tx = this.db.transaction('saves', 'readwrite')
    tx.objectStore('saves').put({ slot, data, timestamp: Date.now() })
    return tx.complete
  }
  
  async load(slot) {
    const tx = this.db.transaction('saves', 'readonly')
    const result = await this.promisify(tx.objectStore('saves').get(slot))
    return result?.data || null
  }
  
  async setSetting(key, value) {
    const tx = this.db.transaction('settings', 'readwrite')
    tx.objectStore('settings').put({ key, value })
  }
  
  async getSetting(key, defaultValue = null) {
    const tx = this.db.transaction('settings', 'readonly')
    const result = await this.promisify(tx.objectStore('settings').get(key))
    return result?.value ?? defaultValue
  }
  
  promisify(request) {
    return new Promise((resolve, reject) => {
      request.onsuccess = () => resolve(request.result)
      request.onerror = () => reject(request.error)
    })
  }
}

8) Armazenando dados binários (texturas, áudio)

IndexedDB lida com Blobs e ArrayBuffers:

async function cacheAsset(url, blob) {
  const tx = db.transaction('assets', 'readwrite')
  tx.objectStore('assets').put({ url, blob, cached: Date.now() })
}

async function getCachedAsset(url) {
  const tx = db.transaction('assets', 'readonly')
  const result = await promisify(tx.objectStore('assets').get(url))
  return result?.blob || null
}

9) Padrão de salvamento automático

class AutoSave {
  constructor(storage, interval = 60000) {
    this.storage = storage
    this.interval = interval
    this.timer = null
    this.dirty = false
  }
  
  markDirty() {
    this.dirty = true
  }
  
  start(getState) {
    this.timer = setInterval(async () => {
      if (this.dirty) {
        await this.storage.save('autosave', getState())
        this.dirty = false
        console.log('Salvo automaticamente')
      }
    }, this.interval)
  }
  
  stop() {
    clearInterval(this.timer)
  }
}

10) Tratamento de erros e alternativas

async function safeLoad(slot, defaultState) {
  try {
    const saved = await loadGame(slot)
    if (saved) {
      // Valida/migra saves antigos, se necessário
      return migrateSave(saved)
    }
  } catch (err) {
    console.warn('Falha ao carregar o save:', err)
  }
  return defaultState
}

function migrateSave(save) {
  // Lida com formatos antigos de save
  if (!save.version) {
    save.version = 1
    save.settings = save.settings || {}
  }
  return save
}

11) Faça os saves sobreviverem à remoção

Não há garantia de que os dados do IndexedDB permanecerão armazenados. Por padrão, uma origem usa armazenamento de "melhor esforço", e o navegador pode removê-lo quando o disco fica cheio ou, no Safari/WebKit, após um período sem interação do usuário com seu site. No caso de saves de jogos, esses são justamente os dados que você não quer perder.

Solicite armazenamento persistente para que o navegador não apague seus dados sem uma ação explícita do usuário:

async function makeStoragePersistent() {
  if (navigator.storage && navigator.storage.persist) {
    const persisted = await navigator.storage.persist()
    console.log(persisted ? 'Os saves estão protegidos contra remoção' : 'Os saves podem ser removidos sob pressão de armazenamento')
    return persisted
  }
  return false
}

Os navegadores decidem se concedem essa permissão com base em sinais de engajamento — quanto o usuário interage com seu site e se ele está instalado como PWA —, portanto, não presuma que a solicitação sempre terá sucesso. Você também pode verificar quanto espaço está disponível antes de gravar saves grandes ou assets em cache:

async function checkStorage() {
  if (navigator.storage && navigator.storage.estimate) {
    const { usage, quota } = await navigator.storage.estimate()
    console.log(`Usando ${usage} de ${quota} bytes`)
  }
}

Ambas as APIs exigem um contexto seguro (HTTPS ou localhost).

Conteúdo relacionado

• PWA para jogos offline
• Service workers para cache de jogos
• Publique um jogo web que carregue rapidamente
• Carregamento de assets por streaming — usando IndexedDB como cache de assets
• Análise de dados para jogos web — acompanhando padrões de salvamento e carregamento para entender o comportamento dos jogadores

Recursos externos

• MDN: API IndexedDB — referência completa da API
• MDN: Como usar IndexedDB — guia passo a passo
• Biblioteca idb — um pequeno wrapper de IndexedDB baseado em Promises

Os dispositivos móveis são a maior plataforma de jogos. Alguns ajustes fazem seu jogo para web funcionar muito bem em celulares e tablets.

1) Configuração da viewport

Evite o zoom e garanta o dimensionamento correto:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2) Canvas em tela cheia

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  touch-action: none; /* Impede gestos do navegador */
}

#game {
  display: block;
  width: 100%;
  height: 100%;
}

Se você dimensionar a interface com base na altura da viewport em vez de height: 100%, prefira as unidades dinâmicas de viewport dvh, svh e lvh em vez de vh. Elas levam em conta a barra de ferramentas retrátil/expansível do navegador móvel, que 100vh ignora (no iOS, 100vh corresponde à altura com a barra de ferramentas oculta, portanto a parte inferior do layout acaba cortada). Essas unidades alcançaram o status Baseline Widely Available e são compatíveis com Chrome/Edge 108+, Firefox 101+ e Safari/iOS Safari 15.4+, abrangendo cerca de 92% dos usuários.

3) Tratamento de eventos de toque

const canvas = document.getElementById('game')

// Impede os comportamentos de toque padrão
canvas.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false })
canvas.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false })

// Rastreia os toques
const touches = new Map()

canvas.addEventListener('touchstart', (e) => {
  for (const touch of e.changedTouches) {
    touches.set(touch.identifier, {
      x: touch.clientX,
      y: touch.clientY,
      startX: touch.clientX,
      startY: touch.clientY,
    })
  }
})

canvas.addEventListener('touchmove', (e) => {
  for (const touch of e.changedTouches) {
    const t = touches.get(touch.identifier)
    if (t) {
      t.x = touch.clientX
      t.y = touch.clientY
    }
  }
})

canvas.addEventListener('touchend', (e) => {
  for (const touch of e.changedTouches) {
    touches.delete(touch.identifier)
  }
})

Se o jogo também precisar funcionar com mouse ou caneta, considere usar Pointer Events (pointerdown/pointermove/pointerup) em vez de eventos de toque. Agora, a MDN os recomenda como o modelo de entrada único e independente de dispositivo: um único fluxo de código processa toque, mouse e caneta, e o multitoque continua funcionando por meio de pointerId (o equivalente a touch.identifier usado acima). Os eventos de toque continuam sendo perfeitamente adequados para jogos exclusivos para telas sensíveis ao toque.

4) Joystick virtual

class VirtualJoystick {
  constructor(x, y, radius) {
    this.baseX = x
    this.baseY = y
    this.radius = radius
    this.knobRadius = radius * 0.4
    this.active = false
    this.touchId = null
    this.dx = 0
    this.dy = 0
  }
  
  handleTouchStart(touch) {
    const dist = Math.hypot(touch.clientX - this.baseX, touch.clientY - this.baseY)
    if (dist < this.radius) {
      this.active = true
      this.touchId = touch.identifier
      this.updatePosition(touch.clientX, touch.clientY)
    }
  }
  
  handleTouchMove(touch) {
    if (touch.identifier === this.touchId) {
      this.updatePosition(touch.clientX, touch.clientY)
    }
  }
  
  handleTouchEnd(touch) {
    if (touch.identifier === this.touchId) {
      this.active = false
      this.touchId = null
      this.dx = 0
      this.dy = 0
    }
  }
  
  updatePosition(x, y) {
    let dx = x - this.baseX
    let dy = y - this.baseY
    const dist = Math.hypot(dx, dy)
    
    if (dist > this.radius) {
      dx = (dx / dist) * this.radius
      dy = (dy / dist) * this.radius
    }
    
    this.dx = dx / this.radius
    this.dy = dy / this.radius
  }
  
  draw(ctx) {
    // Círculo da base
    ctx.beginPath()
    ctx.arc(this.baseX, this.baseY, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
    ctx.fill()
    
    // Manopla
    const knobX = this.baseX + this.dx * this.radius
    const knobY = this.baseY + this.dy * this.radius
    ctx.beginPath()
    ctx.arc(knobX, knobY, this.knobRadius, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
    ctx.fill()
  }
  
  getInput() {
    return { x: this.dx, y: this.dy }
  }
}

5) Botões de toque

class TouchButton {
  constructor(x, y, radius, label) {
    this.x = x
    this.y = y
    this.radius = radius
    this.label = label
    this.pressed = false
    this.touchId = null
  }
  
  contains(px, py) {
    return Math.hypot(px - this.x, py - this.y) < this.radius
  }
  
  handleTouchStart(touch) {
    if (this.contains(touch.clientX, touch.clientY)) {
      this.pressed = true
      this.touchId = touch.identifier
    }
  }
  
  handleTouchEnd(touch) {
    if (touch.identifier === this.touchId) {
      this.pressed = false
      this.touchId = null
    }
  }
  
  draw(ctx) {
    ctx.beginPath()
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = this.pressed ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 255, 255, 0.2)'
    ctx.fill()
    
    ctx.font = 'bold 24px sans-serif'
    ctx.fillStyle = '#fff'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(this.label, this.x, this.y)
  }
}

6) Tratamento da orientação

function checkOrientation() {
  const isLandscape = window.innerWidth > window.innerHeight
  
  if (!isLandscape) {
    showRotatePrompt()
  } else {
    hideRotatePrompt()
    resizeCanvas()
  }
}

window.addEventListener('resize', checkOrientation)
window.addEventListener('orientationchange', checkOrientation)

function showRotatePrompt() {
  document.getElementById('rotate-prompt').style.display = 'flex'
}

function hideRotatePrompt() {
  document.getElementById('rotate-prompt').style.display = 'none'
}

7) Otimização de desempenho

// Reduz a resolução em dispositivos de baixo desempenho
function getDeviceScale() {
  const dpr = window.devicePixelRatio || 1
  const isLowEnd = navigator.hardwareConcurrency <= 2
  return isLowEnd ? Math.min(dpr, 1.5) : Math.min(dpr, 2)
}

// Limita a frequência de operações pesadas
let lastHeavyUpdate = 0
function maybeDoHeavyWork(timestamp) {
  if (timestamp - lastHeavyUpdate > 100) { // 10 fps para tarefas pesadas
    doExpensiveCalculations()
    lastHeavyUpdate = timestamp
  }
}

// Usa recursos de qualidade inferior
function getAssetQuality() {
  const memory = navigator.deviceMemory || 4
  if (memory <= 2) return 'low'
  if (memory <= 4) return 'medium'
  return 'high'
}

8) Cuidados com a bateria

// Verifica a bateria e reduz os efeitos
async function checkBattery() {
  if ('getBattery' in navigator) {
    const battery = await navigator.getBattery()
    
    if (battery.level < 0.2 && !battery.charging) {
      enableBatterySaver()
    }
    
    battery.addEventListener('levelchange', () => {
      if (battery.level < 0.2 && !battery.charging) {
        enableBatterySaver()
      }
    })
  }
}

function enableBatterySaver() {
  game.particleCount = Math.floor(game.particleCount * 0.5)
  game.targetFps = 30
  console.log('Modo de economia de bateria ativado')
}

9) API de tela cheia

async function requestFullscreen() {
  const elem = document.documentElement
  
  try {
    if (elem.requestFullscreen) {
      await elem.requestFullscreen()
    } else if (elem.webkitRequestFullscreen) {
      await elem.webkitRequestFullscreen()
    }
    
    // Bloqueia a orientação
    if (screen.orientation?.lock) {
      await screen.orientation.lock('landscape')
    }
  } catch (err) {
    console.warn('Falha ao ativar a tela cheia:', err)
  }
}

// Chama durante uma interação do usuário
document.getElementById('play-btn').addEventListener('click', () => {
  requestFullscreen()
  startGame()
})

Uma ressalva: a API de tela cheia não funciona para elementos comuns no iPhone. O Safari do iOS só oferece tela cheia para elementos de vídeo nativos (por meio do método não padronizado webkitEnterFullscreen), portanto documentElement.requestFullscreen() será rejeitado no iPhone. O try/catch acima trata isso sem interromper o jogo. Por isso, projete o jogo para ser jogável sem tela cheia de verdade no iPhone e considere a tela cheia um aprimoramento para iPad, Android e computadores, onde há suporte. A chamada screen.orientation.lock() tem a mesma limitação no iPhone, portanto não dependa dela.

10) Checklist de testes

Antes de publicar:

• Resposta ao toque — Teste em dispositivos reais, não apenas em emuladores
• Vários tamanhos de tela — Celular, tablet, iPad Pro
• Ambas as orientações — Ou bloqueie em uma delas
• Dispositivos de baixo desempenho — Teste em celulares com 2 a 3 anos de uso
• Redes lentas — Teste com simulação de 3G
• Safari no iOS — Tem particularidades com áudio e tela cheia
• Chrome no Android — O navegador mais comum
• Interrupções — Ligações telefônicas, notificações
• Pressão sobre a memória — O jogo se recupera depois que a aba fica em segundo plano?

// Visualização de depuração dos toques
function drawTouchDebug(ctx) {
  for (const [id, touch] of touches) {
    ctx.beginPath()
    ctx.arc(touch.x, touch.y, 30, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'
    ctx.fill()
    ctx.fillStyle = '#fff'
    ctx.fillText(id.toString(), touch.x, touch.y)
  }
}

Conteúdo relacionado

• Tratamento de entradas em jogos
• Canvas responsivo para jogos
• PWA para jogos offline
• Web Audio API para jogos — como lidar com as restrições de áudio do iOS
• Publique um jogo para web que carregue rapidamente — otimização do tempo de carregamento em conexões móveis
• Incorporação de jogos com iframe — aspectos específicos da incorporação em dispositivos móveis

Recursos externos

• MDN: eventos de toque — tratamento de multitoque
• MDN: API Screen Orientation — bloqueio da orientação
• MDN: API Fullscreen — como entrar em tela cheia em dispositivos móveis
• web.dev: design responsivo — padrões responsivos aplicáveis à interface de jogos

Pixel art fica incrível quando renderizada corretamente — e péssima quando está borrada. Este tutorial aborda as técnicas para criar gráficos em pixels nítidos e autênticos.

1) O problema do desfoque

Por padrão, os navegadores suavizam as imagens ao redimensioná-las. Para pixel art, isso é inadequado:

/* CSS solution */
canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* Firefox fallback */
}

2) Configurações do contexto do Canvas

const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

// Disable smoothing for crisp pixels
ctx.imageSmoothingEnabled = false

Essa configuração deve ser aplicada novamente após cada redimensionamento do Canvas ou alteração de contexto.

3) Escalonamento por números inteiros

Pixel art fica melhor em escalas inteiras (1x, 2x, 3x, 4x):

const GAME_WIDTH = 160
const GAME_HEIGHT = 144 // Game Boy resolution

function resize() {
  const maxScale = Math.floor(Math.min(
    window.innerWidth / GAME_WIDTH,
    window.innerHeight / GAME_HEIGHT
  ))
  const scale = Math.max(1, maxScale)
  
  canvas.width = GAME_WIDTH
  canvas.height = GAME_HEIGHT
  canvas.style.width = GAME_WIDTH * scale + 'px'
  canvas.style.height = GAME_HEIGHT * scale + 'px'
  
  ctx.imageSmoothingEnabled = false
}

4) Desenhando sprites em posições inteiras

Posições de subpixel causam desfoque:

// Bad: causes blur
ctx.drawImage(sprite, 10.5, 20.3)

// Good: crisp pixels
ctx.drawImage(sprite, Math.floor(10.5), Math.floor(20.3))

// Or round to nearest
ctx.drawImage(sprite, Math.round(player.x), Math.round(player.y))

5) Animação com sprite sheet

class PixelSprite {
  constructor(image, frameWidth, frameHeight) {
    this.image = image
    this.frameWidth = frameWidth
    this.frameHeight = frameHeight
    this.animations = {}
    this.currentAnim = null
    this.frame = 0
    this.timer = 0
  }
  
  addAnimation(name, frames, fps = 8) {
    this.animations[name] = { frames, duration: 1 / fps }
  }
  
  play(name) {
    if (this.currentAnim !== name) {
      this.currentAnim = name
      this.frame = 0
      this.timer = 0
    }
  }
  
  update(dt) {
    if (!this.currentAnim) return
    
    const anim = this.animations[this.currentAnim]
    this.timer += dt
    
    if (this.timer >= anim.duration) {
      this.timer = 0
      this.frame = (this.frame + 1) % anim.frames.length
    }
  }
  
  draw(ctx, x, y, flipX = false) {
    if (!this.currentAnim) return
    
    const anim = this.animations[this.currentAnim]
    const frameIndex = anim.frames[this.frame]
    const sx = (frameIndex % 16) * this.frameWidth
    const sy = Math.floor(frameIndex / 16) * this.frameHeight
    
    ctx.save()
    if (flipX) {
      ctx.scale(-1, 1)
      x = -x - this.frameWidth
    }
    
    ctx.drawImage(
      this.image,
      sx, sy, this.frameWidth, this.frameHeight,
      Math.round(x), Math.round(y), this.frameWidth, this.frameHeight
    )
    ctx.restore()
  }
}

// Usage
const player = new PixelSprite(spriteSheet, 16, 16)
player.addAnimation('idle', [0, 1], 2)
player.addAnimation('walk', [2, 3, 4, 5], 8)
player.addAnimation('jump', [6], 1)

6) Troca de paleta

Uma técnica clássica para recolorir sprites:

function createPaletteSwap(image, oldColors, newColors) {
  const canvas = document.createElement('canvas')
  canvas.width = image.width
  canvas.height = image.height
  const ctx = canvas.getContext('2d')
  
  ctx.drawImage(image, 0, 0)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
  const data = imageData.data
  
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i], g = data[i + 1], b = data[i + 2]
    
    for (let j = 0; j < oldColors.length; j++) {
      const old = oldColors[j]
      if (r === old.r && g === old.g && b === old.b) {
        const newC = newColors[j]
        data[i] = newC.r
        data[i + 1] = newC.g
        data[i + 2] = newC.b
        break
      }
    }
  }
  
  ctx.putImageData(imageData, 0, 0)
  return canvas
}

// Create enemy variant
const blueEnemy = createPaletteSwap(
  enemySprite,
  [{ r: 255, g: 0, b: 0 }],    // Red
  [{ r: 0, g: 100, b: 255 }]   // Blue
)

7) Renderização de mapas de tiles

class Tilemap {
  constructor(tileSize, tilesetImage) {
    this.tileSize = tileSize
    this.tileset = tilesetImage
    this.tilesPerRow = Math.floor(tilesetImage.width / tileSize)
    this.data = []
  }
  
  setData(width, height, tiles) {
    this.width = width
    this.height = height
    this.data = tiles
  }
  
  draw(ctx, cameraX = 0, cameraY = 0) {
    const startCol = Math.floor(cameraX / this.tileSize)
    const startRow = Math.floor(cameraY / this.tileSize)
    const endCol = startCol + Math.ceil(ctx.canvas.width / this.tileSize) + 1
    const endRow = startRow + Math.ceil(ctx.canvas.height / this.tileSize) + 1
    
    for (let row = startRow; row < endRow; row++) {
      for (let col = startCol; col < endCol; col++) {
        if (row < 0 || row >= this.height || col < 0 || col >= this.width) continue
        
        const tileIndex = this.data[row * this.width + col]
        if (tileIndex < 0) continue
        
        const sx = (tileIndex % this.tilesPerRow) * this.tileSize
        const sy = Math.floor(tileIndex / this.tilesPerRow) * this.tileSize
        const dx = Math.round(col * this.tileSize - cameraX)
        const dy = Math.round(row * this.tileSize - cameraY)
        
        ctx.drawImage(
          this.tileset,
          sx, sy, this.tileSize, this.tileSize,
          dx, dy, this.tileSize, this.tileSize
        )
      }
    }
  }
}

8) Efeitos de contorno

Adicione contornos aos sprites para melhorar a visibilidade:

function drawWithOutline(ctx, image, x, y, outlineColor = '#000') {
  const offsets = [[-1, 0], [1, 0], [0, -1], [0, 1]]
  
  // Draw outline
  ctx.globalCompositeOperation = 'source-over'
  for (const [ox, oy] of offsets) {
    ctx.drawImage(image, Math.round(x + ox), Math.round(y + oy))
  }
  
  // Apply color to outline
  ctx.globalCompositeOperation = 'source-in'
  ctx.fillStyle = outlineColor
  ctx.fillRect(x - 1, y - 1, image.width + 2, image.height + 2)
  
  // Draw sprite on top
  ctx.globalCompositeOperation = 'source-over'
  ctx.drawImage(image, Math.round(x), Math.round(y))
}

9) Tremor de tela

Um efeito clássico para melhorar a sensação do jogo:

const camera = {
  x: 0,
  y: 0,
  shakeIntensity: 0,
  shakeDuration: 0,
  
  shake(intensity, duration) {
    this.shakeIntensity = intensity
    this.shakeDuration = duration
  },
  
  update(dt) {
    if (this.shakeDuration > 0) {
      this.shakeDuration -= dt
    }
  },
  
  getOffset() {
    if (this.shakeDuration <= 0) return { x: 0, y: 0 }
    
    return {
      x: Math.round((Math.random() - 0.5) * 2 * this.shakeIntensity),
      y: Math.round((Math.random() - 0.5) * 2 * this.shakeIntensity),
    }
  }
}

// In render:
function render() {
  const shake = camera.getOffset()
  ctx.save()
  ctx.translate(shake.x, shake.y)
  // Draw everything...
  ctx.restore()
}

// On hit:
camera.shake(4, 0.2) // 4 pixel intensity, 0.2 seconds

10) Limitações da paleta de cores

Pixel art autêntica usa paletas limitadas:

const PALETTES = {
  gameboy: ['#0f380f', '#306230', '#8bac0f', '#9bbc0f'],
  nes: ['#000000', '#fcfcfc', '#f8f8f8', '#bcbcbc', /* ... */],
  pico8: [
    '#000000', '#1d2b53', '#7e2553', '#008751',
    '#ab5236', '#5f574f', '#c2c3c7', '#fff1e8',
    '#ff004d', '#ffa300', '#ffec27', '#00e436',
    '#29adff', '#83769c', '#ff77a8', '#ffccaa'
  ],
}

function quantizeColor(r, g, b, palette) {
  let minDist = Infinity
  let closest = palette[0]
  
  for (const color of palette) {
    const pr = parseInt(color.slice(1, 3), 16)
    const pg = parseInt(color.slice(3, 5), 16)
    const pb = parseInt(color.slice(5, 7), 16)
    
    const dist = (r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2
    if (dist < minDist) {
      minDist = dist
      closest = color
    }
  }
  
  return closest
}

Conteúdo relacionado

• Loop de jogo com Canvas 2D
• Canvas responsivo para jogos
• Carregamento de assets por streaming
• Onde encontrar assets gratuitos para jogos — sprite sheets, pacotes de pixel art e fontes de assets 2D
• Renderização de texto em jogos — fontes bitmap que combinam com o estilo da sua pixel art

A API Pointer Lock captura o cursor do mouse, permitindo controles suaves de câmera no estilo FPS. Essencial para jogos de tiro em primeira e terceira pessoa.

1) Solicitando o bloqueio do ponteiro

O bloqueio do ponteiro exige uma interação do usuário:

const canvas = document.getElementById('game')

canvas.addEventListener('click', () => {
  canvas.requestPointerLock()
})

Entrada bruta do mouse (desativar aceleração)

Por padrão, o navegador aplica a aceleração do mouse do sistema operacional a movementX/movementY. Assim, um movimento rápido e um arrasto lento pela mesma distância produzem rotações diferentes da câmera. Para mirar em jogos FPS, geralmente você quer o contrário: a mesma distância física deve sempre girar a câmera na mesma proporção. Solicite movimentos brutos e sem aceleração passando unadjustedMovement: true para requestPointerLock():

canvas.addEventListener('click', async () => {
  try {
    await canvas.requestPointerLock({ unadjustedMovement: true })
  } catch (err) {
    // unadjustedMovement não é compatível aqui; use deltas ajustados pelo sistema operacional
    await canvas.requestPointerLock()
  }
})

A versão moderna de requestPointerLock() retorna uma Promise que é resolvida em caso de sucesso e rejeitada em caso de falha, por isso a chamada acima está envolvida em try/catch. Chrome e Edge oferecem suporte a unadjustedMovement desde a versão 88, e o Safari desde a versão 18.4 (março de 2025), que também corrigiu requestPointerLock para retornar uma Promise. Navegadores mais antigos que não retornam uma Promise ainda funcionam aqui, pois await aceita um valor que não seja uma Promise e a opção desconhecida é simplesmente ignorada. Portanto, sempre mantenha a chamada simples a requestPointerLock() como alternativa.

2) Detectando o estado do bloqueio

document.addEventListener('pointerlockchange', () => {
  if (document.pointerLockElement === canvas) {
    console.log('Ponteiro bloqueado')
    game.mouseLocked = true
  } else {
    console.log('Ponteiro desbloqueado')
    game.mouseLocked = false
  }
})

document.addEventListener('pointerlockerror', () => {
  console.error('Falha ao bloquear o ponteiro')
})

3) Lendo o movimento do mouse

Quando o ponteiro estiver bloqueado, use movementX e movementY:

document.addEventListener('mousemove', (e) => {
  if (document.pointerLockElement !== canvas) return
  
  const sensitivity = 0.002
  camera.yaw -= e.movementX * sensitivity
  camera.pitch -= e.movementY * sensitivity
  
  // Limite a inclinação para evitar que a câmera vire de cabeça para baixo
  camera.pitch = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.pitch))
})

4) Classe de câmera FPS

class FPSCamera {
  constructor() {
    this.position = { x: 0, y: 1.7, z: 0 } // Altura dos olhos
    this.yaw = 0      // Rotação para esquerda/direita
    this.pitch = 0    // Rotação para cima/baixo
    this.sensitivity = 0.002
  }
  
  handleMouseMove(e) {
    this.yaw -= e.movementX * this.sensitivity
    this.pitch -= e.movementY * this.sensitivity
    this.pitch = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, this.pitch))
  }
  
  getForward() {
    return {
      x: Math.sin(this.yaw) * Math.cos(this.pitch),
      y: Math.sin(this.pitch),
      z: Math.cos(this.yaw) * Math.cos(this.pitch),
    }
  }
  
  getRight() {
    return {
      x: Math.cos(this.yaw),
      y: 0,
      z: -Math.sin(this.yaw),
    }
  }
  
  move(forward, right, dt, speed = 5) {
    const fwd = this.getForward()
    const rgt = this.getRight()
    
    // Mova apenas no plano XZ
    this.position.x += (fwd.x * forward + rgt.x * right) * speed * dt
    this.position.z += (fwd.z * forward + rgt.z * right) * speed * dt
  }
  
  getViewMatrix() {
    const forward = this.getForward()
    const target = {
      x: this.position.x + forward.x,
      y: this.position.y + forward.y,
      z: this.position.z + forward.z,
    }
    return lookAt(this.position, target, { x: 0, y: 1, z: 0 })
  }
}

5) Movimento com WASD

const input = {
  forward: false,
  backward: false,
  left: false,
  right: false,
  jump: false,
}

window.addEventListener('keydown', (e) => {
  switch (e.code) {
    case 'KeyW': input.forward = true; break
    case 'KeyS': input.backward = true; break
    case 'KeyA': input.left = true; break
    case 'KeyD': input.right = true; break
    case 'Space': input.jump = true; break
  }
})

window.addEventListener('keyup', (e) => {
  switch (e.code) {
    case 'KeyW': input.forward = false; break
    case 'KeyS': input.backward = false; break
    case 'KeyA': input.left = false; break
    case 'KeyD': input.right = false; break
    case 'Space': input.jump = false; break
  }
})

function update(dt) {
  const moveForward = (input.forward ? 1 : 0) - (input.backward ? 1 : 0)
  const moveRight = (input.right ? 1 : 0) - (input.left ? 1 : 0)
  
  camera.move(moveForward, moveRight, dt)
}

6) Controlador FPS completo

class FPSController {
  constructor(canvas) {
    this.canvas = canvas
    this.camera = new FPSCamera()
    this.locked = false
    this.speed = 5
    this.sprintMultiplier = 1.5
    
    this.input = {
      forward: false, backward: false,
      left: false, right: false,
      jump: false, sprint: false,
    }
    
    this.velocity = { x: 0, y: 0, z: 0 }
    this.onGround = true
    this.gravity = -20
    this.jumpSpeed = 8
    
    this.bindEvents()
  }
  
  bindEvents() {
    this.canvas.addEventListener('click', () => {
      this.canvas.requestPointerLock()
    })
    
    document.addEventListener('pointerlockchange', () => {
      this.locked = document.pointerLockElement === this.canvas
    })
    
    document.addEventListener('mousemove', (e) => {
      if (this.locked) {
        this.camera.handleMouseMove(e)
      }
    })
    
    window.addEventListener('keydown', (e) => this.handleKey(e.code, true))
    window.addEventListener('keyup', (e) => this.handleKey(e.code, false))
  }
  
  handleKey(code, pressed) {
    switch (code) {
      case 'KeyW': this.input.forward = pressed; break
      case 'KeyS': this.input.backward = pressed; break
      case 'KeyA': this.input.left = pressed; break
      case 'KeyD': this.input.right = pressed; break
      case 'Space': this.input.jump = pressed; break
      case 'ShiftLeft': this.input.sprint = pressed; break
    }
  }
  
  update(dt) {
    if (!this.locked) return
    
    const speed = this.speed * (this.input.sprint ? this.sprintMultiplier : 1)
    
    // Movimento horizontal
    const moveForward = (this.input.forward ? 1 : 0) - (this.input.backward ? 1 : 0)
    const moveRight = (this.input.right ? 1 : 0) - (this.input.left ? 1 : 0)
    
    const forward = this.camera.getForward()
    const right = this.camera.getRight()
    
    this.velocity.x = (forward.x * moveForward + right.x * moveRight) * speed
    this.velocity.z = (forward.z * moveForward + right.z * moveRight) * speed
    
    // Salto
    if (this.input.jump && this.onGround) {
      this.velocity.y = this.jumpSpeed
      this.onGround = false
    }
    
    // Gravidade
    if (!this.onGround) {
      this.velocity.y += this.gravity * dt
    }
    
    // Aplique a velocidade
    this.camera.position.x += this.velocity.x * dt
    this.camera.position.y += this.velocity.y * dt
    this.camera.position.z += this.velocity.z * dt
    
    // Colisão simples com o chão
    if (this.camera.position.y < 1.7) {
      this.camera.position.y = 1.7
      this.velocity.y = 0
      this.onGround = true
    }
  }
}

7) Mira

function drawCrosshair(ctx) {
  const cx = ctx.canvas.width / 2
  const cy = ctx.canvas.height / 2
  const size = 10
  const gap = 4
  
  ctx.strokeStyle = '#fff'
  ctx.lineWidth = 2
  
  // Superior
  ctx.beginPath()
  ctx.moveTo(cx, cy - gap)
  ctx.lineTo(cx, cy - gap - size)
  ctx.stroke()
  
  // Inferior
  ctx.beginPath()
  ctx.moveTo(cx, cy + gap)
  ctx.lineTo(cx, cy + gap + size)
  ctx.stroke()
  
  // Esquerda
  ctx.beginPath()
  ctx.moveTo(cx - gap, cy)
  ctx.lineTo(cx - gap - size, cy)
  ctx.stroke()
  
  // Direita
  ctx.beginPath()
  ctx.moveTo(cx + gap, cy)
  ctx.lineTo(cx + gap + size, cy)
  ctx.stroke()
}

8) Atirando com os botões do mouse

document.addEventListener('mousedown', (e) => {
  if (!document.pointerLockElement) return
  
  if (e.button === 0) {
    // Botão esquerdo — disparo primário
    weapon.fire()
  } else if (e.button === 2) {
    // Botão direito — mirar pela mira da arma
    weapon.aimDownSights(true)
  }
})

document.addEventListener('mouseup', (e) => {
  if (e.button === 2) {
    weapon.aimDownSights(false)
  }
})

// Impeça a exibição do menu de contexto
canvas.addEventListener('contextmenu', (e) => e.preventDefault())

9) Configurações de sensibilidade

class Settings {
  constructor() {
    this.mouseSensitivity = parseFloat(localStorage.getItem('sensitivity') || '1.0')
    this.invertY = localStorage.getItem('invertY') === 'true'
  }
  
  save() {
    localStorage.setItem('sensitivity', this.mouseSensitivity.toString())
    localStorage.setItem('invertY', this.invertY.toString())
  }
}

// Aplique no manipulador do mouse
document.addEventListener('mousemove', (e) => {
  if (!locked) return
  
  const sens = settings.mouseSensitivity * 0.002
  camera.yaw -= e.movementX * sens
  camera.pitch -= e.movementY * sens * (settings.invertY ? -1 : 1)
})

10) Aviso de saída

Mostre instruções para sair do bloqueio do ponteiro:

function showLockUI() {
  const ui = document.getElementById('lock-ui')
  
  if (document.pointerLockElement) {
    ui.innerHTML = '<p>Pressione ESC para liberar o mouse</p>'
    ui.style.opacity = '0.5'
    setTimeout(() => ui.style.opacity = '0', 2000)
  } else {
    ui.innerHTML = '<p>Clique para jogar</p>'
    ui.style.opacity = '1'
  }
}

document.addEventListener('pointerlockchange', showLockUI)

Um detalhe importante sobre o aviso de saída: quando o jogador pressiona ESC para sair do bloqueio do ponteiro, o navegador exige uma nova interação do usuário (um clique) antes de permitir outro bloqueio. É por isso que a sobreposição “Clique para jogar” existe. Porém, se o próprio código chamar document.exitPointerLock() (por exemplo, para abrir um menu dentro do jogo), nenhuma nova interação será necessária para bloquear novamente depois. Assim, você poderá reativar o bloqueio por código quando o menu for fechado. Pressionar ESC repetidamente também pode fazer o navegador recusar novas tentativas de bloqueio até que o usuário realize uma ação mais deliberada. Portanto, não tente bloquear o ponteiro automaticamente em pointerlockchange.

Considerações sobre iframes

O bloqueio do ponteiro em iframes exige o atributo allow="pointer-lock":

<iframe 
  src="game.html" 
  allow="pointer-lock; fullscreen"
></iframe>

Verifique se o bloqueio do ponteiro está disponível:

if (!document.pointerLockElement && !('requestPointerLock' in canvas)) {
  showMessage('A captura do mouse não está disponível')
}

Conteúdo relacionado

• Tratamento de entrada em jogos
• API Gamepad
• Fundamentos de WebGL
• Conceitos básicos de WebXR — controles de RV para experiências em primeira pessoa
• Primeiros passos com WebGPU — renderização moderna por GPU para jogos FPS

Recursos externos

• MDN: API Pointer Lock — referência completa da API
• MDN: MouseEvent.movementX — leitura dos deltas do mouse

Os Progressive Web Apps permitem que os jogadores instalem seu jogo e joguem offline. Este tutorial mostra como adicionar suporte a PWA a um jogo web.

1) Manifesto do aplicativo web

Crie manifest.json:

{
  "name": "Meu Jogo Incrível",
  "short_name": "JogoIncrível",
  "description": "Um jogo incrível que você pode jogar offline",
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "landscape",
  "background_color": "#1a1a2e",
  "theme_color": "#4ade80",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Vincule-o no seu HTML:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#4ade80">
<link rel="apple-touch-icon" href="/icons/icon-192.png">

2) Service worker básico

Crie sw.js:

const CACHE_NAME = 'game-v1'

const ASSETS = [
  '/',
  '/index.html',
  '/game.js',
  '/style.css',
  '/assets/sprites.png',
  '/assets/sounds/jump.mp3',
  '/assets/sounds/music.mp3',
]

// Instalação: armazena os recursos em cache
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(ASSETS)
    })
  )
})

// Ativação: limpa caches antigos
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys.filter(key => key !== CACHE_NAME)
            .map(key => caches.delete(key))
      )
    })
  )
})

// Requisição: fornece o conteúdo do cache e recorre à rede se necessário
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request)
    })
  )
})

3) Registre o service worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js')
      console.log('SW registered:', registration.scope)
    } catch (err) {
      console.error('SW registration failed:', err)
    }
  })
}

4) Cache primeiro, com atualização pela rede

Melhor para jogos — carregamento rápido com atualizações em segundo plano:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open(CACHE_NAME).then(async (cache) => {
      const cached = await cache.match(event.request)
      
      // Inicia a requisição de rede em segundo plano
      const fetchPromise = fetch(event.request).then((response) => {
        if (response.ok) {
          cache.put(event.request, response.clone())
        }
        return response
      }).catch(() => null)
      
      // Retorna imediatamente o conteúdo em cache ou aguarda a rede
      return cached || fetchPromise
    })
  )
})

5) Cache versionado para atualizações

const CACHE_VERSION = 'v2'
const STATIC_CACHE = `static-${CACHE_VERSION}`
const DYNAMIC_CACHE = `dynamic-${CACHE_VERSION}`

const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/game.js',
  // ... recursos essenciais que raramente mudam
]

self.addEventListener('install', (event) => {
  self.skipWaiting() // Ativa imediatamente
  
  event.waitUntil(
    caches.open(STATIC_CACHE).then(cache => cache.addAll(STATIC_ASSETS))
  )
})

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys => {
      return Promise.all(
        keys.filter(key => !key.includes(CACHE_VERSION))
            .map(key => caches.delete(key))
      )
    })
  )
  
  clients.claim() // Assume o controle imediatamente
})

6) Como lidar com atualizações do jogo

Avise os jogadores quando houver uma atualização disponível:

// No aplicativo principal
let refreshing = false

navigator.serviceWorker.addEventListener('controllerchange', () => {
  if (!refreshing) {
    refreshing = true
    showUpdateNotification()
  }
})

function showUpdateNotification() {
  const banner = document.createElement('div')
  banner.innerHTML = `
    <p>Jogo atualizado! Recarregue para obter a versão mais recente.</p>
    <button onclick="location.reload()">Recarregar</button>
  `
  banner.className = 'update-banner'
  document.body.appendChild(banner)
}

7) Detecção do modo offline

function updateOnlineStatus() {
  if (navigator.onLine) {
    hideOfflineBanner()
    syncGameData()
  } else {
    showOfflineBanner()
  }
}

window.addEventListener('online', updateOnlineStatus)
window.addEventListener('offline', updateOnlineStatus)

function showOfflineBanner() {
  document.getElementById('offline-banner').style.display = 'block'
}

function hideOfflineBanner() {
  document.getElementById('offline-banner').style.display = 'none'
}

8) Prompt de instalação

let deferredPrompt = null

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault()
  deferredPrompt = e
  showInstallButton()
})

function showInstallButton() {
  const btn = document.getElementById('install-btn')
  btn.style.display = 'block'
  btn.addEventListener('click', installApp)
}

async function installApp() {
  if (!deferredPrompt) return
  
  deferredPrompt.prompt()
  const { outcome } = await deferredPrompt.userChoice
  
  console.log('Install prompt outcome:', outcome)
  deferredPrompt = null
  document.getElementById('install-btn').style.display = 'none'
}

window.addEventListener('appinstalled', () => {
  console.log('App installed!')
  deferredPrompt = null
})

No iOS e no iPadOS, o evento beforeinstallprompt nunca é disparado, portanto o botão de instalação acima só aparece em navegadores baseados no Chromium. Usuários de iPhone e iPad fazem a instalação tocando em Compartilhar e depois em "Adicionar à Tela de Início". Uma mudança ocorrida em 2026 que vale a pena conhecer: a partir do Safari 26 (iOS 26 / iPadOS 26), todo site adicionado à Tela de Início é aberto como um aplicativo web por padrão, com a opção "Abrir como Aplicativo Web" ativada por padrão. Não há mais um requisito de instalabilidade no iOS, embora disponibilizar um manifesto e um service worker ainda proporcione uma experiência offline muito melhor.

9) Sincronização em segundo plano para placares

Atenção ao suporte: a API Background Sync só está implementada em navegadores baseados no Chromium (Chrome, Edge, Opera e Samsung Internet). O Firefox e o Safari (inclusive no iOS) não oferecem suporte a ela, portanto sempre verifique a disponibilidade do recurso e mantenha uma alternativa que envie as pontuações no próximo carregamento normal do aplicativo.

// No service worker
self.addEventListener('sync', (event) => {
  if (event.tag === 'sync-scores') {
    event.waitUntil(syncScores())
  }
})

async function syncScores() {
  const db = await openDB('game', 1)
  const pendingScores = await db.getAll('pending-scores')
  
  for (const score of pendingScores) {
    try {
      await fetch('/api/scores', {
        method: 'POST',
        body: JSON.stringify(score),
        headers: { 'Content-Type': 'application/json' }
      })
      await db.delete('pending-scores', score.id)
    } catch (err) {
      // Tentará novamente na próxima sincronização
      break
    }
  }
}

// No aplicativo principal
async function submitScore(score) {
  try {
    await fetch('/api/scores', { method: 'POST', body: JSON.stringify(score) })
  } catch {
    // Salva para sincronizar depois
    const db = await openDB('game', 1)
    await db.add('pending-scores', { ...score, id: Date.now() })
    
    if ('serviceWorker' in navigator && 'sync' in window.registration) {
      await navigator.serviceWorker.ready
      await registration.sync.register('sync-scores')
    }
  }
}

10) Testes da PWA

Chrome DevTools:

• Application > Service Workers
• Application > Manifest
• Application > Cache Storage
• Network > caixa de seleção Offline

Auditoria do Lighthouse:

• Execute a auditoria de PWA
• Verifique a instalabilidade
• Verifique a capacidade de funcionar offline

Testes em dispositivo real:

• Instale na tela inicial do celular
• Ative o modo avião
• Teste todos os recursos offline

Conteúdo relacionado

• Service workers para armazenar jogos em cache
• Saves de jogos com IndexedDB
• Publique um jogo web que carrega rapidamente
• Jogos web adaptados a dispositivos móveis — controles por toque e gerenciamento da viewport em jogos PWA
• Carregamento de recursos por streaming — estratégias de carregamento que funcionam com o cache do service worker

Recursos externos

• MDN: Progressive Web Apps — documentação completa sobre PWA
• web.dev: Aprenda PWA — trilha de aprendizagem sobre PWA do Google
• MDN: Manifesto de Aplicativo Web — referência do arquivo de manifesto

Um canvas que não é dimensionado corretamente fica borrado ou apresenta problemas em diferentes tamanhos de tela. Já depurei esse problema mais vezes do que consigo contar, então vou poupar você desse trabalho.

Experimente diferentes modos de dimensionamento:

const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

function resize() {
  const dpr = window.devicePixelRatio || 1
  const width = window.innerWidth
  const height = window.innerHeight
  
  // Define a resolução interna para corresponder aos pixels físicos
  canvas.width = width * dpr
  canvas.height = height * dpr
  
  // Define o tamanho do CSS para corresponder aos pixels lógicos
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  
  // Dimensiona o contexto para que você possa desenhar em pixels lógicos
  ctx.scale(dpr, dpr)
}

window.addEventListener('resize', resize)
resize()

const GAME_WIDTH = 1920
const GAME_HEIGHT = 1080
const ASPECT = GAME_WIDTH / GAME_HEIGHT

function resizeWithLetterbox() {
  const windowWidth = window.innerWidth
  const windowHeight = window.innerHeight
  const windowAspect = windowWidth / windowHeight
  
  let width, height
  
  if (windowAspect > ASPECT) {
    // A janela é mais larga que o jogo; adiciona barras nas laterais
    height = windowHeight
    width = height * ASPECT
  } else {
    // A janela é mais alta que o jogo; adiciona barras em cima e embaixo
    width = windowWidth
    height = width / ASPECT
  }
  
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  canvas.style.position = 'absolute'
  canvas.style.left = (windowWidth - width) / 2 + 'px'
  canvas.style.top = (windowHeight - height) / 2 + 'px'
  
  // A resolução interna permanece fixa
  canvas.width = GAME_WIDTH
  canvas.height = GAME_HEIGHT
}

body {
  margin: 0;
  background: #000;
  overflow: hidden;
}

const GAME_WIDTH = 320
const GAME_HEIGHT = 180

function resizePixelPerfect() {
  const maxWidth = window.innerWidth
  const maxHeight = window.innerHeight
  
  // Encontra a maior escala inteira que cabe na tela
  const scaleX = Math.floor(maxWidth / GAME_WIDTH)
  const scaleY = Math.floor(maxHeight / GAME_HEIGHT)
  const scale = Math.max(1, Math.min(scaleX, scaleY))
  
  const width = GAME_WIDTH * scale
  const height = GAME_HEIGHT * scale
  
  canvas.width = GAME_WIDTH
  canvas.height = GAME_HEIGHT
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  canvas.style.imageRendering = 'pixelated'
}

function resizeGL(gl, canvas) {
  const dpr = window.devicePixelRatio || 1
  const width = canvas.clientWidth * dpr
  const height = canvas.clientHeight * dpr
  
  if (canvas.width !== width || canvas.height !== height) {
    canvas.width = width
    canvas.height = height
    gl.viewport(0, 0, width, height)
    return true // Redimensionado; talvez seja necessário atualizar as matrizes de projeção
  }
  return false
}

let resizeTimeout
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout)
  resizeTimeout = setTimeout(resize, 100)
})

const observer = new ResizeObserver(entries => {
  resize()
})
observer.observe(document.body)

async function toggleFullscreen() {
  if (!document.fullscreenElement) {
    await canvas.requestFullscreen()
  } else {
    await document.exitFullscreen()
  }
}

document.addEventListener('fullscreenchange', resize)

class ResponsiveCanvas {
  constructor(canvas, options = {}) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.gameWidth = options.width || 1280
    this.gameHeight = options.height || 720
    this.pixelArt = options.pixelArt || false
    this.letterbox = options.letterbox !== false
    
    this.bind()
    this.resize()
  }
  
  bind() {
    window.addEventListener('resize', () => this.resize())
    document.addEventListener('fullscreenchange', () => this.resize())
  }
  
  resize() {
    const aspect = this.gameWidth / this.gameHeight
    let width = window.innerWidth
    let height = window.innerHeight
    
    if (this.letterbox) {
      if (width / height > aspect) {
        width = height * aspect
      } else {
        height = width / aspect
      }
    }
    
    if (this.pixelArt) {
      const scale = Math.max(1, Math.floor(Math.min(
        window.innerWidth / this.gameWidth,
        window.innerHeight / this.gameHeight
      )))
      width = this.gameWidth * scale
      height = this.gameHeight * scale
    }
    
    this.canvas.width = this.gameWidth
    this.canvas.height = this.gameHeight
    this.canvas.style.width = width + 'px'
    this.canvas.style.height = height + 'px'
    this.canvas.style.position = 'absolute'
    this.canvas.style.left = (window.innerWidth - width) / 2 + 'px'
    this.canvas.style.top = (window.innerHeight - height) / 2 + 'px'
    
    if (this.pixelArt) {
      this.canvas.style.imageRendering = 'pixelated'
    }
  }
  
  get width() { return this.gameWidth }
  get height() { return this.gameHeight }
}

const responsive = new ResponsiveCanvas(document.getElementById('game'), {
  width: 320,
  height: 180,
  pixelArt: true,
  letterbox: true
})

// No código do jogo, use responsive.width e responsive.height

Os service workers permitem controlar como os recursos são armazenados em cache e entregues. Para jogos, isso significa carregamento instantâneo em visitas recorrentes e suporte offline.

1) Noções básicas de service workers

Crie sw.js na raiz:

// sw.js
self.addEventListener('install', (event) => {
  console.log('Service worker installing')
})

self.addEventListener('activate', (event) => {
  console.log('Service worker activated')
})

self.addEventListener('fetch', (event) => {
  // Intercept all network requests
})

Registre-o:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered'))
    .catch(err => console.error('SW registration failed:', err))
}

2) Estratégia cache-first (a melhor para recursos de jogos)

Carregue do cache e só busque na rede se o recurso não estiver armazenado:

const CACHE_NAME = 'game-assets-v1'

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      if (cached) {
        return cached
      }
      
      return fetch(event.request).then((response) => {
        // Don't cache non-ok responses or non-GET requests
        if (!response.ok || event.request.method !== 'GET') {
          return response
        }
        
        // Clone response for caching
        const clone = response.clone()
        caches.open(CACHE_NAME).then((cache) => {
          cache.put(event.request, clone)
        })
        
        return response
      })
    })
  )
})

3) Pré-armazenamento de recursos essenciais

O evento de instalação é perfeito para o pré-armazenamento em cache:

const CACHE_NAME = 'game-v1'

const PRECACHE = [
  '/',
  '/index.html',
  '/game.js',
  '/style.css',
  '/assets/sprites.png',
  '/assets/tileset.png',
  '/assets/player.png',
]

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE))
      .then(() => self.skipWaiting())
  )
})

4) Network-first para conteúdo dinâmico

Use network-first para itens que mudam (rankings, dados de jogadores):

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url)
  
  // API calls: network first
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request))
    return
  }
  
  // Assets: cache first
  event.respondWith(cacheFirst(event.request))
})

async function networkFirst(request) {
  try {
    const response = await fetch(request)
    const cache = await caches.open('api-cache')
    cache.put(request, response.clone())
    return response
  } catch {
    return caches.match(request)
  }
}

async function cacheFirst(request) {
  const cached = await caches.match(request)
  if (cached) return cached
  
  const response = await fetch(request)
  const cache = await caches.open(CACHE_NAME)
  cache.put(request, response.clone())
  return response
}

5) Stale-while-revalidate

Retorne o conteúdo armazenado em cache imediatamente e atualize-o em segundo plano:

async function staleWhileRevalidate(request) {
  const cache = await caches.open(CACHE_NAME)
  const cached = await cache.match(request)
  
  const fetchPromise = fetch(request).then((response) => {
    if (response.ok) {
      cache.put(request, response.clone())
    }
    return response
  })
  
  return cached || fetchPromise
}

6) Versionamento e limpeza do cache

Remova caches antigos durante a ativação:

const CACHE_VERSION = 'v2'
const CACHE_NAME = `game-${CACHE_VERSION}`

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys
          .filter(key => key.startsWith('game-') && key !== CACHE_NAME)
          .map(key => {
            console.log('Deleting old cache:', key)
            return caches.delete(key)
          })
      )
    }).then(() => self.clients.claim())
  )
})

7) Caches separados por tipo

Organize os caches para facilitar o gerenciamento:

const CACHES = {
  static: 'static-v1',    // HTML, JS, CSS
  images: 'images-v1',    // Sprites, textures
  audio: 'audio-v1',      // Music, SFX
  api: 'api-v1',          // API responses
}

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url)
  
  if (url.pathname.match(/\.(png|jpg|webp)$/)) {
    event.respondWith(cacheFirst(event.request, CACHES.images))
  } else if (url.pathname.match(/\.(mp3|ogg|wav)$/)) {
    event.respondWith(cacheFirst(event.request, CACHES.audio))
  } else if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request, CACHES.api))
  } else {
    event.respondWith(cacheFirst(event.request, CACHES.static))
  }
})

8) Solicitações de intervalo para áudio e vídeo

Uma coisa que você precisa saber desde o início: a Cache API não armazena respostas parciais. Se uma resposta 206 Partial Content chegar a cache.put(), será lançado TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported. Portanto, o padrão para mídia armazenada em cache é sempre o mesmo: pré-armazenar (ou buscar) o arquivo completo como uma resposta 200 normal e, em seguida, criar a resposta 206 fazendo o recorte dos bytes armazenados em cache sempre que uma solicitação chegar com um cabeçalho Range. Se preferir não implementar isso manualmente, o plugin range-requests do Workbox faz exatamente esse recorte quando combinado com uma estratégia CacheFirst.

Processe corretamente as solicitações de intervalo (necessárias para avançar ou retroceder no áudio):

self.addEventListener('fetch', (event) => {
  if (event.request.headers.has('range')) {
    event.respondWith(handleRangeRequest(event.request))
    return
  }
  // ... normal handling
})

async function handleRangeRequest(request) {
  const cache = await caches.open(CACHES.audio)
  // Match the full resource, ignoring the Range header (which would never match a cached full file)
  let cached = await cache.match(request.url)

  if (!cached) {
    // Fetch the FULL file (string URL drops the Range header) and cache it as a 200
    cached = await fetch(request.url)
    if (cached.ok) cache.put(request.url, cached.clone()) // cache.put rejects 206, so only store full 200s
  }

  // Build a 206 Partial Content response from the cached full body
  const rangeHeader = request.headers.get('range') // e.g. "bytes=200-1000"
  const buffer = await cached.arrayBuffer()
  const total = buffer.byteLength
  const [startStr, endStr] = rangeHeader.replace(/bytes=/, '').split('-')
  const start = Number(startStr)
  const end = endStr ? Number(endStr) : total - 1
  const slice = buffer.slice(start, end + 1)

  return new Response(slice, {
    status: 206,
    statusText: 'Partial Content',
    headers: {
      'Content-Type': cached.headers.get('Content-Type') || 'application/octet-stream',
      'Content-Range': `bytes ${start}-${end}/${total}`,
      'Content-Length': String(slice.byteLength),
      'Accept-Ranges': 'bytes',
    },
  })
}

9) Notificação de atualização

Avise aos jogadores quando uma nova versão estiver pronta:

// In main app
let refreshing = false

navigator.serviceWorker.addEventListener('controllerchange', () => {
  if (refreshing) return
  refreshing = true
  
  showUpdateBanner()
})

function showUpdateBanner() {
  const banner = document.createElement('div')
  banner.className = 'update-banner'
  banner.innerHTML = `
    <span>New version available!</span>
    <button onclick="location.reload()">Update</button>
  `
  document.body.appendChild(banner)
}

10) Service worker completo para jogos

const VERSION = 'v1'
const STATIC_CACHE = `static-${VERSION}`
const ASSET_CACHE = `assets-${VERSION}`

const PRECACHE_URLS = [
  '/',
  '/index.html',
  '/game.js',
  '/style.css',
]

// Install: precache critical resources
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(STATIC_CACHE)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting())
  )
})

// Activate: clean old caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys
        .filter(key => !key.endsWith(VERSION))
        .map(key => caches.delete(key))
    )).then(() => self.clients.claim())
  )
})

// Fetch: route requests to appropriate strategy
self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url)
  
  // Same-origin only
  if (url.origin !== location.origin) {
    return
  }
  
  // API: network first with cache fallback
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request, 'api-cache'))
    return
  }
  
  // Assets: cache first
  if (url.pathname.startsWith('/assets/')) {
    event.respondWith(cacheFirst(event.request, ASSET_CACHE))
    return
  }
  
  // HTML/JS/CSS: stale while revalidate
  event.respondWith(staleWhileRevalidate(event.request, STATIC_CACHE))
})

async function cacheFirst(request, cacheName) {
  const cached = await caches.match(request)
  if (cached) return cached
  
  try {
    const response = await fetch(request)
    if (response.ok) {
      const cache = await caches.open(cacheName)
      cache.put(request, response.clone())
    }
    return response
  } catch {
    return new Response('Offline', { status: 503 })
  }
}

async function networkFirst(request, cacheName) {
  try {
    const response = await fetch(request)
    if (response.ok) {
      const cache = await caches.open(cacheName)
      cache.put(request, response.clone())
    }
    return response
  } catch {
    return caches.match(request) || new Response('Offline', { status: 503 })
  }
}

async function staleWhileRevalidate(request, cacheName) {
  const cache = await caches.open(cacheName)
  const cached = await cache.match(request)
  
  const fetchPromise = fetch(request).then(response => {
    if (response.ok) {
      cache.put(request, response.clone())
    }
    return response
  }).catch(() => cached)
  
  return cached || fetchPromise
}

Conteúdo relacionado

• PWA para jogos offline
• Carregamento de recursos por streaming
• Publique um jogo web que carrega rapidamente
• Web Audio API para jogos — armazenamento de recursos de áudio em cache para jogar offline
• Saves de jogos com IndexedDB — persistência do estado do jogo junto aos recursos armazenados em cache

Recursos externos

• MDN: API Service Worker — referência completa da API
• MDN: API Cache — referência da interface Cache
• web.dev: Service workers — estratégias e padrões de armazenamento em cache
• Workbox — biblioteca do Google com ferramentas para service workers

Se os jogadores não conseguem começar a jogar em poucos segundos, eles desistem. Este tutorial é um checklist prático que você pode aplicar a praticamente qualquer stack de jogos para web (Canvas/WebGL/WebGPU, Pixi/Three/PlayCanvas, engine própria etc.).

1) Defina os limites primeiro (ou você não conseguirá otimizar)

Escolha limites adequados ao dispositivo-alvo. Uma boa configuração padrão para uma experiência de “jogar na hora”:

• JS+CSS enviados: menos de ~300–500 KB com gzip (quanto menor, melhor)
• Recursos críticos antes da primeira interação: menos de ~2–5 MB compactados
• Tempo até a primeira interação: menos de ~3–5 segundos em um celular intermediário

Anote esses limites e trate-os como contratos de API.

2) Meça as coisas certas

No Chrome DevTools:

• Use Performance para capturar uma sessão e inspecionar tarefas longas.
• Use Network para verificar:
  • tamanho transferido em comparação com o tamanho decodificado
  • cabeçalhos de cache
  • se os recursos são transmitidos progressivamente ou chegam como um único arquivo enorme

Em termos de jogo, acompanhe:

• Tempo até “O jogador consegue se mover?”
• Tempo até o “Primeiro frame significativo”
• “Latência da primeira interação” (interação → frame)

Sua noção de “latência da primeira interação” agora corresponde a uma métrica padrão: a Interaction to Next Paint (INP) substituiu a First Input Delay como uma das Core Web Vitals em março de 2024 e mede o tempo completo entre a interação e a próxima renderização em todas as interações, não apenas na primeira. Procure manter a INP abaixo de 200 ms no 75º percentil, uma referência externa útil para os números de responsividade que você já acompanha.

3) Comprima tudo o que puder

Certifique-se de que sua hospedagem forneça:

• Brotli (br) para recursos de texto (JS/CSS/HTML/WASM), quando disponível
• gzip como alternativa

Se sua hospedagem e CDN oferecerem suporte, Zstandard (zstd) agora é uma terceira opção para Content-Encoding. Ele está disponível no Chrome e Edge 123+, Firefox 126+ e Safari 26.3+ (cerca de 80% dos usuários) e pode alcançar taxas de compressão comparáveis às do Brotli com um custo de CPU menor no servidor, o que ajuda com arquivos WASM e JSON grandes. Os navegadores só anunciam Accept-Encoding: zstd por HTTPS, portanto mantenha Brotli e gzip configurados como alternativas para todos os demais.

Em builds com WebAssembly, a compressão muitas vezes faz a diferença entre “instantâneo” e “nunca carrega”.

4) Não baixe o mundo inteiro logo no início

Divida seu jogo em:

• Inicialização: carregador mínimo + entrada + primeira cena
• Núcleo: principais sistemas de jogabilidade
• Opcional: fases extras, itens cosméticos, texturas em alta resolução, áudio bônus etc.

Carregue o conteúdo “Opcional” somente depois que:

• o jogador já puder jogar e/ou
• você souber que ele quer esse conteúdo (por exemplo, porque chegou a um menu ou fase)

5) Escolha os formatos de recursos certos

Para a maioria dos jogos para web:

• Imagens: prefira WebP (ou AVIF, se puder tolerar uma codificação mais lenta) para interfaces e planos de fundo.
• Áudio: prefira Ogg Vorbis para uso geral; teste AAC nos ecossistemas da Apple.
• Vídeo: prefira MP4/H.264 pela compatibilidade e WebM quando houver suporte e o arquivo for menor.

Fique atento ao custo de decodificação: um “download menor” ainda pode ser “mais lento para decodificar”.

6) Mantenha sua primeira cena pequena e determinística

Evite o seguinte em sua primeira cena interativa:

• picos de compilação de shaders
• uploads de texturas enormes
• geração procedural que bloqueia a thread principal
• análise síncrona de blocos JSON com vários megabytes

Especificamente para texturas, distribua KTX2 com supercompressão Basis Universal em vez de PNG ou JPEG. A textura permanece compactada na GPU após o upload (sendo transcodificada para BC7 em desktops ou ASTC em dispositivos móveis durante o carregamento), o que reduz o uso de VRAM de 4 a 8 vezes e torna os uploads muito menos custosos do que decodificar um PNG em tamanho completo e enviar os pixels brutos para a GPU.

Se precisar executar um processamento pesado, faça isso:

• de forma incremental ao longo dos frames ou
• em um Worker (quando possível)

7) Use cache de forma agressiva (mas corretamente)

Use cache de longa duração para recursos endereçados por conteúdo:

• Cache-Control: public, max-age=31536000, immutable

Para os pontos de entrada HTML, mantenha o cache curto para poder publicar atualizações com segurança.

8) Torne as “falhas” rápidas e compreensíveis

Se algo der errado, exiba:

• uma mensagem de erro clara
• um botão para tentar novamente
• um link para relatar o problema

Falhas silenciosas acabam com a confiança.

9) Se você usa threads em Wasm, entenda COOP/COEP

Se sua build depende de SharedArrayBuffer (algo comum em algumas configurações de threading com Wasm), provavelmente serão necessários cabeçalhos de isolamento entre origens:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

Você tem duas opções para o cabeçalho COEP. require-corp é a opção mais rigorosa, mas exige que todos os recursos de outra origem (texturas de CDN e scripts de terceiros) enviem um cabeçalho Cross-Origin-Resource-Policy; caso contrário, eles serão bloqueados. Cross-Origin-Embedder-Policy: credentialless também libera o SharedArrayBuffer e o isolamento entre origens, mas carrega recursos de outras origens sem credenciais em vez de exigir que eles aceitem isso por meio de CORP. Se você obtém recursos de uma CDN que não controla, credentialless geralmente é o caminho menos trabalhoso.

Faça testes desde o início em sua hospedagem real, pois os cabeçalhos e conteúdos incorporados de terceiros podem causar problemas.

10) Torne o jogo executável sem um SDK

Se você pretende usar o fluxo de trabalho para criadores da Cinevva, procure oferecer:

• uma única URL que inicialize o jogo de forma confiável
• nenhum login obrigatório para iniciar uma demonstração
• controles de entrada previsíveis

Assim, você estará pronto para distribuir seu jogo sem integrar SDKs adicionais.

Relacionado:

• Para criadores de jogos
• Política sobre conteúdo gerado por IA
• Carregamento de recursos por streaming — padrões de carregamento progressivo para jogos grandes
• Service workers para cache de jogos — armazene recursos em cache para visitas repetidas instantâneas
• Comparação de engines de jogos para web — tamanhos de build e tempos de carregamento entre diferentes engines
• Como lançar seu jogo no itch.io — otimização de jogos para navegador incorporados ao itch.io

Os jogadores não vão esperar por um download de 100 MB. Carregue os assets progressivamente para que possam jogar enquanto o restante é carregado em segundo plano.

1) A estratégia de carregamento

Divida os assets em categorias:

1. Críticos — Necessários para exibir a primeira tela (< 1 MB)
2. Jogabilidade — Necessários para jogar (< 10 MB)
3. Aprimoramentos — Opcionais (carregados em segundo plano)

2) Carregador básico de assets

class AssetLoader {
  constructor() {
    this.cache = new Map()
    this.loading = new Map()
  }
  
  async loadImage(url) {
    if (this.cache.has(url)) return this.cache.get(url)
    if (this.loading.has(url)) return this.loading.get(url)
    
    const promise = new Promise((resolve, reject) => {
      const img = new Image()
      img.onload = () => {
        this.cache.set(url, img)
        this.loading.delete(url)
        resolve(img)
      }
      img.onerror = reject
      img.src = url
    })
    
    this.loading.set(url, promise)
    return promise
  }
  
  async loadJSON(url) {
    if (this.cache.has(url)) return this.cache.get(url)
    
    const response = await fetch(url)
    const data = await response.json()
    this.cache.set(url, data)
    return data
  }
  
  async loadAudio(url, audioCtx) {
    if (this.cache.has(url)) return this.cache.get(url)
    
    const response = await fetch(url)
    const buffer = await response.arrayBuffer()
    const audioBuffer = await audioCtx.decodeAudioData(buffer)
    this.cache.set(url, audioBuffer)
    return audioBuffer
  }
}

3) Carregamento com progresso

async function loadWithProgress(url, onProgress) {
  const response = await fetch(url)
  const contentLength = response.headers.get('Content-Length')
  const total = parseInt(contentLength, 10)
  
  const reader = response.body.getReader()
  const chunks = []
  let received = 0
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    
    chunks.push(value)
    received += value.length
    onProgress(received / total)
  }
  
  const blob = new Blob(chunks)
  return blob
}

Atenção: quando o servidor comprime a resposta (com gzip ou brotli, como a maioria das CDNs faz por padrão), Content-Length representa o tamanho compactado, enquanto os blocos que você lê já estão descompactados. Isso faz com que received / total ultrapasse 100%. Para obter uma barra de progresso precisa em nível de bytes para respostas compactadas, sirva o asset sem compactação, envie um cabeçalho próprio com o tamanho descompactado ou use como alternativa o evento onprogress do XMLHttpRequest, que informa o progresso real da transferência.

4) Carregamento em lote com progresso geral

async function loadAssets(manifest, onProgress) {
  const total = manifest.length
  let completed = 0
  const results = {}
  
  const promises = manifest.map(async (item) => {
    const asset = await loadAsset(item.url, item.type)
    results[item.name] = asset
    completed++
    onProgress(completed / total, item.name)
  })
  
  await Promise.all(promises)
  return results
}

// Uso
const manifest = [
  { name: 'player', url: 'player.png', type: 'image' },
  { name: 'level1', url: 'level1.json', type: 'json' },
  { name: 'music', url: 'music.mp3', type: 'audio' },
]

const assets = await loadAssets(manifest, (progress, name) => {
  console.log(`Carregando: ${Math.round(progress * 100)}% (${name})`)
})

5) Carregador com fila de prioridade

class PriorityLoader {
  constructor(concurrency = 4) {
    this.queue = []
    this.active = 0
    this.concurrency = concurrency
  }
  
  add(url, priority = 0) {
    return new Promise((resolve, reject) => {
      this.queue.push({ url, priority, resolve, reject })
      this.queue.sort((a, b) => b.priority - a.priority)
      this.process()
    })
  }
  
  async process() {
    if (this.active >= this.concurrency || this.queue.length === 0) return
    
    this.active++
    const { url, resolve, reject } = this.queue.shift()
    
    try {
      const response = await fetch(url)
      const blob = await response.blob()
      resolve(blob)
    } catch (err) {
      reject(err)
    }
    
    this.active--
    this.process()
  }
}

// Uso
const loader = new PriorityLoader()
loader.add('critical.png', 10)  // Carregar primeiro
loader.add('optional.png', 1)   // Carregar depois

6) Carregamento sob demanda para fases

class LevelManager {
  constructor(loader) {
    this.loader = loader
    this.levels = new Map()
  }
  
  async preload(levelId) {
    if (this.levels.has(levelId)) return
    
    const manifest = await this.loader.loadJSON(`levels/${levelId}/manifest.json`)
    const assets = await this.loadLevelAssets(manifest)
    this.levels.set(levelId, { manifest, assets })
  }
  
  async loadLevelAssets(manifest) {
    // Carregar somente o necessário para esta fase
    const assets = {}
    
    for (const texture of manifest.textures) {
      assets[texture.name] = await this.loader.loadImage(texture.url)
    }
    
    return assets
  }
  
  unload(levelId) {
    this.levels.delete(levelId)
    // Os assets podem ser coletados pelo garbage collector
  }
}

7) Streaming de arquivos grandes

Para arquivos grandes (modelos 3D, áudio), faça o streaming e processe-os de forma incremental:

async function streamLargeFile(url, onChunk) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    onChunk(value)
  }
}

// Para áudio: use Media Source Extensions
// Para 3D: processe os dados da malha conforme chegam

8) Cache dos assets carregados

Combine com o IndexedDB para ter um cache persistente:

class CachedLoader {
  constructor() {
    this.memCache = new Map()
    this.dbName = 'AssetCache'
  }
  
  async loadImage(url) {
    // Verificar a memória
    if (this.memCache.has(url)) return this.memCache.get(url)
    
    // Verificar o IndexedDB
    const cached = await this.getFromDB(url)
    if (cached) {
      const img = await this.blobToImage(cached)
      this.memCache.set(url, img)
      return img
    }
    
    // Buscar e armazenar em cache
    const response = await fetch(url)
    const blob = await response.blob()
    await this.saveToDB(url, blob)
    
    const img = await this.blobToImage(blob)
    this.memCache.set(url, img)
    return img
  }
  
  blobToImage(blob) {
    return new Promise((resolve) => {
      const img = new Image()
      img.onload = () => {
        URL.revokeObjectURL(img.src)
        resolve(img)
      }
      img.src = URL.createObjectURL(blob)
    })
  }
  
  // Métodos do IndexedDB...
}

9) Padrão de tela de carregamento

class LoadingScreen {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.progress = 0
    this.message = 'Carregando...'
  }
  
  update(progress, message) {
    this.progress = progress
    this.message = message || this.message
    this.render()
  }
  
  render() {
    const { ctx, canvas } = this
    ctx.fillStyle = '#1a1a2e'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    
    // Barra de progresso
    const barWidth = canvas.width * 0.6
    const barHeight = 20
    const x = (canvas.width - barWidth) / 2
    const y = canvas.height / 2
    
    ctx.fillStyle = '#333'
    ctx.fillRect(x, y, barWidth, barHeight)
    
    ctx.fillStyle = '#4ade80'
    ctx.fillRect(x, y, barWidth * this.progress, barHeight)
    
    // Texto
    ctx.fillStyle = '#fff'
    ctx.font = '16px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(this.message, canvas.width / 2, y - 20)
    ctx.fillText(`${Math.round(this.progress * 100)}%`, canvas.width / 2, y + 50)
  }
}

10) Boas práticas

• Mostre algo imediatamente — até mesmo uma imagem estática
• Carregue primeiro o que está visível — texturas da visualização atual
• Use placeholders — imagens de baixa resolução que são substituídas por versões melhores
• Pré-carregue a próxima fase — enquanto o jogador ainda está jogando
• Trate as falhas de forma adequada — lógica de novas tentativas e alternativas

async function loadWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await fetch(url)
    } catch (err) {
      if (i === maxRetries - 1) throw err
      await new Promise(r => setTimeout(r, 1000 * (i + 1)))
    }
  }
}

Conteúdo relacionado

• Publique um jogo web que carregue rapidamente
• Service workers para cache de jogos
• Saves de jogos com IndexedDB
• Web Workers para a lógica do jogo — decodifique e processe assets fora da thread principal
• Onde encontrar assets gratuitos para jogos — fontes de modelos 3D, texturas e áudio para streaming

Recursos externos

• MDN: API Fetch — respostas por streaming e ReadableStream
• MDN: ReadableStream — processamento de blocos de dados transmitidos por streaming
• Especificação glTF 2.0 — o formato padrão para streaming de assets 3D

O texto está em toda parte nos jogos — pontuações, diálogos, menus e números de dano. Este tutorial aborda diferentes técnicas e quando usar cada uma.

1) Noções básicas de texto no Canvas

A abordagem mais simples:

ctx.font = '24px Arial'
ctx.fillStyle = '#ffffff'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('Pontuação: 1000', canvas.width / 2, 50)

Se você precisar de um espaçamento mais compacto ou mais amplo em títulos e rótulos da HUD, o contexto do Canvas agora oferece suporte direto a letterSpacing e wordSpacing. Ambos aceitam strings de comprimento CSS e alcançaram o status Baseline entre navegadores em 2025, então você não precisa mais desenhar os glifos um por um para simular o kerning:

ctx.font = '24px sans-serif'
ctx.letterSpacing = '2px'
ctx.wordSpacing = '6px'
ctx.fillText('FIM DE JOGO', 100, 100)

Redefina ambos como '0px' quando terminar, pois eles permanecem no contexto, assim como font e fillStyle.

2) Texto com contorno

function drawTextWithOutline(ctx, text, x, y, fillColor, outlineColor, outlineWidth = 2) {
  ctx.font = '24px Arial'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  
  ctx.strokeStyle = outlineColor
  ctx.lineWidth = outlineWidth
  ctx.strokeText(text, x, y)
  
  ctx.fillStyle = fillColor
  ctx.fillText(text, x, y)
}

drawTextWithOutline(ctx, 'FIM DE JOGO', 400, 300, '#fff', '#000', 3)

3) Texto com sombra

function drawTextWithShadow(ctx, text, x, y, color, shadowOffset = 2) {
  ctx.font = '32px sans-serif'
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  
  // Shadow
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
  ctx.fillText(text, x + shadowOffset, y + shadowOffset)
  
  // Main text
  ctx.fillStyle = color
  ctx.fillText(text, x, y)
}

4) Renderização com fonte bitmap

Para jogos em pixel art ou para manter uma aparência consistente entre plataformas:

class BitmapFont {
  constructor(image, charWidth, charHeight, chars) {
    this.image = image
    this.charWidth = charWidth
    this.charHeight = charHeight
    this.chars = chars
  }
  
  draw(ctx, text, x, y, scale = 1) {
    const w = this.charWidth * scale
    const h = this.charHeight * scale
    
    for (let i = 0; i < text.length; i++) {
      const charIndex = this.chars.indexOf(text[i].toUpperCase())
      if (charIndex === -1) continue
      
      const sx = (charIndex % 16) * this.charWidth
      const sy = Math.floor(charIndex / 16) * this.charHeight
      
      ctx.drawImage(
        this.image,
        sx, sy, this.charWidth, this.charHeight,
        Math.round(x + i * w), Math.round(y), w, h
      )
    }
  }
  
  measureText(text, scale = 1) {
    return text.length * this.charWidth * scale
  }
}

// Usage
const font = new BitmapFont(fontImage, 8, 8, 
  'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,!?-+:; '
)
font.draw(ctx, 'PONTOS: 1000', 10, 10, 2)

5) Texto pré-renderizado para melhorar o desempenho

Para textos estáticos, renderize uma vez e reutilize:

function createTextImage(text, font, color) {
  const tempCanvas = document.createElement('canvas')
  const tempCtx = tempCanvas.getContext('2d')
  
  tempCtx.font = font
  const metrics = tempCtx.measureText(text)
  
  tempCanvas.width = Math.ceil(metrics.width)
  tempCanvas.height = parseInt(font) * 1.5
  
  tempCtx.font = font
  tempCtx.fillStyle = color
  tempCtx.textBaseline = 'top'
  tempCtx.fillText(text, 0, 0)
  
  return tempCanvas
}

// Create once
const titleImage = createTextImage('MEU JOGO', '48px Impact', '#fff')

// Draw many times (fast)
ctx.drawImage(titleImage, x, y)

6) Efeito de máquina de escrever

class TypewriterText {
  constructor(text, x, y, charsPerSecond = 20) {
    this.fullText = text
    this.x = x
    this.y = y
    this.speed = 1 / charsPerSecond
    this.timer = 0
    this.charIndex = 0
  }
  
  update(dt) {
    this.timer += dt
    while (this.timer >= this.speed && this.charIndex < this.fullText.length) {
      this.charIndex++
      this.timer -= this.speed
    }
  }
  
  draw(ctx) {
    ctx.font = '18px monospace'
    ctx.fillStyle = '#fff'
    ctx.fillText(this.fullText.slice(0, this.charIndex), this.x, this.y)
  }
  
  isComplete() {
    return this.charIndex >= this.fullText.length
  }
  
  skip() {
    this.charIndex = this.fullText.length
  }
}

7) Texto com quebra automática de linha

function wrapText(ctx, text, maxWidth) {
  const words = text.split(' ')
  const lines = []
  let currentLine = ''
  
  for (const word of words) {
    const testLine = currentLine ? currentLine + ' ' + word : word
    const metrics = ctx.measureText(testLine)
    
    if (metrics.width > maxWidth && currentLine) {
      lines.push(currentLine)
      currentLine = word
    } else {
      currentLine = testLine
    }
  }
  
  if (currentLine) lines.push(currentLine)
  return lines
}

function drawWrappedText(ctx, text, x, y, maxWidth, lineHeight) {
  const lines = wrapText(ctx, text, maxWidth)
  for (let i = 0; i < lines.length; i++) {
    ctx.fillText(lines[i], x, y + i * lineHeight)
  }
}

8) Sistema de caixas de diálogo

class DialogueBox {
  constructor(x, y, width, height) {
    this.x = x
    this.y = y
    this.width = width
    this.height = height
    this.padding = 16
    this.lineHeight = 24
    this.text = ''
    this.displayedChars = 0
    this.charsPerSecond = 30
    this.timer = 0
  }
  
  show(text) {
    this.text = text
    this.displayedChars = 0
    this.timer = 0
  }
  
  update(dt) {
    if (this.displayedChars < this.text.length) {
      this.timer += dt
      const charsToAdd = Math.floor(this.timer * this.charsPerSecond)
      this.displayedChars = Math.min(this.displayedChars + charsToAdd, this.text.length)
      this.timer = this.timer % (1 / this.charsPerSecond)
    }
  }
  
  skip() {
    this.displayedChars = this.text.length
  }
  
  isComplete() {
    return this.displayedChars >= this.text.length
  }
  
  draw(ctx) {
    // Box background
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
    ctx.fillRect(this.x, this.y, this.width, this.height)
    
    // Border
    ctx.strokeStyle = '#fff'
    ctx.lineWidth = 2
    ctx.strokeRect(this.x, this.y, this.width, this.height)
    
    // Text
    ctx.font = '18px sans-serif'
    ctx.fillStyle = '#fff'
    ctx.textBaseline = 'top'
    
    const displayText = this.text.slice(0, this.displayedChars)
    const maxWidth = this.width - this.padding * 2
    const lines = wrapText(ctx, displayText, maxWidth)
    
    for (let i = 0; i < lines.length; i++) {
      ctx.fillText(
        lines[i],
        this.x + this.padding,
        this.y + this.padding + i * this.lineHeight
      )
    }
    
    // Continue indicator
    if (this.isComplete()) {
      ctx.fillText('▼', this.x + this.width - 24, this.y + this.height - 24)
    }
  }
}

9) Números de dano flutuantes

class FloatingText {
  constructor(text, x, y, color = '#fff') {
    this.text = text
    this.x = x
    this.y = y
    this.color = color
    this.vy = -60
    this.lifetime = 1
    this.age = 0
  }
  
  update(dt) {
    this.y += this.vy * dt
    this.vy *= 0.95
    this.age += dt
  }
  
  draw(ctx) {
    const alpha = 1 - (this.age / this.lifetime)
    ctx.font = 'bold 20px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillStyle = this.color
    ctx.globalAlpha = alpha
    ctx.fillText(this.text, Math.round(this.x), Math.round(this.y))
    ctx.globalAlpha = 1
  }
  
  isExpired() {
    return this.age >= this.lifetime
  }
}

// Manager
const floatingTexts = []

function spawnDamageNumber(damage, x, y) {
  const color = damage > 50 ? '#ff4444' : '#ffff44'
  floatingTexts.push(new FloatingText(damage.toString(), x, y, color))
}

function updateFloatingTexts(dt) {
  for (let i = floatingTexts.length - 1; i >= 0; i--) {
    floatingTexts[i].update(dt)
    if (floatingTexts[i].isExpired()) {
      floatingTexts.splice(i, 1)
    }
  }
}

10) Texto em WebGL (fontes SDF)

Para jogos em WebGL, fontes Signed Distance Field podem ser redimensionadas com nitidez:

// SDF shader fragment
const sdfFragmentShader = `
  precision mediump float;
  
  uniform sampler2D u_texture;
  uniform vec4 u_color;
  varying vec2 v_texCoord;
  
  void main() {
    float distance = texture2D(u_texture, v_texCoord).a;
    float alpha = smoothstep(0.4, 0.6, distance);
    gl_FragColor = vec4(u_color.rgb, u_color.a * alpha);
  }
`

// Libraries like msdf-bmfont-xml can generate SDF font atlases

Especificamente para cenas do three.js, troika-three-text é uma boa opção. Em vez de gerar um atlas previamente, ele analisa arquivos .ttf/.otf/.woff e gera os glifos SDF em tempo real em um web worker, além de cuidar do kerning, das ligaturas e dos sistemas de escrita da direita para a esquerda.

Para a maioria dos jogos 2D feitos com Canvas, fontes bitmap ou texto pré-renderizado no Canvas funcionam bem.

Conteúdo relacionado

• Loop de jogo com Canvas 2D
• Renderização de pixel art
• Fundamentos do WebGL
• Canvas responsivo para jogos — dimensionamento de texto de acordo com a resolução e o DPI do Canvas
• Onde encontrar recursos gratuitos para jogos — fontes de recursos de tipografia e interface de usuário

O Tone.js funciona sobre a API Web Audio e torna prático o uso de áudio sintetizado. Em vez de carregar arquivos de áudio, você gera sons por meio de programação. Isso significa tempo de carregamento zero, variações infinitas e sons capazes de reagir à jogabilidade em tempo real.

Experimente (clique nos botões para ouvir sons de jogo sintetizados):

<script src="https://unpkg.com/tone@15/build/Tone.js"></script>

npm install tone

import * as Tone from 'tone'

document.addEventListener('click', async () => {
  await Tone.start()
  console.log('Audio ready')
}, { once: true })

const synth = new Tone.Synth().toDestination()

// Play a note
synth.triggerAttackRelease('C4', '8n')

const synth = new Tone.Synth({
  oscillator: { type: 'triangle' },
  envelope: {
    attack: 0.02,
    decay: 0.2,
    sustain: 0.3,
    release: 0.4,
  },
}).toDestination()

let isInitialized = false
let softSynth = null
let subSynth = null
let noiseSynth = null
let sfxGain = null

function initSFX() {
  if (isInitialized) return
  
  // Master volume control
  sfxGain = new Tone.Gain(0.7).toDestination()
  
  // Soft synth for melodic sounds
  softSynth = new Tone.PolySynth(Tone.Synth, {
    maxPolyphony: 6,
    oscillator: { type: 'sine' },
    envelope: {
      attack: 0.02,
      decay: 0.2,
      sustain: 0.3,
      release: 0.4,
    },
    volume: -8,
  }).connect(sfxGain)
  
  // Sub bass for deep impacts
  subSynth = new Tone.Synth({
    oscillator: { type: 'sine' },
    envelope: {
      attack: 0.02,
      decay: 0.3,
      sustain: 0.1,
      release: 0.3,
    },
    volume: -8,
  }).connect(sfxGain)
  
  // Noise for texture
  noiseSynth = new Tone.NoiseSynth({
    noise: { type: 'pink' },
    envelope: {
      attack: 0.02,
      decay: 0.15,
      sustain: 0,
      release: 0.15,
    },
    volume: -20,
  }).connect(sfxGain)
  
  isInitialized = true
}

function coinCollect() {
  const now = Tone.now()
  softSynth.triggerAttackRelease('C4', '8n', now, 0.3)
  softSynth.triggerAttackRelease('E4', '8n', now + 0.1, 0.35)
  softSynth.triggerAttackRelease('G4', '4n', now + 0.2, 0.4)
}

function jump() {
  const synth = new Tone.Synth({
    oscillator: { type: 'square' },
    envelope: { attack: 0.01, decay: 0.1, sustain: 0, release: 0.1 },
  }).toDestination()
  
  const now = Tone.now()
  synth.frequency.setValueAtTime(150, now)
  synth.frequency.exponentialRampToValueAtTime(400, now + 0.1)
  synth.triggerAttackRelease('C4', '8n', now, 0.2)
}

function hit() {
  const now = Tone.now()
  subSynth.triggerAttackRelease('E2', '4n', now, 0.5)
  noiseSynth.triggerAttackRelease('4n', now, 0.25)
}

function death() {
  const now = Tone.now()
  softSynth.triggerAttackRelease('E4', '4n', now, 0.4)
  softSynth.triggerAttackRelease('C4', '4n', now + 0.2, 0.35)
  softSynth.triggerAttackRelease('A3', '4n', now + 0.4, 0.3)
}

const filter = new Tone.Filter({
  frequency: 3000,
  type: 'lowpass',
  rolloff: -12,
})

const reverb = new Tone.Reverb({
  decay: 1.2,
  wet: 0.25,
})

const gain = new Tone.Gain(0.7)

// Chain: synth -> filter -> reverb -> gain -> destination
filter.connect(reverb)
reverb.connect(gain)
gain.toDestination()

const synth = new Tone.Synth().connect(filter)

const MIN_INTERVAL_MS = 35
let lastNoteTime = 0

function canPlayNote() {
  const now = performance.now()
  if (now - lastNoteTime < MIN_INTERVAL_MS) {
    return false
  }
  lastNoteTime = now
  return true
}

function playSound() {
  if (!canPlayNote()) return
  synth.triggerAttackRelease('C4', '8n')
}

const BPM = 140
const BEAT_MS = (60 / BPM) * 1000

let bassSynth = null
let kickDrum = null
let beatInterval = null
let beatCount = 0
let energy = 0.3

const PROGRESSION = [
  { root: 'E2', chord: ['E3', 'G3', 'B3'] },
  { root: 'C2', chord: ['C3', 'E3', 'G3'] },
  { root: 'D2', chord: ['D3', 'F#3', 'A3'] },
  { root: 'A1', chord: ['A2', 'C3', 'E3'] },
]

function playBeat() {
  const beatInMeasure = beatCount % 8
  const chordIndex = Math.floor(beatCount / 8) % PROGRESSION.length
  const chord = PROGRESSION[chordIndex]
  const now = Tone.now()
  
  // Bass on beat 1
  if (beatInMeasure === 0) {
    bassSynth.triggerAttackRelease(chord.root, '4n', now, 0.6)
  }
  
  // Kick drum - only when energy is high
  if (beatInMeasure === 0 && energy > 0.3) {
    kickDrum.triggerAttackRelease('C1', '8n', now, 0.4)
  }
  
  beatCount++
}

function startMusic() {
  beatInterval = setInterval(playBeat, BEAT_MS)
}

function stopMusic() {
  clearInterval(beatInterval)
}

// Game events affect energy
function onEnemyKill() {
  energy = Math.min(1, energy + 0.1)
}

// Kick drum
const kick = new Tone.MembraneSynth({
  pitchDecay: 0.05,
  octaves: 4,
  envelope: {
    attack: 0.001,
    decay: 0.2,
    sustain: 0,
    release: 0.1,
  },
  volume: -14,
}).toDestination()

kick.triggerAttackRelease('C1', '8n')

// Snare
const snare = new Tone.NoiseSynth({
  noise: { type: 'white' },
  envelope: {
    attack: 0.002,
    decay: 0.15,
    sustain: 0,
    release: 0.1,
  },
  volume: -12,
}).toDestination()

snare.triggerAttackRelease('8n')

// Hi-hat
const hihat = new Tone.NoiseSynth({
  noise: { type: 'white' },
  envelope: {
    attack: 0.001,
    decay: 0.04,
    sustain: 0,
    release: 0.03,
  },
  volume: -22,
}).toDestination()

hihat.triggerAttackRelease('32n')

function cleanup() {
  if (softSynth) softSynth.dispose()
  if (subSynth) subSynth.dispose()
  if (noiseSynth) noiseSynth.dispose()
  if (sfxGain) sfxGain.dispose()
}

Um bom áudio transforma um jogo. Um jogo sem som parece sem vida. A Web Audio API oferece efeitos sonoros de baixa latência, reprodução de música e até áudio espacial 3D, tudo no navegador.

Experimente (clique em um botão para ouvir sons sintetizados):

let audioCtx = null

function initAudio() {
  if (!audioCtx) {
    audioCtx = new AudioContext()
  }
  if (audioCtx.state === 'suspended') {
    audioCtx.resume()
  }
  return audioCtx
}

// Inicializa na primeira interação
document.addEventListener('click', () => initAudio(), { once: true })
document.addEventListener('keydown', () => initAudio(), { once: true })

async function loadSound(url) {
  const response = await fetch(url)
  const arrayBuffer = await response.arrayBuffer()
  const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer)
  return audioBuffer
}

function playSound(buffer, volume = 1) {
  const source = audioCtx.createBufferSource()
  source.buffer = buffer
  
  const gainNode = audioCtx.createGain()
  gainNode.gain.value = volume
  
  source.connect(gainNode)
  gainNode.connect(audioCtx.destination)
  
  source.start(0)
  return source
}

class SoundManager {
  constructor() {
    this.ctx = null
    this.sounds = new Map()
    this.masterGain = null
  }
  
  init() {
    this.ctx = new AudioContext()
    this.masterGain = this.ctx.createGain()
    this.masterGain.connect(this.ctx.destination)
  }
  
  async load(name, url) {
    const response = await fetch(url)
    const buffer = await this.ctx.decodeAudioData(await response.arrayBuffer())
    this.sounds.set(name, buffer)
  }
  
  play(name, volume = 1) {
    const buffer = this.sounds.get(name)
    if (!buffer) return
    
    const source = this.ctx.createBufferSource()
    source.buffer = buffer
    
    const gain = this.ctx.createGain()
    gain.gain.value = volume
    
    source.connect(gain)
    gain.connect(this.masterGain)
    source.start(0)
    
    return source
  }
  
  setMasterVolume(v) {
    this.masterGain.gain.value = v
  }
}

class MusicPlayer {
  constructor(ctx, masterGain) {
    this.ctx = ctx
    this.masterGain = masterGain
    this.currentTrack = null
    this.gain = ctx.createGain()
    this.gain.connect(masterGain)
  }
  
  play(buffer, volume = 0.5) {
    this.stop()
    
    this.currentTrack = this.ctx.createBufferSource()
    this.currentTrack.buffer = buffer
    this.currentTrack.loop = true
    this.currentTrack.connect(this.gain)
    this.gain.gain.value = volume
    this.currentTrack.start(0)
  }
  
  stop() {
    if (this.currentTrack) {
      this.currentTrack.stop()
      this.currentTrack = null
    }
  }
  
  fadeOut(duration = 1) {
    this.gain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + duration)
  }
}

function playSpatialSound(buffer, x, y, z) {
  const source = audioCtx.createBufferSource()
  source.buffer = buffer
  
  const panner = audioCtx.createPanner()
  panner.panningModel = 'HRTF'
  panner.distanceModel = 'inverse'
  panner.refDistance = 1
  panner.maxDistance = 100
  panner.positionX.value = x
  panner.positionY.value = y
  panner.positionZ.value = z
  
  source.connect(panner)
  panner.connect(audioCtx.destination)
  source.start(0)
}

function updateListener(x, y, z, fx, fy, fz) {
  const listener = audioCtx.listener
  listener.positionX.value = x
  listener.positionY.value = y
  listener.positionZ.value = z
  listener.forwardX.value = fx
  listener.forwardY.value = fy
  listener.forwardZ.value = fz
  listener.upX.value = 0
  listener.upY.value = 1
  listener.upZ.value = 0
}

class SoundPool {
  constructor(ctx, buffer, size = 8) {
    this.sources = []
    this.index = 0
    this.ctx = ctx
    this.buffer = buffer
    this.size = size
  }
  
  play(volume = 1) {
    const source = this.ctx.createBufferSource()
    source.buffer = this.buffer
    
    const gain = this.ctx.createGain()
    gain.gain.value = volume
    
    source.connect(gain)
    gain.connect(this.ctx.destination)
    source.start(0)
    
    this.index = (this.index + 1) % this.size
  }
}

const audioUrl = canPlayOgg() ? 'sound.ogg' : 'sound.mp3'

function playWithPitchVariation(buffer, variance = 0.1) {
  const source = audioCtx.createBufferSource()
  source.buffer = buffer
  source.playbackRate.value = 1 + (Math.random() - 0.5) * variance
  source.connect(audioCtx.destination)
  source.start(0)
}

function duckMusic(musicGain, duration = 0.3) {
  musicGain.gain.linearRampToValueAtTime(0.2, audioCtx.currentTime + duration)
}

function unduckMusic(musicGain, duration = 0.3) {
  musicGain.gain.linearRampToValueAtTime(1, audioCtx.currentTime + duration)
}

Os Web Workers permitem executar JavaScript em uma thread em segundo plano. Para jogos, isso significa que física, IA e geração procedural podem ser executadas sem causar quedas na taxa de quadros.

1) Quando usar Workers

Boas opções:

• Simulação de física
• Busca de caminhos (A*, navmesh)
• Tomada de decisões de IA
• Geração procedural
• Processamento de assets (manipulação de imagens, compactação)
• Matemática complexa (FFT, detecção de colisões)

Não são ideais para:

• Renderização (Workers não podem acessar diretamente o DOM/Canvas)
• Tarefas muito pequenas (o custo adicional da thread não compensa)

2) Criando um Worker básico

worker.js:

self.onmessage = (e) => {
  const { type, data } = e.data
  
  if (type === 'calculate') {
    const result = heavyCalculation(data)
    self.postMessage({ type: 'result', data: result })
  }
}

function heavyCalculation(input) {
  // Expensive work here
  return input * 2
}

main.js:

const worker = new Worker('worker.js')

worker.onmessage = (e) => {
  const { type, data } = e.data
  if (type === 'result') {
    console.log('Got result:', data)
  }
}

worker.postMessage({ type: 'calculate', data: 42 })

3) Workers inline (sem arquivo separado)

function createInlineWorker(fn) {
  const blob = new Blob([`(${fn.toString()})()`], { type: 'text/javascript' })
  return new Worker(URL.createObjectURL(blob))
}

const worker = createInlineWorker(() => {
  self.onmessage = (e) => {
    const result = e.data * 2
    self.postMessage(result)
  }
})

4) Workers como módulos ES

Você pode escrever o código do Worker como um módulo ES e usar import dentro dele, em vez de importScripts. Passe { type: 'module' } ao construtor:

const worker = new Worker('physics-worker.js', { type: 'module' })

Dentro do Worker, você pode usar import para carregar funções auxiliares compartilhadas de matemática, colisão ou IA da mesma forma que na thread principal, evitando duplicar a lógica do jogo. Workers de módulo têm suporte no Chrome e Edge 80+, Safari 15+ e Firefox 114+.

5) Exemplo de Worker de física

physics-worker.js:

const bodies = []
const FIXED_DT = 1 / 60

self.onmessage = (e) => {
  const { type, data } = e.data
  
  switch (type) {
    case 'init':
      initWorld(data)
      break
    case 'step':
      step()
      break
    case 'addBody':
      bodies.push(data)
      break
  }
}

function initWorld(config) {
  // Initialize physics world
}

function step() {
  // Update physics
  for (const body of bodies) {
    body.vy += 9.8 * FIXED_DT // Gravity
    body.x += body.vx * FIXED_DT
    body.y += body.vy * FIXED_DT
  }
  
  // Send positions back
  self.postMessage({
    type: 'positions',
    data: bodies.map(b => ({ id: b.id, x: b.x, y: b.y, rotation: b.rotation }))
  })
}

6) Objetos transferíveis para melhorar o desempenho

Grandes volumes de dados podem ser transferidos sem cópia:

// Main thread
const positions = new Float32Array(1000)
worker.postMessage(positions, [positions.buffer])
// positions is now unusable here (transferred)

// Worker
self.onmessage = (e) => {
  const positions = e.data
  // Work with positions
  self.postMessage(positions, [positions.buffer])
}

7) Worker para busca de caminhos

pathfinding-worker.js:

let grid = null

self.onmessage = (e) => {
  const { type, data } = e.data
  
  if (type === 'setGrid') {
    grid = data
  }
  
  if (type === 'findPath') {
    const path = aStar(data.start, data.end, grid)
    self.postMessage({ type: 'path', id: data.id, path })
  }
}

function aStar(start, end, grid) {
  // A* implementation
  const openSet = [start]
  const cameFrom = new Map()
  const gScore = new Map()
  gScore.set(key(start), 0)
  
  while (openSet.length > 0) {
    // ... A* logic
  }
  
  return reconstructPath(cameFrom, end)
}

function key(pos) {
  return `${pos.x},${pos.y}`
}

8) Pool de Workers para tarefas paralelas

class WorkerPool {
  constructor(workerUrl, size = navigator.hardwareConcurrency || 4) {
    this.workers = []
    this.queue = []
    this.available = []
    
    for (let i = 0; i < size; i++) {
      const worker = new Worker(workerUrl)
      worker.onmessage = (e) => this.handleResult(worker, e)
      this.workers.push(worker)
      this.available.push(worker)
    }
  }
  
  run(data) {
    return new Promise((resolve) => {
      const task = { data, resolve }
      
      if (this.available.length > 0) {
        this.dispatch(this.available.pop(), task)
      } else {
        this.queue.push(task)
      }
    })
  }
  
  dispatch(worker, task) {
    worker._currentTask = task
    worker.postMessage(task.data)
  }
  
  handleResult(worker, e) {
    const task = worker._currentTask
    task.resolve(e.data)
    
    if (this.queue.length > 0) {
      this.dispatch(worker, this.queue.shift())
    } else {
      this.available.push(worker)
    }
  }
  
  terminate() {
    this.workers.forEach(w => w.terminate())
  }
}

9) SharedArrayBuffer para sincronização em tempo real

Com o isolamento entre origens ativado, você pode compartilhar memória:

// Main thread
const shared = new SharedArrayBuffer(1024)
const positions = new Float32Array(shared)

worker.postMessage({ type: 'init', buffer: shared })

// Worker reads/writes directly to shared memory
// No postMessage overhead for position updates

10) OffscreenCanvas para Workers

Renderize em um Worker. O OffscreenCanvas agora está amplamente disponível como recurso Baseline no Chrome, Edge, Firefox e Safari (o Safari adicionou suporte na versão 17.0 para macOS e iOS):

// Main thread
const canvas = document.getElementById('game')
const offscreen = canvas.transferControlToOffscreen()
worker.postMessage({ canvas: offscreen }, [offscreen])

// Worker
self.onmessage = (e) => {
  const canvas = e.data.canvas
  const ctx = canvas.getContext('2d')
  
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    // Draw...
    requestAnimationFrame(render)
  }
  render()
}

11) Tratamento de erros

worker.onerror = (e) => {
  console.error('Worker error:', e.message, e.filename, e.lineno)
}

// In worker
self.onerror = (e) => {
  self.postMessage({ type: 'error', message: e.message })
}

Conteúdo relacionado

• Publique um jogo web que carregue rapidamente
• Ative threads do Wasm (SharedArrayBuffer)
• Loop de jogo com Canvas 2D
• Bibliotecas de física para jogos — executando Rapier ou Cannon-es em um Worker
• Carregamento de assets por streaming — decodificando assets fora da thread principal
• Stack de tecnologia para jogos web em 2026 — como os Workers se encaixam na stack WebGL/WebGPU/Wasm

Recursos externos

• MDN: API Web Workers — referência completa da API
• MDN: Como usar Web Workers — guia passo a passo
• MDN: Objetos transferíveis — transferência de dados sem cópia
• MDN: SharedArrayBuffer — memória compartilhada entre threads

O WebGL oferece acesso direto à GPU no navegador. Ele é a base dos jogos web 3D (e 2D de alto desempenho). Este tutorial aborda os conceitos essenciais.

1) Obtendo um contexto WebGL

const canvas = document.getElementById('game')
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')

if (!gl) {
  // Fallback or error message
  console.error('WebGL not supported')
}

Prefira webgl2 quando estiver disponível — ele é amplamente compatível e oferece recursos melhores.

2) O pipeline de renderização (simplificado)

1. O shader de vértice é executado uma vez por vértice. Ele posiciona sua geometria.
2. O shader de fragmento é executado uma vez por pixel. Ele colore a saída.
3. Os buffers armazenam dados (posições, UVs, cores).
4. As texturas são imagens amostradas pelos shaders.

3) Um par mínimo de shaders

Shader de vértice:

#version 300 es
in vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

Shader de fragmento:

#version 300 es
precision mediump float;
out vec4 fragColor;
void main() {
  fragColor = vec4(1.0, 0.5, 0.2, 1.0); // orange
}

4) Compilando e vinculando shaders

function createShader(gl, type, source) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(shader))
    gl.deleteShader(shader)
    return null
  }
  return shader
}

function createProgram(gl, vs, fs) {
  const program = gl.createProgram()
  gl.attachShader(program, vs)
  gl.attachShader(program, fs)
  gl.linkProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program))
    return null
  }
  return program
}

5) Criando buffers

const positions = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)

6) Conectando buffers aos shaders

const positionLoc = gl.getAttribLocation(program, 'a_position')
gl.enableVertexAttribArray(positionLoc)
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)

7) O loop do jogo

function render() {
  gl.viewport(0, 0, canvas.width, canvas.height)
  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.useProgram(program)
  gl.drawArrays(gl.TRIANGLES, 0, 3)

  requestAnimationFrame(render)
}
render()

8) Carregando texturas

function loadTexture(gl, url) {
  const texture = gl.createTexture()
  gl.bindTexture(gl.TEXTURE_2D, texture)

  // Placeholder pixel until image loads
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
    new Uint8Array([255, 0, 255, 255]))

  const img = new Image()
  img.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture)
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
    gl.generateMipmap(gl.TEXTURE_2D)
  }
  img.src = url
  return texture
}

9) Armadilhas comuns

• Texturas com dimensões em potências de dois não são estritamente obrigatórias no WebGL 2, mas os mipmaps funcionam melhor com elas.
• Perda de contexto: trate os eventos webglcontextlost — navegadores móveis descartam contextos quando há pressão sobre a memória.
• Texturas de ponto flutuante exigem a verificação de extensões (EXT_color_buffer_float).

10) Quando usar uma biblioteca

O WebGL puro é verboso. Para a maioria dos jogos, considere:

• Three.js — 3D completo
• PixiJS — renderização 2D rápida
• PlayCanvas — engine de jogos com editor

Use WebGL puro quando precisar de:

• controle máximo
• um renderizador personalizado
• aprender como as coisas realmente funcionam

Uma observação para 2026: o WebGPU agora vem ativado por padrão em todos os principais navegadores (Chrome e Edge desde a versão 113, Firefox 141 no Windows e 145 no macOS, e Safari no iOS 26, iPadOS 26 e macOS Tahoe 26). Os fundamentos apresentados aqui ainda se aplicam, pois bibliotecas como Three.js executam seu renderizador WebGPU com fallback automático para WebGL 2, então o WebGL 2 continua sendo uma base confiável. Se você está começando hoje um novo renderizador do zero, leia o tutorial de WebGPU junto com este antes de escolher uma API.

Conteúdo relacionado

• WebGPU para jogos
• Loop de jogo com Canvas 2D
• Publique um jogo web que carregue rápido
• Stack de tecnologias para jogos web em 2026 — quando escolher WebGL, WebGPU ou Wasm
• Bibliotecas de física para jogos — engines de física que renderizam por meio do WebGL
• Comparativo de engines para jogos web — Three.js, PixiJS, PlayCanvas e outras

Recursos externos

• MDN: API WebGL — referência completa da API
• Fundamentos do WebGL2 — série aprofundada de tutoriais sobre WebGL2
• O Livro dos Shaders — guia interativo sobre shaders de fragmento GLSL
• Documentação do Three.js — o framework WebGL mais popular

WebGPU é o sucessor do WebGL. É uma API de nível mais baixo, mais explícita e projetada para GPUs modernas. Se você está começando um novo projeto 3D em 2026, vale a pena aprender WebGPU.

Tutorial de WebGPU: 10 projetos que abrangem desde a configuração até a renderização 3D com iluminação e animação

1) Verifique a compatibilidade do navegador

if (!navigator.gpu) {
  console.error('WebGPU not supported')
}

Em 2026, o WebGPU está disponível no Chrome, Edge, Firefox e Safari.

2) Obtenha um dispositivo

const adapter = await navigator.gpu.requestAdapter()
const device = await adapter.requestDevice()

O adaptador representa a GPU física. O dispositivo é sua interface com ela.

Ambas as chamadas podem falhar. requestAdapter() retorna null quando o sistema não tem uma GPU utilizável, e requestDevice() pode ser rejeitada, portanto, trate essas possibilidades antes de continuar:

const adapter = await navigator.gpu.requestAdapter()
if (!adapter) throw new Error('No suitable GPU adapter found')
const device = await adapter.requestDevice()

O adaptador também é consumido quando você cria um dispositivo a partir dele. Portanto, solicite um novo adaptador se precisar de outro dispositivo.

3) Configure o canvas

const canvas = document.getElementById('game')
const context = canvas.getContext('webgpu')
const format = navigator.gpu.getPreferredCanvasFormat()

context.configure({
  device,
  format,
  alphaMode: 'premultiplied',
})

4) Escreva shaders em WGSL

O WebGPU usa WGSL (WebGPU Shading Language), e não GLSL.

@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
  var pos = array<vec2f, 3>(
    vec2f( 0.0,  0.5),
    vec2f(-0.5, -0.5),
    vec2f( 0.5, -0.5),
  );
  return vec4f(pos[idx], 0.0, 1.0);
}

@fragment
fn fs_main() -> @location(0) vec4f {
  return vec4f(1.0, 0.5, 0.2, 1.0); // orange
}

5) Crie um módulo de shader

const shaderModule = device.createShaderModule({
  code: wgslSource,
})

6) Crie um pipeline de renderização

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: shaderModule,
    entryPoint: 'vs_main',
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fs_main',
    targets: [{ format }],
  },
})

7) Renderize um quadro

function render() {
  const commandEncoder = device.createCommandEncoder()
  const textureView = context.getCurrentTexture().createView()

  const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: textureView,
      clearValue: { r: 0, g: 0, b: 0, a: 1 },
      loadOp: 'clear',
      storeOp: 'store',
    }],
  })

  renderPass.setPipeline(pipeline)
  renderPass.draw(3)
  renderPass.end()

  device.queue.submit([commandEncoder.finish()])
  requestAnimationFrame(render)
}
render()

8) Buffers no WebGPU

const vertices = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const vertexBuffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
})

device.queue.writeBuffer(vertexBuffer, 0, vertices)

9) Grupos de vinculação para uniforms

const uniformBuffer = device.createBuffer({
  size: 64,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
})

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{
    binding: 0,
    resource: { buffer: uniformBuffer },
  }],
})

10) WebGPU vs. WebGL

Quando usar WebGPU

• Novos projetos voltados para navegadores modernos
• Cargas de trabalho com uso intensivo de computação (física, IA, geração procedural)
• Quando você precisa de controle granular sobre os recursos da GPU

Conteúdo relacionado

• Fundamentos do WebGL
• Web Workers para lógica de jogos
• Publique um jogo web que carregue rapidamente
• Stack tecnológico para jogos web em 2026 — critérios de decisão entre WebGL, WebGPU e Wasm
• COOP/COEP e SharedArrayBuffer — cabeçalhos necessários para multithreading em Wasm com computação WebGPU

Recursos externos

• Especificação do WebGPU — especificação do W3C
• Especificação da WGSL — especificação da WebGPU Shading Language
• Fundamentos do WebGPU — série de tutoriais aprofundados
• Seu primeiro aplicativo WebGPU — tutorial passo a passo do Google Codelab

Criando um jogo multiplayer com WebSockets: arquitetura do servidor, salas de jogo e sincronização de estado

Os WebSockets permitem comunicação em tempo real para jogos multiplayer. Este tutorial aborda os fundamentos do lado do cliente.

1) Conectando-se a um servidor

const ws = new WebSocket('wss://game-server.example.com')

ws.onopen = () => {
  console.log('Connected')
  ws.send(JSON.stringify({ type: 'join', name: 'Player1' }))
}

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  handleMessage(msg)
}

ws.onclose = () => {
  console.log('Disconnected')
}

ws.onerror = (err) => {
  console.error('WebSocket error:', err)
}

2) Estrutura do protocolo de mensagens

Defina um protocolo simples:

// Client -> Server
{ type: 'join', name: 'Player1' }
{ type: 'input', keys: { left: true, jump: true } }
{ type: 'chat', message: 'Hello!' }

// Server -> Client
{ type: 'state', players: [...], entities: [...] }
{ type: 'playerJoined', id: 'abc', name: 'Player2' }
{ type: 'playerLeft', id: 'abc' }

3) Classe de gerenciamento de conexão

class GameConnection {
  constructor(url) {
    this.url = url
    this.ws = null
    this.handlers = new Map()
    this.reconnectDelay = 1000
  }
  
  connect() {
    this.ws = new WebSocket(this.url)
    
    this.ws.onopen = () => {
      this.reconnectDelay = 1000
      this.emit('connected')
    }
    
    this.ws.onmessage = (e) => {
      const msg = JSON.parse(e.data)
      this.emit(msg.type, msg)
    }
    
    this.ws.onclose = () => {
      this.emit('disconnected')
      this.scheduleReconnect()
    }
    
    this.ws.onerror = () => {
      this.ws.close()
    }
  }
  
  scheduleReconnect() {
    setTimeout(() => {
      this.reconnectDelay = Math.min(this.reconnectDelay * 2, 30000)
      this.connect()
    }, this.reconnectDelay)
  }
  
  send(type, data = {}) {
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify({ type, ...data }))
    }
  }
  
  on(type, handler) {
    if (!this.handlers.has(type)) {
      this.handlers.set(type, [])
    }
    this.handlers.get(type).push(handler)
  }
  
  emit(type, data) {
    const handlers = this.handlers.get(type) || []
    handlers.forEach(h => h(data))
  }
  
  disconnect() {
    this.ws?.close()
  }
}

4) Enviando os comandos do jogador

Envie comandos, não posições. Deixe o servidor ser a autoridade:

const connection = new GameConnection('wss://server.example.com')

function sendInput(input) {
  connection.send('input', {
    left: input.left,
    right: input.right,
    jump: input.jump,
    shoot: input.shoot,
    seq: inputSequence++,
  })
}

// Send input at a fixed rate (e.g., 20 times/sec)
setInterval(() => {
  sendInput(currentInput)
}, 50)

5) Recebendo o estado do jogo

let gameState = { players: [], entities: [] }

connection.on('state', (msg) => {
  gameState = msg
})

connection.on('playerJoined', (msg) => {
  gameState.players.push({ id: msg.id, name: msg.name })
})

connection.on('playerLeft', (msg) => {
  gameState.players = gameState.players.filter(p => p.id !== msg.id)
})

6) Interpolação para movimentos suaves

O servidor envia snapshots. Faça a interpolação entre eles:

class EntityInterpolator {
  constructor() {
    this.buffer = [] // { timestamp, state }
    this.renderDelay = 100 // ms behind server
  }
  
  addSnapshot(timestamp, state) {
    this.buffer.push({ timestamp, state })
    
    // Keep only recent snapshots
    while (this.buffer.length > 10) {
      this.buffer.shift()
    }
  }
  
  getState(currentTime) {
    const renderTime = currentTime - this.renderDelay
    
    // Find surrounding snapshots
    let before = null
    let after = null
    
    for (let i = 0; i < this.buffer.length - 1; i++) {
      if (this.buffer[i].timestamp <= renderTime && 
          this.buffer[i + 1].timestamp >= renderTime) {
        before = this.buffer[i]
        after = this.buffer[i + 1]
        break
      }
    }
    
    if (!before || !after) {
      return this.buffer[this.buffer.length - 1]?.state
    }
    
    // Interpolate
    const t = (renderTime - before.timestamp) / (after.timestamp - before.timestamp)
    return this.lerp(before.state, after.state, t)
  }
  
  lerp(a, b, t) {
    return {
      x: a.x + (b.x - a.x) * t,
      y: a.y + (b.y - a.y) * t,
    }
  }
}

7) Predição no lado do cliente

Para controles responsivos, faça a predição localmente e reconcilie com o servidor:

class PredictedPlayer {
  constructor() {
    this.position = { x: 0, y: 0 }
    this.pendingInputs = []
  }
  
  applyInput(input) {
    // Apply input locally
    if (input.left) this.position.x -= 5
    if (input.right) this.position.x += 5
    
    // Store for reconciliation
    this.pendingInputs.push({ seq: input.seq, input })
  }
  
  reconcile(serverState, lastProcessedSeq) {
    // Server confirmed position
    this.position = { ...serverState.position }
    
    // Remove confirmed inputs
    this.pendingInputs = this.pendingInputs.filter(i => i.seq > lastProcessedSeq)
    
    // Re-apply unconfirmed inputs
    for (const pending of this.pendingInputs) {
      if (pending.input.left) this.position.x -= 5
      if (pending.input.right) this.position.x += 5
    }
  }
}

8) Exibindo a latência

class LatencyMonitor {
  constructor(connection) {
    this.connection = connection
    this.pingStart = 0
    this.latency = 0
    
    connection.on('pong', () => {
      this.latency = Date.now() - this.pingStart
    })
    
    setInterval(() => this.ping(), 1000)
  }
  
  ping() {
    this.pingStart = Date.now()
    this.connection.send('ping')
  }
  
  getLatency() {
    return this.latency
  }
}

9) Mensagens binárias para maior eficiência

Para atualizações de alta frequência, use dados binários:

// Sending binary
const buffer = new ArrayBuffer(12)
const view = new DataView(buffer)
view.setFloat32(0, player.x)
view.setFloat32(4, player.y)
view.setUint32(8, inputFlags)
ws.send(buffer)

// Receiving binary
ws.binaryType = 'arraybuffer'
ws.onmessage = (e) => {
  if (e.data instanceof ArrayBuffer) {
    const view = new DataView(e.data)
    const x = view.getFloat32(0)
    const y = view.getFloat32(4)
    // ...
  }
}

10) Exemplo básico de servidor (Node.js)

import { WebSocketServer } from 'ws'

const wss = new WebSocketServer({ port: 8080 })
const players = new Map()

wss.on('connection', (ws) => {
  const id = crypto.randomUUID()
  players.set(id, { id, x: 0, y: 0, ws })
  
  ws.on('message', (data) => {
    const msg = JSON.parse(data)
    
    if (msg.type === 'input') {
      const player = players.get(id)
      if (msg.left) player.x -= 5
      if (msg.right) player.x += 5
    }
  })
  
  ws.on('close', () => {
    players.delete(id)
    broadcast({ type: 'playerLeft', id })
  })
})

// Broadcast state 20 times/sec
setInterval(() => {
  const state = {
    type: 'state',
    players: Array.from(players.values()).map(p => ({
      id: p.id, x: p.x, y: p.y
    }))
  }
  broadcast(state)
}, 50)

function broadcast(msg) {
  const data = JSON.stringify(msg)
  for (const player of players.values()) {
    player.ws.send(data)
  }
}

Conteúdo relacionado

• Publique um jogo web que carregue rápido
• Gerenciamento de controles em jogos
• Web Workers para a lógica do jogo
• COOP/COEP e SharedArrayBuffer — cabeçalhos necessários para usar SharedArrayBuffer em contextos multiplayer
• Design de jogos cooperativos em 2026 — por que jogos cooperativos do tipo "friend slop" estão em alta e como o multiplayer no navegador se encaixa nisso
• Game jams e hackathons — jogos multiplayer de jams recebem mais atenção

Recursos externos

• MDN: API WebSocket — referência sobre WebSocket para navegadores
• MDN: API WebRTC — conexões ponto a ponto para reduzir a latência
• MDN: API WebTransport — um transporte HTTP/3 mais recente que passou a fazer parte do Baseline em todos os navegadores em março de 2026, quando o Safari 26.4 recebeu suporte (ele já estava disponível no Chrome 97+, Edge e Firefox 114+). Ao contrário de um único WebSocket baseado em TCP, o WebTransport funciona sobre QUIC e oferece datagramas não confiáveis, além de vários fluxos independentes. Assim, um pacote perdido não bloqueia todo o restante da fila. Um padrão comum é enviar atualizações de posição de alta frequência por datagramas e manter o chat ou os placares em um fluxo confiável. Os WebSockets ainda são a opção mais compatível, e tudo o que foi apresentado acima continua válido, mas agora vale a pena considerar o WebTransport para jogos sensíveis à latência.
• Documentação do Socket.IO — biblioteca popular que encapsula WebSockets
• Redes multiplayer do Valve Source — padrões de rede autoritativa usados em jogos em produção

O WebXR leva RV e RA ao navegador. Os jogadores podem aproveitar seu jogo em um headset sem precisar baixar nada.

1) Verifique o suporte a WebXR

async function checkXRSupport() {
  if (!navigator.xr) {
    return { vr: false, ar: false }
  }
  
  const vr = await navigator.xr.isSessionSupported('immersive-vr')
  const ar = await navigator.xr.isSessionSupported('immersive-ar')
  
  return { vr, ar }
}

// Usage
const support = await checkXRSupport()
if (support.vr) {
  showVRButton()
}

2) Iniciando uma sessão de RV

let xrSession = null
let xrRefSpace = null

async function startVR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-vr', {
      requiredFeatures: ['local-floor'],
      optionalFeatures: ['hand-tracking'],
    })
    
    xrSession.addEventListener('end', onSessionEnd)
    
    // Set up rendering
    const gl = canvas.getContext('webgl2', { xrCompatible: true })
    await xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, gl),
    })
    
    // Get reference space
    xrRefSpace = await xrSession.requestReferenceSpace('local-floor')
    
    // Start render loop
    xrSession.requestAnimationFrame(onXRFrame)
  } catch (err) {
    console.error('Failed to start VR:', err)
  }
}

function onSessionEnd() {
  xrSession = null
  xrRefSpace = null
}

3) O loop de renderização XR

function onXRFrame(time, frame) {
  const session = frame.session
  session.requestAnimationFrame(onXRFrame)
  
  const pose = frame.getViewerPose(xrRefSpace)
  if (!pose) return
  
  const glLayer = session.renderState.baseLayer
  gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer)
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
  
  // Render for each eye
  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view)
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height)
    
    // Get camera matrices
    const viewMatrix = view.transform.inverse.matrix
    const projectionMatrix = view.projectionMatrix
    
    // Render scene with these matrices
    renderScene(viewMatrix, projectionMatrix)
  }
}

4) Fontes de entrada (controles)

xrSession.addEventListener('inputsourceschange', (e) => {
  for (const source of e.added) {
    console.log('Controller added:', source.handedness) // 'left' or 'right'
  }
  for (const source of e.removed) {
    console.log('Controller removed:', source.handedness)
  }
})

function processInput(frame) {
  for (const source of xrSession.inputSources) {
    if (!source.gamepad) continue
    
    const gamepad = source.gamepad
    
    // Trigger (usually index 0)
    const triggerPressed = gamepad.buttons[0]?.pressed
    const triggerValue = gamepad.buttons[0]?.value || 0
    
    // Grip (usually index 1)
    const gripPressed = gamepad.buttons[1]?.pressed
    
    // Thumbstick
    const thumbstickX = gamepad.axes[2] || 0
    const thumbstickY = gamepad.axes[3] || 0
    
    // A/B buttons (index 4, 5)
    const buttonA = gamepad.buttons[4]?.pressed
    const buttonB = gamepad.buttons[5]?.pressed
  }
}

Não presuma que todo dispositivo tenha um gamepad

O código acima lê source.gamepad para gatilhos e direcionais analógicos. Isso funciona em headsets com controles, como o Meta Quest, mas não faz nada no Apple Vision Pro (o WebXR vem ativado por padrão no Safari do visionOS 2), no Samsung Galaxy XR e em outros dispositivos Android XR, nos quais a principal forma de entrada é olhar e pinçar ou o rastreamento das mãos. Nesses headsets, source.gamepad é nulo, e session.inputSources permanece vazio até o usuário realmente fazer o gesto de pinça.

Para a única interação garantida por todos os dispositivos, a “ação principal”, escute os eventos select em vez de verificar continuamente os botões. O WebXR fornece selectstart, select e selectend tanto para o gatilho de um controle quanto para uma pinça com a mão ou o gesto de olhar e pinçar do Vision Pro. Assim, um único manipulador atende a todos eles:

xrSession.addEventListener('selectstart', (e) => {
  // e.inputSource is the controller, hand, or transient pinch
  // e.frame lets you read its targetRaySpace pose
})
xrSession.addEventListener('select', (e) => {
  // primary action completed (trigger pulled, pinch released on target)
})
xrSession.addEventListener('selectend', (e) => {})

Mantenha o código do gamepad para locomoção com o direcional analógico e botões extras em headsets com controles, mas condicione sua execução a if (source.gamepad) e encaminhe a interação principal de “selecionar/agarrar/ativar” por esses eventos. Assim, o jogo continuará funcionando em dispositivos controlados pelas mãos e pelo olhar.

5) Posições dos controles

function getControllerPose(frame, source) {
  if (!source.gripSpace) return null
  
  const pose = frame.getPose(source.gripSpace, xrRefSpace)
  if (!pose) return null
  
  return {
    position: pose.transform.position,
    orientation: pose.transform.orientation,
    matrix: pose.transform.matrix,
  }
}

function renderControllers(frame) {
  for (const source of xrSession.inputSources) {
    const pose = getControllerPose(frame, source)
    if (pose) {
      renderControllerModel(pose, source.handedness)
    }
  }
}

6) Ray casting para apontar

function getControllerRay(frame, source) {
  if (!source.targetRaySpace) return null
  
  const pose = frame.getPose(source.targetRaySpace, xrRefSpace)
  if (!pose) return null
  
  const origin = pose.transform.position
  const direction = {
    x: -pose.transform.matrix[8],
    y: -pose.transform.matrix[9],
    z: -pose.transform.matrix[10],
  }
  
  return { origin, direction }
}

function checkRayIntersection(ray, objects) {
  let closest = null
  let closestDist = Infinity
  
  for (const obj of objects) {
    const dist = rayIntersectBox(ray, obj.boundingBox)
    if (dist !== null && dist < closestDist) {
      closest = obj
      closestDist = dist
    }
  }
  
  return closest
}

7) Locomoção por teletransporte

class TeleportSystem {
  constructor() {
    this.targetPosition = null
    this.isAiming = false
  }
  
  update(frame, inputSources) {
    for (const source of inputSources) {
      if (source.handedness !== 'left') continue
      
      const gamepad = source.gamepad
      const thumbstickY = gamepad?.axes[3] || 0
      
      if (thumbstickY < -0.5) {
        // Aiming
        this.isAiming = true
        const ray = getControllerRay(frame, source)
        this.targetPosition = this.findTeleportTarget(ray)
      } else if (this.isAiming) {
        // Release - teleport
        if (this.targetPosition) {
          player.position.x = this.targetPosition.x
          player.position.z = this.targetPosition.z
        }
        this.isAiming = false
        this.targetPosition = null
      }
    }
  }
  
  findTeleportTarget(ray) {
    // Intersect with ground plane
    if (ray.direction.y >= 0) return null
    
    const t = -ray.origin.y / ray.direction.y
    if (t < 0 || t > 10) return null
    
    return {
      x: ray.origin.x + ray.direction.x * t,
      y: 0,
      z: ray.origin.z + ray.direction.z * t,
    }
  }
  
  render() {
    if (this.isAiming && this.targetPosition) {
      renderTeleportMarker(this.targetPosition)
    }
  }
}

8) Locomoção suave

function updateSmoothLocomotion(frame, inputSources, dt) {
  for (const source of inputSources) {
    if (source.handedness !== 'left') continue
    
    const gamepad = source.gamepad
    if (!gamepad) continue
    
    const moveX = gamepad.axes[2] || 0
    const moveY = gamepad.axes[3] || 0
    
    // Apply deadzone
    if (Math.abs(moveX) < 0.1) moveX = 0
    if (Math.abs(moveY) < 0.1) moveY = 0
    
    // Get head direction for movement
    const pose = frame.getViewerPose(xrRefSpace)
    if (!pose) continue
    
    const headMatrix = pose.transform.matrix
    const forward = { x: -headMatrix[8], z: -headMatrix[10] }
    const right = { x: headMatrix[0], z: headMatrix[2] }
    
    // Normalize to XZ plane
    const len = Math.sqrt(forward.x ** 2 + forward.z ** 2)
    forward.x /= len
    forward.z /= len
    
    const speed = 3 * dt
    player.position.x += (forward.x * -moveY + right.x * moveX) * speed
    player.position.z += (forward.z * -moveY + right.z * moveX) * speed
  }
}

9) Diretrizes de conforto em RV

// Vignette during movement to reduce motion sickness
function renderComfortVignette(movementSpeed) {
  const intensity = Math.min(movementSpeed / 5, 0.5)
  if (intensity < 0.1) return
  
  // Render dark edges that increase with speed
  renderVignette(intensity)
}

// Snap turning
let snapTurnCooldown = 0

function handleSnapTurn(gamepad, dt) {
  snapTurnCooldown -= dt
  
  const thumbstickX = gamepad.axes[2] || 0
  
  if (Math.abs(thumbstickX) > 0.7 && snapTurnCooldown <= 0) {
    const angle = Math.sign(thumbstickX) * (Math.PI / 4) // 45 degrees
    player.rotation += angle
    snapTurnCooldown = 0.3 // Prevent rapid turns
  }
}

10) Configuração completa do WebXR

class VRGame {
  constructor(canvas) {
    this.canvas = canvas
    this.gl = canvas.getContext('webgl2', { xrCompatible: true })
    this.session = null
    this.refSpace = null
    this.teleport = new TeleportSystem()
  }
  
  async checkSupport() {
    if (!navigator.xr) return false
    return await navigator.xr.isSessionSupported('immersive-vr')
  }
  
  async start() {
    this.session = await navigator.xr.requestSession('immersive-vr', {
      requiredFeatures: ['local-floor'],
    })
    
    await this.session.updateRenderState({
      baseLayer: new XRWebGLLayer(this.session, this.gl),
    })
    
    this.refSpace = await this.session.requestReferenceSpace('local-floor')
    this.session.addEventListener('end', () => this.onEnd())
    this.session.requestAnimationFrame((t, f) => this.onFrame(t, f))
  }
  
  onFrame(time, frame) {
    this.session.requestAnimationFrame((t, f) => this.onFrame(t, f))
    
    const dt = (time - this.lastTime) / 1000
    this.lastTime = time
    
    // Update game logic
    this.teleport.update(frame, this.session.inputSources)
    
    // Render
    const pose = frame.getViewerPose(this.refSpace)
    if (!pose) return
    
    const glLayer = this.session.renderState.baseLayer
    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, glLayer.framebuffer)
    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT)
    
    for (const view of pose.views) {
      const vp = glLayer.getViewport(view)
      this.gl.viewport(vp.x, vp.y, vp.width, vp.height)
      this.render(view.transform.inverse.matrix, view.projectionMatrix)
    }
    
    this.teleport.render()
  }
  
  render(viewMatrix, projectionMatrix) {
    // Your rendering code here
  }
  
  onEnd() {
    this.session = null
  }
}

Conteúdo relacionado

• Fundamentos de WebGL
• Primeiros passos com WebGPU
• Gerenciamento de entrada em jogos
• Stack tecnológico para jogos web em 2026 — onde o WebXR se encaixa no panorama tecnológico mais amplo
• Three.js + USDC no navegador — como carregar recursos 3D para cenas de XR

Recursos externos

• MDN: API WebXR Device — referência completa da API
• Immersive Web — exemplos de WebXR, ferramentas e tabelas de compatibilidade com navegadores
• Guia de WebXR do Three.js — conteúdo de RV com Three.js