Los asistentes de programación con IA han evolucionado desde el simple autocompletado hasta agentes autónomos capaces de planificar, editar varios archivos, ejecutar pruebas y crear pull requests. Este tutorial aborda las tres herramientas principales: Claude Code, Cursor y GitHub Copilot.

1) ¿Qué hace que una herramienta sea «agéntica»?

El completado de código tradicional con IA sugiere las siguientes líneas. Las herramientas agénticas van más allá:

Las herramientas agénticas pueden comprender toda la estructura de tu proyecto, planificar cambios en varios archivos, ejecutar esos cambios, realizar pruebas e iterar hasta completar la tarea.

2) Comparación rápida: Claude Code vs. Cursor vs. Copilot

3) Fundamentos de Claude Code

Claude Code funciona con Opus 4.8 (su modelo predeterminado actual) y grandes ventanas de contexto. Instálalo y autentícate:

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

# O mediante npm (requiere Node 18+)
npm install -g @anthropic-ai/claude-code

# Autenticarse: ejecuta claude y sigue las indicaciones del navegador
claude

# Iniciar en tu proyecto
cd your-project
claude

Comandos básicos

# Preguntar sobre tu base de código
claude "¿Cómo está implementada aquí la autenticación?"

# Generar código
claude "Añade un middleware de limitación de solicitudes"

# Refactorización de varios archivos
claude "Cambia el nombre de UserService a AuthService en toda la base de código"

# Crear un PR
claude "Crea un PR que añada validación de entradas a todos los endpoints de la API"

Configuración del proyecto

Incluye el contexto del proyecto en un archivo CLAUDE.md ubicado en la raíz del repositorio. Claude Code lo lee automáticamente al inicio de cada sesión:

# Notas del proyecto

- Lenguaje: TypeScript, formateado con Prettier
- Pruebas: Vitest, en tests/
- No modificar node_modules/ ni dist/

La configuración legible por máquinas (permisos de herramientas, variables de entorno y hooks) se guarda en .claude/settings.json. Por ejemplo, para exigir aprobación antes de ejecutar herramientas destructivas, configura allí los permisos.

Memoria y contexto

El contexto persistente del proyecto se guarda en archivos CLAUDE.md, que Claude Code carga al inicio de cada sesión, además de un almacén de memoria automática que Claude actualiza por sí mismo según tus correcciones y preferencias. Para proporcionarle contexto permanente, edita CLAUDE.md en lugar de enviar una instrucción puntual del tipo «Recuerda:»:

# CLAUDE.md
Este es un monorepositorio. El código compartido se encuentra en packages/.

Usa el comando /clear dentro de una sesión para restablecer el contexto de trabajo.

4) Funciones agénticas del IDE Cursor

Cursor está diseñado en torno a flujos de trabajo agénticos. Sus funciones principales son:

Modo Agent

Pulsa Cmd+Shift+I (Mac) o Ctrl+Shift+I (Windows/Linux) para abrir Composer en modo Agent:

Flujo de trabajo del modo Agent:
1. Describe tu tarea
2. El agente crea un plan
3. Lo apruebas o modificas
4. El agente ejecuta los cambios
5. Revisas e iteras

Modo Plan

Para tareas complejas, usa explícitamente el modo Plan:

@plan Añade autenticación de usuarios con:
- Tokens JWT
- Rotación de tokens de actualización
- Hashing de contraseñas con bcrypt
- Limitación de intentos de inicio de sesión

El agente:

1. Investigará tu código existente
2. Creará un plan de implementación detallado
3. Esperará tu aprobación
4. Lo ejecutará paso a paso

Inyección de contexto

Usa @ para añadir contexto específico:

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

Implementa un middleware de verificación de JWT siguiendo estos patrones

Agentes en paralelo

Ejecuta varios agentes simultáneamente en ramas diferentes:

# En Cursor:
1. Abre la paleta de comandos
2. "Cursor: New Agent in Worktree"
3. Cada agente trabaja de forma aislada
4. Compara los resultados en paralelo

Cursor 3 añadió una ventana de agentes (ábrela con Cmd+Shift+P y después «Agents Window») que ejecuta varios agentes en paralelo en checkouts locales, worktrees de git y entornos en la nube. El comando /worktree crea para cada agente su propio worktree aislado de git, mientras que /best-of-n ejecuta la misma tarea con varios modelos para que puedas comparar los resultados en paralelo.

Reglas para mantener la coherencia

Crea .cursor/rules/project.mdc:

# Reglas del proyecto

## Estilo del código
- Usar el modo estricto de TypeScript
- Preferir componentes funcionales
- Usar exportaciones con nombre, no predeterminadas

## Pruebas
- Cada funcionalidad necesita pruebas
- Usar bloques describe/it
- Simular servicios externos

## Seguridad
- Nunca guardar secretos en commits
- Validar todas las entradas del usuario
- Usar consultas parametrizadas

5) Funciones agénticas de GitHub Copilot

Copilot ha evolucionado más allá del autocompletado:

Copilot Chat

Abre el panel de chat y usa comandos con barra:

/explain - Explica el código seleccionado
/fix - Corrige los problemas de la selección
/tests - Genera pruebas
/doc - Añade documentación

Agente de programación (de issue a pull request)

# En GitHub:
1. Abre un issue de GitHub
2. Asígnalo a "Copilot"
3. El agente de programación trabaja en segundo plano:
   analiza el issue, edita archivos y ejecuta pruebas
4. Abre un pull request para que lo revises

Esto es distinto del modo Agent de Copilot dentro del IDE, que trabaja de forma sincrónica contigo en VS Code o JetBrains.

Copilot ahora divide su trabajo autónomo en dos: el modo Agent se ejecuta de forma sincrónica dentro de tu IDE (VS Code y JetBrains), decide qué archivos editar, ejecuta comandos de terminal e itera sobre los errores; el agente de programación se ejecuta de forma asíncrona en la nube, recibe un issue asignado y entrega un pull request mientras tú trabajas en otra cosa.

Sugerencias en línea con contexto

Copilot lee tu base de código. Ayúdalo con comentarios:

// Middleware de autenticación que:
// - Extrae el JWT de la cabecera Authorization
// - Valida la firma del token
// - Adjunta el usuario a la solicitud
// - Devuelve 401 si no es válido
export function authMiddleware(req, res, next) {
  // Copilot genera la implementación
}

6) Mejores prácticas para todas las herramientas

Escribe instrucciones claras

❌ Mal: "Corrige el error"

✅ Bien: "Corrige la excepción de puntero nulo en UserService.getById 
cuando el usuario no exista. Devuelve null en lugar de lanzar una excepción."

❌ Mal: "Añade pruebas"

✅ Bien: "Añade pruebas unitarias para CartService que cubran:
- Añadir artículos a un carrito vacío
- Eliminar artículos
- Calcular totales con descuentos
- Caso límite: cantidades negativas"

Usa el modo de planificación para tareas complejas

Para cualquier tarea que afecte a 3 archivos o más:

1. Pide siempre primero un plan
2. Revisa el plan
3. Apruébalo o modifícalo
4. Deja que el agente lo ejecute
5. Revisa los cambios antes de crear el commit

Proporciona contexto arquitectónico

Antes de un trabajo importante, explica el contexto al agente:

"Esta es una arquitectura de microservicios:
- api-gateway: Enruta las solicitudes
- auth-service: JWT, sesiones
- user-service: CRUD de usuarios
- notification-service: Correo electrónico, notificaciones push

Los servicios se comunican mediante pub/sub de Redis.
La base de datos es PostgreSQL con el ORM Prisma."

Desarrollo guiado por pruebas con agentes

1. Escribe primero una prueba que falle:
   "Escribe una prueba de registro de usuarios que compruebe la validación del correo electrónico"

2. Deja que el agente vea la prueba fallida:
   "Implementa el registro para que esta prueba pase"

3. Itera hasta que todas pasen:
   "Corrige las pruebas que todavía fallan"

7) Consideraciones de seguridad

Las herramientas agénticas tienen un poder real. Establece límites:

Controles de aprobación

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

Aislamiento

# Ejecutar agentes en entornos aislados
docker run -v $(pwd):/workspace -it claude-sandbox

# O usar worktrees de git para aislarlos
git worktree add ../feature-branch feature-branch

Archivos confidenciales

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

Revisa todos los cambios

# Antes de aceptar los cambios del agente:
git diff --stat
git diff

# Usar staging interactivo
git add -p

# Nunca hacer una fusión automática sin revisión

8) Patrones de flujo de trabajo que funcionan

Patrón 1: Explorar, planificar, ejecutar

Sesión 1: "¿Cómo funciona el sistema de pagos?"
          → El agente explora, tú aprendes

Sesión 2: "¿Qué haría falta para añadir Stripe?"
          → El agente crea un plan

Sesión 3: "Implementa la integración con Stripe"
          → El agente ejecuta el plan

Patrón 2: Exploración en paralelo

# En Cursor con agentes en paralelo:

Agente 1: "Implementa almacenamiento en caché con Redis"
Agente 2: "Implementa almacenamiento en caché con Memcached"
Agente 3: "Implementa almacenamiento en caché con una LRU en memoria"

→ Compara las implementaciones y elige el mejor enfoque

Patrón 3: Migración incremental

Paso 1: "Identifica todos los usos de la API obsoleta"
Paso 2: "Crea un adaptador para la nueva API"
Paso 3: "Migra el módulo A para que use el adaptador"
Paso 4: "Migra el módulo B..."
...
Paso N: "Elimina el adaptador y usa directamente la nueva API"

Patrón 4: Desarrollo de funcionalidades comenzando por las pruebas

1. "Escribe pruebas de aceptación para la edición del perfil de usuario"
2. "Escribe pruebas unitarias para la validación del perfil"
3. "Implementa lo necesario para que las pruebas pasen"
4. "Añade pruebas de integración"
5. "Refactoriza para mejorar la claridad"

9) Cuándo usar cada herramienta

10) Medición de la eficacia

Haz seguimiento de estas métricas para evaluar las herramientas agénticas:

const metrics = {
  // Productividad
  suggestionsAccepted: 'porcentaje de sugerencias que conservaste',
  timeToFeature: 'horas desde el inicio hasta la fusión del PR',
  linesPerHour: 'velocidad de código (usar con cautela)',
  
  // Calidad
  bugsIntroduced: 'defectos atribuidos al código generado por IA',
  testCoverage: 'cobertura del código generado por IA',
  reviewChanges: 'cuánto modificas las sugerencias de la IA',
  
  // Coste
  apiCosts: 'gasto mensual en herramientas de IA',
  creditsUsed: 'créditos de Cursor consumidos',
  
  // Aprendizaje
  newPatternsLearned: 'técnicas que aprendiste de la IA',
  codebaseUnderstanding: 'cuánto te ayudó la IA a aprender',
}

11) Errores comunes

Confiar demasiado en el agente

❌ Aceptar grandes cambios sin revisarlos
❌ Permitir que los agentes ejecuten comandos destructivos
❌ No comprender el código antes de publicarlo

✅ Revisar cada cambio
✅ Comprender lo que publicas
✅ Usar los agentes como colaboradores, no como sustitutos

Contaminación del contexto

❌ Instrucciones enormes con contexto irrelevante
❌ No borrar el contexto entre tareas sin relación
❌ Incluir archivos generados en el contexto

✅ Mantener las instrucciones centradas
✅ Usar referencias específicas de @file
✅ Excluir los artefactos de compilación

Ambigüedad en las instrucciones

❌ "Mejóralo"
❌ "Corrige los problemas"
❌ "Añade algunas pruebas"

✅ "Reduce la complejidad temporal de O(n²) a O(n log n)"
✅ "Gestiona el caso null en la línea 45 devolviendo el resultado antes"
✅ "Añade pruebas para los casos límite: entrada vacía, longitud máxima, Unicode"

12) Lista de comprobación para empezar

## Lista de comprobación de la configuración

### Claude Code
- [ ] Instalar la CLI: `npm install -g @anthropic/claude-code`
- [ ] Autenticarse: `claude login`
- [ ] Crear `.claude/config.json`
- [ ] Añadir `.claudeignore` para los archivos confidenciales

### Cursor
- [ ] Descargarlo desde cursor.com
- [ ] Importar la configuración de VS Code
- [ ] Configurar `.cursor/rules/`
- [ ] Aprender a usar `Cmd+Shift+I` para el modo Agent

### GitHub Copilot
- [ ] Instalar la extensión en tu IDE
- [ ] Activar Copilot Chat
- [ ] Probar Copilot Workspace con issues
- [ ] Configurar `.github/copilot-instructions.md`

### Todas las herramientas
- [ ] Configurar controles de aprobación para las operaciones destructivas
- [ ] Crear archivos de exclusión para los secretos
- [ ] Establecer un flujo de trabajo de revisión
- [ ] Registrar métricas desde el primer día

Contenido relacionado

• Publica un juego web que cargue rápido
• Web Workers para la lógica del juego
• Game jams y hackatones — las herramientas de código con IA están cambiando lo que se puede lograr en una game jam de 48 horas
• Comparación de motores de juegos web — cómo elegir un motor que encaje bien con los flujos de trabajo asistidos por IA

La analítica te ayuda a entender qué hacen los jugadores, dónde encuentran dificultades y qué mantiene su interés. Este tutorial muestra qué registrar y cómo hacerlo.

1) Qué registrar

Métricas de interacción:

• Inicios y duración de las sesiones
• Niveles iniciados y completados
• Funciones utilizadas
• Retención (visitas recurrentes)

Métricas de rendimiento:

• Tiempo de carga
• Tasa de fotogramas
• Uso de memoria
• Errores y cierres inesperados

Métricas de conversión:

• Finalización del tutorial
• Primera compra
• Contenido compartido en redes sociales

2) Registro sencillo 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) Registro de sesiones

// 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 del juego

// 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) Supervisión del rendimiento

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)

Atribuir los tirones con Long Animation Frames

El contador de FPS anterior te indica cuándo se pierden fotogramas, pero no por qué. La API Long Animation Frames (LoAF), incorporada en Chrome y Edge 123, cubre esa carencia. Detecta cualquier fotograma que tarde más de 50 ms y desglosa qué scripts provocaron el retraso, para que puedas atribuir los tirones a código específico en lugar de hacer conjeturas.

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 ahora, LoAF solo está disponible en Chromium (no en Firefox ni Safari), así que comprueba si la función está disponible antes de usarla y conserva el contador de FPS como referencia compatible con todos los navegadores.

6) Registro de errores

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) Registro del tiempo de carga

// 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) Registro de embudos

Registra el progreso de los jugadores a través de los flujos clave:

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) Compatibilidad con pruebas 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) Consideraciones sobre la privacidad

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>Utilizamos analítica para mejorar el juego. ¿Estás de acuerdo?</p>
    <button id="accept">Aceptar</button>
    <button id="decline">Rechazar</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 terceros

Si no quieres crear tu propia solución:

• Plausible — Sencillo y centrado en la privacidad
• Amplitude — Analítica de producto y embudos
• Mixpanel — Registro de eventos y recorridos de usuario
• Sentry — Especializado en el registro de errores

// 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' } })

Relacionado

• Publica un juego web que cargue rápido
• Partidas guardadas con IndexedDB
• Para creadores
• Cómo lanzar tu juego en itch.io — analítica de itch.io y seguimiento de descargas
• Estrategia para Steam Next Fest — medición de listas de deseos y tasas de conversión de la demo

Recursos externos

• Plausible Analytics — analítica ligera y respetuosa con la privacidad
• PostHog — analítica de producto de código abierto con registro de eventos
• Sentry — supervisión de errores e informes de cierres inesperados para aplicaciones web

El bucle de juego es el corazón de tu juego. Se ejecuta continuamente, actualizando el estado del juego y dibujando fotogramas tan rápido como lo permita el navegador. Si lo haces bien, todo lo demás será más fácil. Si lo haces mal, acabarás persiguiendo errores que solo aparecen en determinados equipos.

Pruébalo (usa las teclas de dirección o WASD):

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

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

function update() {
  // Lógica del juego aquí
}

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // Dibujo aquí
}

gameLoop()

let lastTime = 0

function gameLoop(currentTime) {
  const dt = (currentTime - lastTime) / 1000 // convertir a segundos
  lastTime = currentTime
  
  update(dt)
  render()
  
  requestAnimationFrame(gameLoop)
}

function update(dt) {
  player.x += player.speed * dt // ahora funciona con cualquier frecuencia de fotogramas
}

requestAnimationFrame(gameLoop)

const FIXED_DT = 1 / 60 // 60 actualizaciones físicas por segundo
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
  
  // Mantener dentro de los límites
  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)
}

// Gestión de la entrada
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)

// En update:
playerWalk.update(dt)

// En 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
}

// En 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)
  
  // Dibujar el mundo
  drawWorld()
  drawEntities()
  
  ctx.restore()
  
  // Dibujar la interfaz de usuario (no afectada por la cámara)
  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('EN PAUSA', canvas.width / 2, canvas.height / 2)
}

Si tu juego web (o la exportación de tu motor) utiliza hilos de WebAssembly, normalmente depende de SharedArrayBuffer. Los navegadores modernos requieren aislamiento entre orígenes para ello.

1) Comprobación rápida: ¿tu sitio está aislado?

Abre DevTools y ejecuta:

self.crossOriginIsolated

Si el resultado es true, estás en el estado de seguridad adecuado para utilizar SharedArrayBuffer.

Referencia oficial:

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

2) Las dos cabeceras que necesitas

Envía estas cabeceras de respuesta en tu HTML (y, por lo general, en toda tu aplicación):

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

Referencias oficiales:

• 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) La razón principal por la que «sigue sin funcionar»: los subrecursos

Con COEP: require-corp, tu página ya no puede incrustar libremente recursos de otros orígenes.

Si cargas un script, una imagen, un worker, un vídeo u otro recurso desde otro origen, ese recurso debe autorizarlo mediante:

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

Referencia oficial:

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

4) Configuraciones listas para copiar y pegar

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) Lista de comprobación para depurar problemas

• Confirma que las cabeceras estén presentes en la respuesta del documento en el panel Red.
• Comprueba self.crossOriginIsolated.
• Busca solicitudes bloqueadas (un mensaje habitual de DevTools incluye “blocked … by COEP”).
• Elimina o aloja en tu propio servidor los scripts de terceros que no sean compatibles con CORS/CORP.

Contenido relacionado

• Publica un juego web que cargue rápido
• Tecnologías para juegos web en 2026
• Web Workers para la lógica del juego — uso de Workers que se benefician de SharedArrayBuffer
• Conceptos básicos del multijugador con WebSocket — juegos multijugador que necesitan aislamiento entre orígenes
• Incrustar juegos mediante iframe — cómo afectan las cabeceras COOP/COEP a las incrustaciones mediante iframe

Recursos externos

• MDN: Cross-Origin-Opener-Policy — referencia de la cabecera COOP
• MDN: Cross-Origin-Embedder-Policy — referencia de la cabecera COEP
• web.dev: Cómo aislar tu sitio web entre orígenes — guía práctica de despliegue

Una buena gestión de las entradas puede determinar el éxito o el fracaso de un juego. Los controles con retraso, las entradas que no se detectan o las asignaciones de botones confusas frustran a los jugadores antes incluso de que vean el contenido del juego. Este tutorial muestra cómo gestionar el teclado, el ratón, la pantalla táctil y el mando de forma unificada.

Pruébalo primero:

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) {
    // D-pad or left stick
    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
    
    // A button (standard mapping)
    input.action = gp.buttons[0]?.pressed
  }
}

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

window.addEventListener('gamepaddisconnected', (e) => {
  console.log('Gamepad disconnected:', 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
})

La simulación física da vida a los juegos: objetos que caen, pelotas que rebotan, muñecos de trapo, vehículos y entornos destructibles. Esta guía abarca las principales bibliotecas de física disponibles para juegos web, con ejemplos de código reales y ventajas y desventajas honestas.

Resumen

Leyenda:

• CCD = Detección continua de colisiones (evita que los objetos rápidos atraviesen las paredes)
• ⚠️ Determinismo = Es posible con un intervalo de tiempo fijo, pero no está garantizado entre distintas plataformas

Recomendaciones rápidas

Comparación detallada

Motores de física 3D

Motores de física 2D

Motores de física 3D

Rapier — La opción moderna

Rapier es un motor de física escrito en Rust con enlaces para JavaScript/WASM. Es la opción de mayor rendimiento para juegos web en 2025-2026, con mejoras de velocidad de entre 2 y 5 veces respecto a su versión de 2024.

Instalación:

npm install @dimforge/rapier3d
# O con SIMD (más rápido, requiere navegadores modernos):
npm install @dimforge/rapier3d-simd

Configuración básica:

import RAPIER from '@dimforge/rapier3d'

// Inicialización (WASM requiere que sea asíncrona)
await RAPIER.init()

// Crear un mundo con gravedad
const gravity = { x: 0, y: -9.81, z: 0 }
const world = new RAPIER.World(gravity)

// Crear el suelo (cuerpo estático)
const groundDesc = RAPIER.RigidBodyDesc.fixed()
const groundBody = world.createRigidBody(groundDesc)
const groundCollider = RAPIER.ColliderDesc.cuboid(50, 0.1, 50)
world.createCollider(groundCollider, groundBody)

// Crear una caja que cae (cuerpo dinámico)
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)

Integración con el bucle del juego:

const FIXED_TIMESTEP = 1 / 60

function physicsStep() {
  world.step()
}

function gameLoop() {
  physicsStep()
  
  // Sincronizar los objetos renderizados con la física
  const position = boxBody.translation()
  const rotation = boxBody.rotation()
  
  // Actualizar tu malla de Three.js/Babylon
  mesh.position.set(position.x, position.y, position.z)
  mesh.quaternion.set(rotation.x, rotation.y, rotation.z, rotation.w)
  
  requestAnimationFrame(gameLoop)
}

Detección de colisiones:

// Detección de colisiones basada en eventos
world.contactPairsWith(boxCollider, (otherCollider) => {
  console.log('La caja está tocando:', 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('Impacto en:', hitPoint)
}

Articulaciones:

// Crear una articulación de bisagra (puerta)
const jointData = RAPIER.JointData.revolute(
  { x: 0, y: 0, z: 0 },  // Anclaje en body1
  { x: -1, y: 0, z: 0 }, // Anclaje en body2
  { x: 0, y: 1, z: 0 }   // Eje de rotación
)
world.createImpulseJoint(jointData, body1, body2, true)

Controlador de vehículos:

// Crear el cuerpo rígido del chasis
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)

// Crear el controlador del vehículo
const vehicle = world.createVehicleController(chassis)

// Añadir ruedas (delantera izquierda, delantera derecha, trasera izquierda, trasera derecha)
const suspensionRestLength = 0.3
const wheelRadius = 0.4

// Ruedas delanteras (dirección)
vehicle.addWheel(
  { x: -0.8, y: 0, z: 1.2 },   // Punto de conexión
  { x: 0, y: -1, z: 0 },       // Dirección de la suspensión
  { x: -1, y: 0, z: 0 },       // Dirección del eje
  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
)

// Ruedas traseras (tracción)
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
)

// Configurar la suspensión de todas las ruedas
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)
}

// En el bucle del juego
function updateVehicle(steering, engineForce, brakeForce) {
  // Dirección (solo ruedas delanteras)
  vehicle.setWheelSteering(0, steering)
  vehicle.setWheelSteering(1, steering)
  
  // Motor (ruedas traseras)
  vehicle.setWheelEngineForce(2, engineForce)
  vehicle.setWheelEngineForce(3, engineForce)
  
  // Frenos (todas las ruedas)
  for (let i = 0; i < 4; i++) {
    vehicle.setWheelBrake(i, brakeForce)
  }
  
  // Actualizar la física del vehículo
  vehicle.updateVehicle(world.timestep)
}

Ventajas:

• El mejor rendimiento (WASM + SIMD)
• Excelente precisión en la detección de colisiones
• Determinismo multiplataforma (mismas entradas = mismas salidas)
• Desarrollo activo y API moderna
• Detección continua de colisiones (sin atravesar objetos)
• Controladores de personajes y vehículos integrados

Desventajas:

• Paquete más grande (~1,4 MB)
• Requiere inicialización asíncrona
• API más compleja que las alternativas de JS puro
• La depuración de WASM puede ser complicada

Cannon-es — Sencillo y eficaz

Cannon-es es el fork con mantenimiento activo de Cannon.js. Está escrito en JavaScript puro, es fácil de entender y resulta excelente para aprender y crear prototipos.

Instalación:

npm install cannon-es

Configuración básica:

import * as CANNON from 'cannon-es'

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

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

// Esfera que cae
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)

Bucle del juego:

const TIMESTEP = 1 / 60

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

Eventos de colisión:

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

Restricciones:

// Restricción de distancia (similar a una cuerda)
const constraint = new CANNON.DistanceConstraint(
  bodyA, bodyB, 
  2 // distancia
)
world.addConstraint(constraint)

// Restricción de bisagra
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)

Ventajas:

• JavaScript puro, sin la complejidad de WASM
• Paquete pequeño (~150 KB)
• Fácil de aprender y depurar
• Funciona en todas partes
• Excelente integración con Three.js
• Buena documentación

Desventajas:

• Más lento que las alternativas basadas en WASM
• Tiene dificultades con muchos cuerpos (>100)
• Compatibilidad limitada con mallas trianguladas
• Sin CCD integrado (los objetos pueden atravesarse)
• Desarrollo menos activo

Ammo.js — Toda la potencia de Bullet Physics

Ammo.js es el motor Bullet Physics compilado a WebAssembly. Ofrece el máximo número de funciones, incluidos cuerpos blandos, vehículos y restricciones avanzadas.

Instalación:

npm install ammo.js
# O usar desde una CDN

Configuración 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
}

Cuerpos blandos (tela):

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 vehí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)
  
  // Añadir ruedas
  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))   // Delantera izquierda
  addWheel(true, new Ammo.btVector3(-1, 0, 1.5))  // Delantera derecha
  addWheel(false, new Ammo.btVector3(1, 0, -1.5)) // Trasera izquierda
  addWheel(false, new Ammo.btVector3(-1, 0, -1.5))// Trasera derecha
  
  return vehicle
}

Ventajas:

• El conjunto de funciones más completo
• Cuerpos blandos, telas y cuerdas
• Física avanzada de vehículos
• Probado exhaustivamente (se utiliza en muchos juegos AAA)
• Altamente configurable Desventajas:
• API compleja y verbosa
• Tamaño de paquete grande
• Requiere gestión de memoria (destruir objetos)
• Curva de aprendizaje pronunciada
• Documentación dispersa
• No ofrece determinismo multiplataforma (solo en el mismo dispositivo y con una configuración cuidadosa)

Jolt — física 3D moderna con calidad AAA

Jolt Physics es el motor que impulsa juegos como Horizon Forbidden West, y JoltPhysics.js lo lleva al navegador mediante una adaptación a WASM. Es una excelente opción intermedia entre Rapier y Ammo.js: ofrece más funciones que Rapier (cuerpos blandos, telas y un controlador para vehículos con ruedas) y cuenta con el mantenimiento activo del que carece Ammo.js. El paquete npm es jolt-physics, y existen integraciones listas para usar con React Three Fiber (@react-three/jolt) y Babylon.js.

npm install jolt-physics

Al igual que Rapier, usa WASM con inicialización asíncrona y una API detallada pero completa que reproduce la interfaz de C++. Elige Jolt cuando necesites funciones comparables a las de Bullet (cuerpos blandos y vehículos), pero prefieras una base de código moderna y mantenida en lugar de Ammo.js.

Oimo.js — ligero y rápido

Oimo.js es un motor de física 3D ligero. Es ideal para juegos sencillos que no necesitan funciones avanzadas.

Instalación:

npm install oimo

Configuración básica:

import * as OIMO from 'oimo'

const world = new OIMO.World({
  timestep: 1/60,
  iterations: 8,
  broadphase: 2, // 1: fuerza bruta, 2: barrido y poda, 3: árbol de volúmenes
  worldscale: 1,
  random: true,
  gravity: [0, -9.8, 0]
})

// Crear el suelo
world.add({
  type: 'box',
  size: [100, 1, 100],
  pos: [0, -0.5, 0],
  move: false
})

// Crear una esfera que cae
const sphere = world.add({
  type: 'sphere',
  size: [1],
  pos: [0, 10, 0],
  move: true,
  density: 1,
  friction: 0.4,
  restitution: 0.2
})

Bucle del juego:

function animate() {
  world.step()
  
  // Obtener la posición/rotación
  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)
}

Ventajas:

• Muy pequeño (~100 KB)
• API sencilla
• Buen rendimiento en escenas básicas
• Compatibilidad integrada con Babylon.js

Desventajas:

• Formas limitadas (solo primitivas)
• Sin cuerpos blandos
• Documentación escasa
• Desarrollo menos activo
• Opciones de articulaciones limitadas

Motores de física 2D

Matter.js — atractivo e intuitivo

Matter.js es un motor de física 2D rico en funciones, con excelentes herramientas de renderizado y depuración.

Instalación:

npm install matter-js

Configuración básica:

import Matter from 'matter-js'

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

// Crear el motor
const engine = Engine.create()

// Crear el renderizador (opcional, excelente para depurar)
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false
  }
})

// Crear cuerpos
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
})

// Añadir al mundo
World.add(engine.world, [ground, box, circle])

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

Eventos de colisión:

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

Restricciones:

// Restricción de anclaje
const pin = Matter.Constraint.create({
  pointA: { x: 400, y: 100 },
  bodyB: box,
  stiffness: 0.9
})

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

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

Interacción con el ratón:

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)

Ventajas:

• Renderizado predeterminado atractivo
• Excelente para aprender y crear prototipos
• API intuitiva
• Buena documentación
• Comunidad activa
• Determinista de forma predeterminada: Matter.Runner ahora usa un paso temporal fijo y determinista (el paso temporal no fijo se eliminó en la versión 0.20.0)

Desventajas:

• Sin CCD (los objetos rápidos pueden atravesar otros; usa subpasos para mitigarlo)
• Problemas de rendimiento con muchos cuerpos
• Sin opción WASM
• Precisión limitada en simulaciones complejas

Planck.js — Box2D para JavaScript

Planck.js es una reimplementación completa de Box2D en JavaScript. Ofrece física probada en numerosos juegos y es determinista cuando se usa un paso temporal fijo.

Instalación:

npm install planck

Configuración básica:

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

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

// Crear el suelo
const ground = world.createBody()
ground.createFixture({
  shape: Edge(Vec2(-40, 0), Vec2(40, 0))
})

// Crear una caja 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
})

Bucle del juego con paso temporal fijo:

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

function gameLoop() {
  world.step(TIMESTEP, VELOCITY_ITERATIONS, POSITION_ITERATIONS)
  
  // Recorrer todos los cuerpos
  for (let body = world.getBodyList(); body; body = body.getNext()) {
    const pos = body.getPosition()
    const angle = body.getAngle()
    // Actualizar tus sprites...
  }
  
  requestAnimationFrame(gameLoop)
}

Callbacks de colisión:

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

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

world.on('pre-solve', (contact, oldManifold) => {
  // Aquí puedes desactivar el contacto
  // contact.setEnabled(false)
})

Articulaciones:

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

// Articulación revoluta (bisagra)
const joint = world.createJoint(RevoluteJoint({
  bodyA: ground,
  bodyB: box,
  localAnchorA: Vec2(0, 5),
  localAnchorB: Vec2(-1, 0),
  enableMotor: true,
  maxMotorTorque: 1000,
  motorSpeed: 2
}))

// Articulación de distancia (resorte)
world.createJoint(DistanceJoint({
  bodyA: boxA,
  bodyB: boxB,
  localAnchorA: Vec2(0, 0),
  localAnchorB: Vec2(0, 0),
  length: 5,
  stiffness: 10,
  damping: 0.5
}))

Ventajas:

• Determinista con un paso temporal fijo
• Bien documentado (se aplica la documentación de Box2D)
• Buen rendimiento
• Compatibilidad con TypeScript
• Tamaño de paquete pequeño

Desventajas:

• El CCD no funciona con articulaciones, por lo que los objetos rápidos conectados mediante articulaciones pueden estirarse
• Curva de aprendizaje más pronunciada que Matter.js
• Sin renderizador integrado
• Particularidades de Box2D (la escala de unidades es importante)

p2-es — física 2D flexible

p2-es es el fork mantenido de p2.js. Es ideal para juegos que necesitan restricciones y mecanismos complejos.

Instalación:

npm install p2-es

Configuración básica:

import * as p2 from 'p2-es'

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

// Suelo
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)

Restricciones avanzadas:

// Restricción de engranaje
const gear = new p2.GearConstraint(bodyA, bodyB, {
  ratio: 2 // bodyB gira al doble de velocidad
})
world.addConstraint(gear)

// Restricción prismática (deslizador)
const prismatic = new p2.PrismaticConstraint(bodyA, bodyB, {
  localAnchorA: [0, 0],
  localAnchorB: [0, 0],
  localAxisA: [1, 0],
  disableRotationalLock: false
})
world.addConstraint(prismatic)

// Restricción de bloqueo (soldadura)
const lock = new p2.LockConstraint(bodyA, bodyB)
world.addConstraint(lock)

Materiales de contacto:

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 a las formas
iceBody.shapes[0].material = ice
rubberBody.shapes[0].material = rubber

Ventajas:

• Sistema de restricciones completo
• Materiales de contacto
• Adecuado para mecanismos y máquinas
• Cuerpos en reposo (mejor rendimiento)
• Módulos ES compatibles con tree shaking

Desventajas:

• Sin renderizador integrado
• Algunas combinaciones de formas no son compatibles
• Menos activo que otras alternativas
• Lagunas en la documentación

Consejos de rendimiento

1. Usa un paso temporal fijo

const TIMESTEP = 1 / 60
let accumulator = 0

function gameLoop(deltaTime) {
  accumulator += deltaTime
  
  while (accumulator >= TIMESTEP) {
    world.step(TIMESTEP)
    accumulator -= TIMESTEP
  }
  
  // Interpolar para obtener un renderizado fluido
  const alpha = accumulator / TIMESTEP
  // lerp(previousState, currentState, alpha)
}

2. Pon en reposo los cuerpos inactivos

La mayoría de los motores admiten cuerpos en reposo. Activa esta función:

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

// Rapier
bodyDesc.setCanSleep(true)

3. Usa formas de colisión sencillas

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

// EVITA: mallas triangulares complejas para cuerpos dinámicos
const trimesh = new CANNON.Trimesh(vertices, indices) // ¡Lento!

4. Reduce las iteraciones del solucionador (con cuidado)

// Cannon-es
world.solver.iterations = 5 // Valor predeterminado: 10

// Rapier: se configura al crear el mundo

5. Ejecuta la física en un 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
  // Actualizar los objetos de renderizado
}

// 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())
    })
  }
}

Cuándo usar cada motor

Integración con 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() // cuerpo físico -> malla

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)
  
  // Renderizado
  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)
  
  // Renderizado
  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
  })
})

Errores frecuentes

La escala es importante

Los motores de física funcionan mejor con una escala del mundo real (1 unidad = 1 metro). No uses coordenadas de píxeles directamente.

// MAL: usar posiciones en píxeles
const body = Bodies.circle(400, 300, 50) // ¿Radio de 50 píxeles?

// BIEN: usar un factor de escala
const SCALE = 50 // 50 píxeles por metro
const body = Bodies.circle(8, 6, 1) // Radio de 1 metro
// Después, multiplicar por SCALE al renderizar

Fugas de memoria con motores WASM

Libera siempre los cuerpos cuando los elimines:

// Rapier
world.removeRigidBody(body)

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

Efecto túnel (objetos que se atraviesan)

Los objetos que se mueven rápidamente pueden atravesar paredes delgadas. Soluciones:

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

// Cannon-es: usar pasos temporales más pequeños o paredes más gruesas
world.step(1/120) // 120 Hz en lugar de 60

Contenido relacionado

• Fundamentos de WebGL para desarrolladores de juegos
• Web Workers para la lógica del juego — descarga los cálculos físicos en un hilo Worker
• Publica un juego web que cargue rápido
• Bucle de juego con Canvas 2D — el patrón de paso de tiempo fijo utilizado por todos los motores de física
• Stack tecnológico para juegos web en 2026 — cómo encajan los motores de física en el stack general
• Comparativa de motores para juegos web — motores con soporte de física integrado

Recursos externos

• Documentación de Rapier — documentación oficial y ejemplos de física con Rapier
• Documentación de Cannon-es — referencia de la API y guías
• Documentación de Matter.js — referencia completa de la API
• Documentación de Planck.js — Box2D para JavaScript

La API de Gamepad ofrece compatibilidad con mandos con calidad de consola para juegos web. Permite usar mandos de Xbox, PlayStation, Switch Pro y mandos genéricos.

1) Detección de gamepads

window.addEventListener('gamepadconnected', (e) => {
  console.log('Gamepad connected:', e.gamepad.id)
  console.log('Index:', e.gamepad.index)
  console.log('Buttons:', e.gamepad.buttons.length)
  console.log('Axes:', e.gamepad.axes.length)
})

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

2) Consulta del estado del gamepad

El estado del gamepad debe consultarse periódicamente (no se controla mediante eventos):

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

// Call in your game loop
function gameLoop() {
  pollGamepads()
  update()
  render()
  requestAnimationFrame(gameLoop)
}

3) Asignación estándar de botones

La asignación «standard» (para la mayoría de los mandos de Xbox y PlayStation):

const BUTTONS = {
  A: 0,           // Cross (PS) / A (Xbox)
  B: 1,           // Circle (PS) / B (Xbox)
  X: 2,           // Square (PS) / X (Xbox)
  Y: 3,           // Triangle (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,         // Left stick press
  R3: 11,         // Right stick press
  DPAD_UP: 12,
  DPAD_DOWN: 13,
  DPAD_LEFT: 14,
  DPAD_RIGHT: 15,
  HOME: 16,       // PS button / Xbox button
}

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

4) Lectura de botones y sticks

function processGamepad(gamepad) {
  // Buttons (digital or analog)
  const jump = gamepad.buttons[BUTTONS.A].pressed
  const shoot = gamepad.buttons[BUTTONS.X].pressed
  
  // Triggers (analog 0-1)
  const leftTrigger = gamepad.buttons[BUTTONS.LT].value
  const rightTrigger = gamepad.buttons[BUTTONS.RT].value
  
  // Sticks (analog -1 to 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) Gestión de la zona muerta

Los sticks rara vez permanecen exactamente en 0:

function applyDeadzone(value, deadzone = 0.15) {
  if (Math.abs(value) < deadzone) return 0
  
  // Rescale remaining range to 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 muerta radial (mejor para el movimiento 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,
  }
}

// Usage
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) Gestor 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('Connected:', 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,
      
      // Face buttons
      a: gp.buttons[0].pressed,
      b: gp.buttons[1].pressed,
      x: gp.buttons[2].pressed,
      y: gp.buttons[3].pressed,
      
      // Bumpers
      lb: gp.buttons[4].pressed,
      rb: gp.buttons[5].pressed,
      
      // Triggers (analog)
      lt: gp.buttons[6].value,
      rt: gp.buttons[7].value,
      
      // D-pad
      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)
    }
  }
}

// Usage
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) Vibración y respuesta háptica

function vibrate(gamepad, duration = 200, weakMagnitude = 0.5, strongMagnitude = 0.5) {
  if (gamepad.vibrationActuator) {
    gamepad.vibrationActuator.playEffect('dual-rumble', {
      startDelay: 0,
      duration,
      weakMagnitude,   // High frequency motor
      strongMagnitude, // Low frequency motor
    })
  }
}

// Usage
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) Varios jugadores

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) {
    // ... same as before
  }
}

// In game loop
const multiplayer = new LocalMultiplayer(4)

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

10) Entrada alternativa y combinada

Admite tanto el teclado como el 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()
    
    // Combine inputs (gamepad takes priority for analog)
    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()
  }
}

Contenido relacionado

• Gestión de controles de juego
• Juegos web adaptados a dispositivos móviles
• Bucle de juego con Canvas 2D
• Pointer Lock para juegos FPS — combina el gamepad con la vista controlada mediante el ratón
• Diseño de juegos cooperativos — cómo diseñar para varios mandos en modo cooperativo local

Recursos externos

• MDN: API de Gamepad — referencia completa de la API
• MDN: Uso de la API de Gamepad — guía paso a paso
• Gamepad Tester — prueba las asignaciones de tu mando en el navegador

Muchas plataformas (Itch.io, Newgrounds, Cinevva o tu propio sitio) integran juegos mediante iframes. Este tutorial explica cómo hacer que tu juego funcione correctamente cuando está integrado.

1) Configuración básica para la integración

Tu juego debe funcionar sin necesitar el control total de la 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) Detectar el contexto del iframe

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

if (isEmbedded) {
  // Adjust behavior for embedded context
  hideExternalLinks()
  adjustUIForSmallSize()
}

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

3) Permitir los permisos necesarios del iframe

La página principal controla lo que puede hacer tu iframe. Estos son algunos permisos habituales:

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

Tu juego debe gestionar correctamente la falta de permisos:

// Check if fullscreen is available
const canFullscreen = document.fullscreenEnabled || document.webkitFullscreenEnabled

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

4) Pantalla completa desde un iframe

La pantalla completa requiere el 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) {
    // Fullscreen not allowed - show message
    showMessage('La pantalla completa no está disponible cuando el juego está integrado')
  }
}

5) Comunicación con la página principal

Usa postMessage para establecer una comunicación segura entre distintos orígenes:

En tu juego:

// Send message to parent
function notifyParent(type, data) {
  if (window.parent !== window) {
    window.parent.postMessage({ type, data, source: 'game' }, '*')
  }
}

// Receive messages from parent
window.addEventListener('message', (event) => {
  // Validate origin if needed
  // 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
  }
})

// Notify when game is ready
window.addEventListener('load', () => {
  notifyParent('ready', { width: 800, height: 600 })
})

// Notify on game events
function onGameOver(score) {
  notifyParent('gameover', { score })
}

En la página principal:

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

iframe.addEventListener('load', () => {
  // Listen for messages from game
  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('Game ready:', data)
    }
    if (type === 'gameover') {
      showScoreModal(data.score)
    }
  })
})

// Send commands to game
function pauseGame() {
  iframe.contentWindow.postMessage({ type: 'pause' }, '*')
}

6) Gestionar el foco

Los iframes pueden perder el foco e impedir que funcione la entrada del teclado:

// Auto-focus canvas when clicked
canvas.addEventListener('click', () => {
  canvas.focus()
})

// Make canvas focusable
canvas.tabIndex = 1

// Handle focus loss
window.addEventListener('blur', () => {
  // Reset held keys
  input.left = input.right = input.up = input.down = false
  
  if (isEmbedded) {
    // Optionally pause
    // pauseGame()
  }
})

// Request focus from parent
function requestFocus() {
  notifyParent('requestFocus', {})
}

7) Tamaño adaptable del contenido integrado

Gestiona las distintas dimensiones de integración:

function handleResize() {
  const width = window.innerWidth
  const height = window.innerHeight
  
  // Adjust UI based on size
  if (width < 400 || height < 300) {
    enableCompactUI()
  } else {
    enableFullUI()
  }
  
  // Scale game appropriately
  resizeCanvas(width, height)
}

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

8) Indicador de carga para contenido integrado

Muestra algo de inmediato:

// Inline in HTML for instant display
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>Cargando...</p>
    </div>
  </div>
`

// Remove when game is ready
function hideLoading() {
  const loading = document.getElementById('loading')
  if (loading) {
    loading.style.opacity = '0'
    loading.style.transition = 'opacity 0.3s'
    setTimeout(() => loading.remove(), 300)
  }
}

9) SDK específicos de cada plataforma

Algunas plataformas tienen sus propias API:

Itch.io:

// No SDK required, but can use postMessage for achievements
window.parent.postMessage({ type: 'itch-achievement', data: { id: 'first-win' }}, '*')

Newgrounds:

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

Cinevva:

// Signal game is ready
window.parent.postMessage({ type: 'cinevva:ready' }, '*')

// Signal playable state
window.parent.postMessage({ type: 'cinevva:playable' }, '*')

10) Consideraciones de seguridad

// Validate message origins when sensitive
window.addEventListener('message', (event) => {
  const trustedOrigins = [
    'https://itch.io',
    'https://cinevva.com',
    'https://yoursite.com'
  ]
  
  if (!trustedOrigins.includes(event.origin)) {
    return // Ignore untrusted messages
  }
  
  // Process message...
})

// Don't expose sensitive operations via postMessage
// Only allow whitelisted commands
const allowedCommands = ['pause', 'resume', 'setVolume', 'mute']

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

Lista de comprobación para las pruebas

• Pruebas locales: Usa un servidor HTTP sencillo, no file://
• Entre distintos orígenes: Prueba el juego integrado en un iframe real
• Permisos: Haz pruebas con un entorno aislado restringido
• Foco: Prueba el teclado después de hacer clic fuera del iframe
• Cambio de tamaño: Prueba distintas dimensiones de integración
• Dispositivos móviles: Prueba los controles táctiles en un contexto integrado

<!-- Test embed page -->
<!DOCTYPE html>
<html>
<body style="background: #333; padding: 20px;">
  <h1 style="color: #fff;">Prueba de integración</h1>
  <iframe 
    src="http://localhost:8000" 
    width="800" 
    height="600"
    allow="fullscreen; autoplay; gamepad"
  ></iframe>
</body>
</html>

Contenido relacionado

• Publica un juego web que cargue rápido
• Juegos web adaptados a dispositivos móviles
• Para creadores
• COOP/COEP y SharedArrayBuffer — cabeceras entre distintos orígenes que afectan a la integración mediante iframe
• Cómo lanzar tu juego en itch.io — itch.io integra de forma nativa los juegos de navegador mediante iframes

Recursos externos

• MDN: elemento iframe — referencia completa de los atributos de iframe
• MDN: política de permisos — controla qué funciones pueden usar los iframes
• MDN: API postMessage — comunicación entre el iframe y la página principal

IndexedDB es la mejor opción para almacenar datos persistentes de juegos en el navegador. Gestiona grandes cantidades de datos, funciona sin conexión y no bloquea el hilo principal.

1) ¿Por qué usar IndexedDB en lugar de localStorage?

Para los juegos, IndexedDB casi siempre es la opción adecuada.

2) Abrir una base de datos

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
      
      // Create stores
      if (!db.objectStoreNames.contains('saves')) {
        db.createObjectStore('saves', { keyPath: 'slot' })
      }
      if (!db.objectStoreNames.contains('settings')) {
        db.createObjectStore('settings', { keyPath: 'key' })
      }
    }
  })
}

3) Guardar el estado del juego

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) Cargar el estado del juego

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) Enumerar todas las partidas guardadas

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) Eliminar una partida guardada

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) Una clase 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) Almacenar datos binarios (texturas y audio)

IndexedDB admite Blobs y 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) Patrón de guardado 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('Autosaved')
      }
    }, this.interval)
  }
  
  stop() {
    clearInterval(this.timer)
  }
}

10) Gestión de errores y alternativas

async function safeLoad(slot, defaultState) {
  try {
    const saved = await loadGame(slot)
    if (saved) {
      // Validate/migrate old saves if needed
      return migrateSave(saved)
    }
  } catch (err) {
    console.warn('Failed to load save:', err)
  }
  return defaultState
}

function migrateSave(save) {
  // Handle old save formats
  if (!save.version) {
    save.version = 1
    save.settings = save.settings || {}
  }
  return save
}

11) Evitar que se eliminen las partidas guardadas

No se garantiza que los datos de IndexedDB permanezcan indefinidamente. De forma predeterminada, un origen utiliza almacenamiento de «mejor esfuerzo», y el navegador puede eliminarlo cuando el disco se llena o, en Safari/WebKit, después de un periodo sin interacción del usuario con tu sitio. En el caso de las partidas guardadas, esos son precisamente los datos que no quieres perder.

Solicita almacenamiento persistente para que el navegador no borre tus datos sin una acción explícita del usuario:

async function makeStoragePersistent() {
  if (navigator.storage && navigator.storage.persist) {
    const persisted = await navigator.storage.persist()
    console.log(persisted ? 'Saves are protected from eviction' : 'Saves may be evicted under storage pressure')
    return persisted
  }
  return false
}

Los navegadores deciden si lo conceden en función de señales de interacción, como cuánto interactúa el usuario con tu sitio o si está instalado como PWA, así que no des por hecho que siempre funcionará. También puedes comprobar cuánto espacio tienes disponible antes de escribir partidas guardadas grandes o recursos en caché:

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

Ambas API necesitan un contexto seguro (HTTPS o localhost).

Contenido relacionado

• PWA para juegos sin conexión
• Service workers para almacenar juegos en caché
• Publica un juego web que cargue rápido
• Carga de recursos por streaming — uso de IndexedDB como caché de recursos
• Analítica para juegos web — seguimiento de patrones de guardado y carga para comprender el comportamiento de los jugadores

Recursos externos

• MDN: API de IndexedDB — referencia completa de la API
• MDN: Uso de IndexedDB — guía paso a paso
• Biblioteca idb — un pequeño contenedor de IndexedDB basado en promesas

Los dispositivos móviles son la mayor plataforma de juegos. Con unos pocos ajustes, puedes hacer que tu juego web funcione de maravilla en teléfonos y tabletas.

1) Configuración del viewport

Evita el zoom y garantiza un escalado correcto:

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

2) Canvas a pantalla completa

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  touch-action: none; /* Prevent browser gestures */
}

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

Si dimensionas la interfaz según la altura del viewport en lugar de usar height: 100%, es preferible utilizar las unidades dinámicas de viewport dvh, svh y lvh en vez de vh. Estas tienen en cuenta la barra de herramientas retráctil y expandible del navegador móvil, algo que 100vh ignora (en iOS, 100vh corresponde a la altura con la barra de herramientas oculta, por lo que la parte inferior del diseño queda recortada). Estas unidades alcanzaron el estado Baseline Widely Available y son compatibles con Chrome/Edge 108+, Firefox 101+ y Safari/iOS Safari 15.4+, aproximadamente el 92 % de los usuarios.

3) Gestión de eventos táctiles

const canvas = document.getElementById('game')

// Prevent default touch behaviors
canvas.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false })
canvas.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false })

// Track touches
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)
  }
})

Si tu juego también debe funcionar con un ratón o un lápiz óptico, considera usar Pointer Events (pointerdown/pointermove/pointerup) en lugar de eventos táctiles. MDN los recomienda ahora como un modelo de entrada único e independiente del dispositivo: una sola ruta de código gestiona el tacto, el ratón y el lápiz, mientras que la entrada multitáctil sigue funcionando mediante pointerId (el equivalente a touch.identifier utilizado arriba). Los eventos táctiles siguen siendo perfectamente adecuados para juegos exclusivamente táctiles.

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) {
    // Base circle
    ctx.beginPath()
    ctx.arc(this.baseX, this.baseY, this.radius, 0, Math.PI * 2)
    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
    ctx.fill()
    
    // Knob
    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) Botones táctiles

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) Gestión de la orientación

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) Optimización del rendimiento

// Reduce resolution on low-end devices
function getDeviceScale() {
  const dpr = window.devicePixelRatio || 1
  const isLowEnd = navigator.hardwareConcurrency <= 2
  return isLowEnd ? Math.min(dpr, 1.5) : Math.min(dpr, 2)
}

// Throttle expensive operations
let lastHeavyUpdate = 0
function maybeDoHeavyWork(timestamp) {
  if (timestamp - lastHeavyUpdate > 100) { // 10 fps for heavy stuff
    doExpensiveCalculations()
    lastHeavyUpdate = timestamp
  }
}

// Use lower quality assets
function getAssetQuality() {
  const memory = navigator.deviceMemory || 4
  if (memory <= 2) return 'low'
  if (memory <= 4) return 'medium'
  return 'high'
}

8) Consideraciones sobre la batería

// Check battery and reduce effects
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('Battery saver enabled')
}

9) API de pantalla completa

async function requestFullscreen() {
  const elem = document.documentElement
  
  try {
    if (elem.requestFullscreen) {
      await elem.requestFullscreen()
    } else if (elem.webkitRequestFullscreen) {
      await elem.webkitRequestFullscreen()
    }
    
    // Lock orientation
    if (screen.orientation?.lock) {
      await screen.orientation.lock('landscape')
    }
  } catch (err) {
    console.warn('Fullscreen failed:', err)
  }
}

// Call on user interaction
document.getElementById('play-btn').addEventListener('click', () => {
  requestFullscreen()
  startGame()
})

Una salvedad: la API de pantalla completa no funciona con elementos generales en el iPhone. Safari para iOS solo permite la pantalla completa para elementos de vídeo nativos (mediante el método no estándar webkitEnterFullscreen), por lo que documentElement.requestFullscreen() se rechazará en el iPhone. El bloque try/catch anterior gestiona esto correctamente, así que diseña tu juego para que se pueda jugar sin una pantalla completa real en el iPhone y trata la pantalla completa como una mejora para el iPad, Android y los equipos de escritorio compatibles. La llamada a screen.orientation.lock() tiene la misma limitación en el iPhone, así que no dependas de ella.

10) Lista de comprobación para las pruebas

Antes de publicar:

• Respuesta táctil — Prueba en dispositivos reales, no solo en emuladores
• Distintos tamaños de pantalla — Teléfono, tableta, iPad Pro
• Ambas orientaciones — O bloquea una de ellas
• Dispositivos de gama baja — Prueba en teléfonos de hace 2 o 3 años
• Redes lentas — Prueba con una simulación de 3G
• Safari para iOS — Tiene peculiaridades con el audio y la pantalla completa
• Chrome para Android — El navegador más común
• Interrupciones — Llamadas telefónicas y notificaciones
• Presión de memoria — ¿Se recupera después de permanecer en una pestaña en segundo plano?

// Debug touch visualization
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)
  }
}

Contenido relacionado

• Gestión de la entrada del juego
• Canvas adaptable para juegos
• PWA para juegos sin conexión
• API Web Audio para juegos — gestión de las restricciones de audio de iOS
• Publica un juego web que cargue rápido — optimización de los tiempos de carga para conexiones móviles
• Incrustación de juegos mediante iframe — consideraciones específicas para incrustaciones en móviles

Recursos externos

• MDN: Eventos táctiles — gestión multitáctil
• MDN: API de orientación de pantalla — bloqueo de la orientación
• MDN: API de pantalla completa — activación de la pantalla completa en móviles
• web.dev: Diseño adaptable — patrones adaptables aplicables a la interfaz de los juegos

El pixel art se ve increíble cuando se renderiza correctamente y terrible cuando está borroso. Este tutorial explica las técnicas necesarias para conseguir gráficos de píxeles nítidos y auténticos.

1) El problema del desenfoque

De forma predeterminada, los navegadores suavizan las imágenes al escalarlas. Para el pixel art, esto no es adecuado:

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

2) Ajustes del contexto del canvas

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

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

Esto debe configurarse después de cada cambio de tamaño del canvas o cambio de contexto.

3) Escalado con números enteros

El pixel art se ve mejor con escalas enteras (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) Dibujar sprites en posiciones enteras

Las posiciones de subpíxel provocan desenfoque:

// 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) Animación con hojas de sprites

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) Intercambio de paletas

Una técnica clásica para cambiar los colores de los 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) Renderizado de mapas de teselas

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) Efectos de contorno

Añade contornos a los sprites para mejorar su visibilidad:

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) Sacudida de pantalla

Un efecto clásico para mejorar las sensaciones del juego:

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) Restricciones de la paleta de colores

El pixel art auténtico utiliza 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
}

Contenido relacionado

• Bucle de juego con Canvas 2D
• Canvas adaptable para juegos
• Carga progresiva de recursos
• Dónde encontrar recursos gratuitos para juegos — hojas de sprites, paquetes de pixel art y fuentes de recursos 2D
• Renderizado de texto en juegos — fuentes de mapa de bits que combinan con el estilo de tu pixel art

La API Pointer Lock captura el cursor del ratón y permite controlar la cámara con fluidez al estilo FPS. Es esencial para shooters en primera y tercera persona.

1) Solicitar el bloqueo del puntero

El bloqueo del puntero requiere una acción del usuario:

const canvas = document.getElementById('game')

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

Entrada directa del ratón (desactivar la aceleración)

De forma predeterminada, el navegador aplica la aceleración del ratón del sistema operativo a movementX/movementY, por lo que un movimiento rápido y uno lento que recorran la misma distancia producen una rotación distinta de la cámara. Para apuntar en un FPS, normalmente se busca lo contrario: la misma distancia física debe girar siempre la cámara en la misma medida. Solicita movimiento directo sin aceleración pasando unadjustedMovement: true a requestPointerLock():

canvas.addEventListener('click', async () => {
  try {
    await canvas.requestPointerLock({ unadjustedMovement: true })
  } catch (err) {
    // unadjustedMovement no es compatible aquí; usar deltas ajustados por el sistema operativo
    await canvas.requestPointerLock()
  }
})

La versión moderna de requestPointerLock() devuelve una promesa que se resuelve si la operación tiene éxito y se rechaza si falla, por eso la llamada anterior está envuelta en try/catch. Chrome y Edge admiten unadjustedMovement desde la versión 88, y Safari desde la 18.4 (marzo de 2025), que también fue la versión que corrigió requestPointerLock para que devolviera una promesa. Los navegadores antiguos que no devuelven una promesa siguen funcionando aquí porque await admite un valor que no sea una promesa y la opción desconocida simplemente se ignora; por tanto, conserva siempre la llamada alternativa a requestPointerLock() sin opciones.

2) Detectar el estado del bloqueo

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

document.addEventListener('pointerlockerror', () => {
  console.error('No se pudo bloquear el puntero')
})

3) Leer el movimiento del ratón

Mientras esté bloqueado, usa movementX y movementY:

document.addEventListener('mousemove', (e) => {
  if (document.pointerLockElement !== canvas) return
  
  const sensitivity = 0.002
  camera.yaw -= e.movementX * sensitivity
  camera.pitch -= e.movementY * sensitivity
  
  // Limitar la inclinación para evitar que la cámara dé la vuelta
  camera.pitch = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, camera.pitch))
})

4) Clase de cámara FPS

class FPSCamera {
  constructor() {
    this.position = { x: 0, y: 1.7, z: 0 } // Altura de los ojos
    this.yaw = 0      // Rotación izquierda/derecha
    this.pitch = 0    // Rotación arriba/abajo
    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()
    
    // Mover solo en el 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) Movimiento con 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)
    
    // Movimiento 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
    }
    
    // Gravedad
    if (!this.onGround) {
      this.velocity.y += this.gravity * dt
    }
    
    // Aplicar la velocidad
    this.camera.position.x += this.velocity.x * dt
    this.camera.position.y += this.velocity.y * dt
    this.camera.position.z += this.velocity.z * dt
    
    // Colisión sencilla con el suelo
    if (this.camera.position.y < 1.7) {
      this.camera.position.y = 1.7
      this.velocity.y = 0
      this.onGround = true
    }
  }
}

7) Retícula

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
  
  // Arriba
  ctx.beginPath()
  ctx.moveTo(cx, cy - gap)
  ctx.lineTo(cx, cy - gap - size)
  ctx.stroke()
  
  // Abajo
  ctx.beginPath()
  ctx.moveTo(cx, cy + gap)
  ctx.lineTo(cx, cy + gap + size)
  ctx.stroke()
  
  // Izquierda
  ctx.beginPath()
  ctx.moveTo(cx - gap, cy)
  ctx.lineTo(cx - gap - size, cy)
  ctx.stroke()
  
  // Derecha
  ctx.beginPath()
  ctx.moveTo(cx + gap, cy)
  ctx.lineTo(cx + gap + size, cy)
  ctx.stroke()
}

8) Disparar con los botones del ratón

document.addEventListener('mousedown', (e) => {
  if (!document.pointerLockElement) return
  
  if (e.button === 0) {
    // Clic izquierdo: disparo principal
    weapon.fire()
  } else if (e.button === 2) {
    // Clic derecho: apuntar con la mira
    weapon.aimDownSights(true)
  }
})

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

// Evitar el menú contextual
canvas.addEventListener('contextmenu', (e) => e.preventDefault())

9) Ajustes de sensibilidad

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())
  }
}

// Aplicar en el controlador del ratón
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 para salir

Muestra instrucciones para salir del bloqueo del puntero:

function showLockUI() {
  const ui = document.getElementById('lock-ui')
  
  if (document.pointerLockElement) {
    ui.innerHTML = '<p>Pulsa ESC para liberar el ratón</p>'
    ui.style.opacity = '0.5'
    setTimeout(() => ui.style.opacity = '0', 2000)
  } else {
    ui.innerHTML = '<p>Haz clic para jugar</p>'
    ui.style.opacity = '1'
  }
}

document.addEventListener('pointerlockchange', showLockUI)

Hay algo que debes saber sobre el aviso para salir: cuando el jugador pulsa ESC para abandonar el bloqueo del puntero, el navegador exige una nueva acción del usuario (un clic) antes de poder bloquearlo de nuevo. Por eso existe la capa «Haz clic para jugar». Sin embargo, si tu propio código llama a document.exitPointerLock() —por ejemplo, para abrir un menú del juego—, no se necesita una nueva acción para volver a bloquearlo después, por lo que puedes reactivarlo mediante código cuando se cierre el menú. Pulsar ESC repetidamente también puede hacer que el navegador rechace un nuevo bloqueo hasta que el usuario realice una acción más deliberada, así que no intentes volver a bloquearlo automáticamente en pointerlockchange.

Consideraciones sobre iframes

El bloqueo del puntero en iframes requiere el atributo allow="pointer-lock":

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

Comprueba si el bloqueo del puntero está disponible:

if (!document.pointerLockElement && !('requestPointerLock' in canvas)) {
  showMessage('La captura del ratón no está disponible')
}

Contenido relacionado

• Gestión de entradas del juego
• API Gamepad
• Fundamentos de WebGL
• Fundamentos de WebXR — controles de RV para experiencias en primera persona
• Primeros pasos con WebGPU — renderizado moderno con GPU para juegos FPS

Recursos externos

• MDN: API Pointer Lock — referencia completa de la API
• MDN: MouseEvent.movementX — lectura de los deltas del ratón

Las aplicaciones web progresivas permiten que los jugadores instalen tu juego y jueguen sin conexión. Este tutorial muestra cómo añadir compatibilidad con PWA a un juego web.

1) Manifiesto de la aplicación web

Crea manifest.json:

{
  "name": "Mi juego increíble",
  "short_name": "JuegoIncreíble",
  "description": "Un juego increíble al que puedes jugar sin conexión",
  "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"
    }
  ]
}

Enlázalo en tu 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

Crea 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',
]

// Install: cache assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(ASSETS)
    })
  )
})

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

// Fetch: serve from cache, fall back to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request)
    })
  )
})

3) Registrar el 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) Priorizar la caché con actualización desde la red

Es mejor para juegos: carga rápida con actualizaciones en segundo plano:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open(CACHE_NAME).then(async (cache) => {
      const cached = await cache.match(event.request)
      
      // Start network fetch in background
      const fetchPromise = fetch(event.request).then((response) => {
        if (response.ok) {
          cache.put(event.request, response.clone())
        }
        return response
      }).catch(() => null)
      
      // Return cached immediately, or wait for network
      return cached || fetchPromise
    })
  )
})

5) Caché con versiones para las actualizaciones

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

const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/game.js',
  // ... core assets that rarely change
]

self.addEventListener('install', (event) => {
  self.skipWaiting() // Activate immediately
  
  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() // Take control immediately
})

6) Gestionar las actualizaciones del juego

Avisa a los jugadores cuando haya una actualización disponible:

// In main app
let refreshing = false

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

function showUpdateNotification() {
  const banner = document.createElement('div')
  banner.innerHTML = `
    <p>¡Juego actualizado! Recarga la página para obtener la última versión.</p>
    <button onclick="location.reload()">Recargar</button>
  `
  banner.className = 'update-banner'
  document.body.appendChild(banner)
}

7) Detección del estado sin conexión

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) Aviso de instalación

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
})

En iOS y iPadOS, el evento beforeinstallprompt nunca se activa, por lo que el botón de instalación anterior solo aparece en navegadores basados en Chromium. Los usuarios de iPhone y iPad pueden instalar la aplicación tocando Compartir y después «Añadir a pantalla de inicio». Hay un cambio de 2026 que conviene conocer: a partir de Safari 26 (iOS 26 / iPadOS 26), todos los sitios añadidos a la pantalla de inicio se abren como aplicaciones web de forma predeterminada, con la opción «Abrir como aplicación web» activada por defecto. Ya no existe un requisito de instalabilidad en iOS, aunque incluir un manifiesto y un service worker sigue ofreciendo una experiencia sin conexión mucho mejor.

9) Sincronización en segundo plano para las clasificaciones

Importante sobre la compatibilidad: la API Background Sync solo está implementada en navegadores basados en Chromium (Chrome, Edge, Opera y Samsung Internet). Firefox y Safari (incluido iOS) no la admiten, así que detecta siempre si la función está disponible y conserva una alternativa que envíe las puntuaciones la próxima vez que la aplicación se cargue normalmente.

// In 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) {
      // Will retry on next sync
      break
    }
  }
}

// In main app
async function submitScore(score) {
  try {
    await fetch('/api/scores', { method: 'POST', body: JSON.stringify(score) })
  } catch {
    // Save for later sync
    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) Probar la PWA

Chrome DevTools:

• Application > Service Workers
• Application > Manifest
• Application > Cache Storage
• Network > Casilla Offline

Auditoría de Lighthouse:

• Ejecuta la auditoría de PWA
• Comprueba la instalabilidad
• Comprueba el funcionamiento sin conexión

Pruebas en un dispositivo real:

• Instálala en la pantalla de inicio del teléfono
• Activa el modo avión
• Prueba todas las funciones sin conexión

Contenido relacionado

• Service workers para almacenar el juego en caché
• Partidas guardadas con IndexedDB
• Publica un juego web que cargue rápido
• Juegos web adaptados a dispositivos móviles — controles táctiles y gestión del viewport para juegos PWA
• Carga progresiva de recursos — estrategias de carga compatibles con el almacenamiento en caché del service worker

Recursos externos

• MDN: Aplicaciones web progresivas — documentación completa sobre PWA
• web.dev: Aprende PWA — ruta de aprendizaje de Google sobre PWA
• MDN: Manifiesto de aplicación web — referencia del archivo de manifiesto

Un canvas que no escala correctamente se ve borroso o se rompe en distintos tamaños de pantalla. He depurado este problema más veces de las que puedo contar, así que déjame ahorrarte el esfuerzo.

Prueba distintos modos de escalado:

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
  
  // Ajusta la resolución interna para que coincida con los píxeles físicos
  canvas.width = width * dpr
  canvas.height = height * dpr
  
  // Ajusta el tamaño CSS para que coincida con los píxeles lógicos
  canvas.style.width = width + 'px'
  canvas.style.height = height + 'px'
  
  // Escala el contexto para poder dibujar en píxeles 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) {
    // La ventana es más ancha que el juego; añade barras a los lados
    height = windowHeight
    width = height * ASPECT
  } else {
    // La ventana es más alta que el juego; añade barras arriba y abajo
    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'
  
  // La resolución interna permanece fija
  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
  
  // Encuentra la mayor escala entera que quepa
  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 // Se ha redimensionado; quizá debas actualizar las matrices de proyección
  }
  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
})

// En el código de tu juego, usa responsive.width y responsive.height

Los service workers te permiten controlar cómo se almacenan en caché y se sirven los recursos. En los juegos, esto permite cargas instantáneas en visitas posteriores y compatibilidad sin conexión.

1) Conceptos básicos de los service workers

Crea sw.js en la raíz:

// 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
})

Regístralo:

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

2) Estrategia de caché primero (la mejor para los recursos del juego)

Carga desde la caché y recurre a la red solo si el recurso no está almacenado:

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) Precarga en caché de recursos críticos

El evento de instalación es perfecto para la precarga en caché:

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) Estrategia de red primero para contenido dinámico

Usa la estrategia de red primero para los datos que cambian, como las clasificaciones y los datos de los jugadores:

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) Servir contenido obsoleto mientras se revalida

Devuelve inmediatamente el contenido en caché y actualízalo en 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) Versionado y limpieza de la caché

Elimina las cachés antiguas durante la activación:

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) Cachés separadas por tipo

Organiza las cachés para gestionarlas mejor:

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) Solicitudes de rango para audio y vídeo

Hay algo que debes saber desde el principio: la API de caché no almacena respuestas parciales. Si una respuesta 206 Partial Content llega a cache.put(), se produce el error TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported. Por tanto, el patrón para los archivos multimedia en caché siempre es el mismo: precarga (o descarga) el archivo completo como una respuesta 200 normal y, después, genera tú mismo la respuesta 206 extrayendo los bytes correspondientes de la caché cada vez que llegue una solicitud con una cabecera Range. Si prefieres no implementarlo manualmente, el complemento range-requests de Workbox realiza exactamente esa extracción cuando se combina con una estrategia CacheFirst.

Gestiona correctamente las solicitudes de rango, necesarias para desplazarse por el audio:

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) Notificación de actualización

Avisa a los jugadores cuando haya una nueva versión disponible:

// 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>¡Hay una nueva versión disponible!</span>
    <button onclick="location.reload()">Actualizar</button>
  `
  document.body.appendChild(banner)
}

10) Service worker completo para un juego

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
}

Contenido relacionado

• PWA para juegos sin conexión
• Carga de recursos mediante streaming
• Publica un juego web que cargue rápido
• API Web Audio para juegos — almacenamiento en caché de recursos de audio para jugar sin conexión
• Partidas guardadas con IndexedDB — conservación del estado del juego junto con los recursos almacenados en caché

Recursos externos

• MDN: API de Service Worker — referencia completa de la API
• MDN: API de caché — referencia de la interfaz Cache
• web.dev: Service workers — estrategias y patrones de almacenamiento en caché
• Workbox — biblioteca de Google con herramientas para service workers

Si los jugadores no pueden empezar a jugar en cuestión de segundos, se marchan. Este tutorial es una lista de comprobación práctica que puedes aplicar a casi cualquier stack para juegos web (Canvas/WebGL/WebGPU, Pixi/Three/PlayCanvas, motor propio, etc.).

1) Define primero los límites (o no podrás optimizar)

Elige límites que se ajusten a tu dispositivo objetivo. Un buen punto de partida para una experiencia de «juego instantáneo»:

• JS+CSS enviados: menos de ~300–500 KB con gzip (cuanto menos, mejor)
• Recursos críticos antes de la primera interacción: menos de ~2–5 MB comprimidos
• Tiempo hasta la primera interacción: menos de ~3–5 segundos en un móvil de gama media

Anótalos y trátalos como contratos de API.

2) Mide lo que importa

En Chrome DevTools:

• Usa Performance para capturar una sesión e inspeccionar las tareas largas.
• Usa Network para comprobar:
  • el tamaño transferido frente al tamaño descomprimido
  • las cabeceras de caché
  • si los recursos se transmiten progresivamente o llegan como un único bloque enorme

En términos del juego, registra:

• El tiempo hasta que «el jugador puede moverse»
• El tiempo hasta el «primer fotograma significativo»
• La «latencia de la primera interacción» (entrada → fotograma)

Tu concepto de «latencia de la primera interacción» ahora se corresponde con una métrica estándar: Interaction to Next Paint (INP) sustituyó a First Input Delay como Core Web Vital en marzo de 2024 y mide el tiempo completo desde la entrada hasta el siguiente repintado en todas las interacciones, no solo en la primera. Intenta mantener el INP por debajo de 200 ms en el percentil 75, un punto de referencia externo útil para las cifras de capacidad de respuesta que ya registras.

3) Comprime todo lo que puedas

Asegúrate de que tu alojamiento sirva:

• Brotli (br) para recursos de texto (JS/CSS/HTML/WASM) cuando esté disponible
• gzip como alternativa

Si tu proveedor de alojamiento y CDN lo permiten, Zstandard (zstd) es ahora una tercera opción para Content-Encoding. Está disponible en Chrome y Edge 123+, Firefox 126+ y Safari 26.3+ (aproximadamente el 80 % de los usuarios), y puede alcanzar relaciones de compresión similares a las de Brotli con un menor coste de CPU en el servidor, lo que resulta útil para cargas grandes de WASM y JSON. Los navegadores solo anuncian Accept-Encoding: zstd mediante HTTPS, así que mantén Brotli y gzip configurados como alternativas para todos los demás.

En las compilaciones de WebAssembly, la compresión suele marcar la diferencia entre una carga «instantánea» y una que «nunca termina».

4) No descargues todo el mundo por adelantado

Divide tu juego en:

• Arranque: cargador mínimo + entrada + primera escena
• Núcleo: sistemas principales de juego
• Opcional: niveles adicionales, elementos cosméticos, texturas de alta resolución, audio adicional, etc.

Carga el contenido «Opcional» solo después de que:

• el jugador ya pueda jugar, o
• sepas que quiere ese contenido (por ejemplo, porque ha llegado a un menú o nivel)

5) Elige los formatos de recursos adecuados

Para la mayoría de los juegos web:

• Imágenes: prioriza WebP (o AVIF si puedes aceptar una codificación más lenta) para interfaces y fondos.
• Audio: prioriza Ogg Vorbis para uso general; prueba AAC para los ecosistemas de Apple.
• Vídeo: prioriza MP4/H.264 por compatibilidad y WebM cuando sea compatible y ocupe menos.

Ten en cuenta el coste de decodificación: una «descarga más pequeña» puede seguir siendo «más lenta de decodificar».

6) Mantén tu primera escena pequeña y determinista

Evita lo siguiente en tu primera escena interactiva:

• avalanchas de compilación de shaders
• cargas de texturas enormes
• generación procedural que bloquee el hilo principal
• análisis síncrono de bloques JSON de varios megabytes

En concreto para las texturas, distribuye KTX2 con la supercompresión Basis Universal en lugar de PNG o JPEG. Permanece comprimido en la GPU después de cargarse (se transcodifica a BC7 en ordenadores de escritorio o a ASTC en móviles durante la carga), lo que reduce la VRAM entre 4 y 8 veces y hace que las cargas sean mucho menos costosas que decodificar un PNG a tamaño completo y enviar los píxeles sin comprimir a la GPU.

Si tienes que realizar tareas pesadas, hazlo:

• de forma incremental a lo largo de varios fotogramas, o
• en un Worker (cuando sea posible)

7) Usa la caché de forma agresiva (pero correcta)

Usa una caché de larga duración para los recursos identificados por contenido:

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

Para los puntos de entrada HTML, usa una caché de corta duración para poder desplegar actualizaciones de forma segura.

8) Haz que los «fallos» sean rápidos y comprensibles

Si algo sale mal, muestra:

• un mensaje de error claro
• un botón para volver a intentarlo
• un enlace para informar del problema

Los fallos silenciosos destruyen la confianza.

9) Si usas hilos de Wasm, comprende COOP/COEP

Si tu compilación depende de SharedArrayBuffer (algo habitual en algunas configuraciones de hilos de Wasm), probablemente necesitarás cabeceras de aislamiento entre orígenes:

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

Tienes dos opciones para la cabecera COEP. require-corp es la opción estricta, pero implica que cada recurso de origen cruzado (texturas de CDN, scripts de terceros) debe enviar una cabecera Cross-Origin-Resource-Policy o será bloqueado. Cross-Origin-Embedder-Policy: credentialless también habilita SharedArrayBuffer y el aislamiento entre orígenes, pero carga los recursos de origen cruzado sin credenciales en lugar de exigirles que den su consentimiento mediante CORP. Si obtienes recursos de una CDN que no controlas, credentialless suele ser la opción menos problemática.

Haz pruebas cuanto antes en tu alojamiento real, porque las cabeceras y las integraciones de terceros pueden causar problemas.

10) Haz que se pueda jugar sin un SDK

Si tu objetivo es el flujo de trabajo para creadores de Cinevva, procura ofrecer:

• una única URL que arranque de forma fiable
• ningún inicio de sesión obligatorio para comenzar una demo
• controles de entrada predecibles

Así estarás listo para distribuir tu juego sin integrar SDK adicionales.

Contenido relacionado:

• Para creadores de juegos
• Política sobre contenido generado por IA
• Carga de recursos en streaming — patrones de carga progresiva para juegos grandes
• Service workers para almacenar juegos en caché — almacena recursos en caché para que las visitas posteriores carguen al instante
• Comparativa de motores para juegos web — tamaños de compilación y tiempos de carga entre distintos motores
• Cómo publicar tu juego en itch.io — optimización de juegos para navegador integrados en itch.io

Los jugadores no esperarán a que termine una descarga de 100 MB. Carga los recursos progresivamente para que puedan jugar mientras el resto se descarga en segundo plano.

1) La estrategia de carga

Divide los recursos en niveles:

1. Críticos — Necesarios para mostrar la primera pantalla (< 1 MB)
2. Jugabilidad — Necesarios para jugar (< 10 MB)
3. Mejoras — Opcionales (se cargan en segundo plano)

2) Cargador de recursos básico

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) Carga con indicador de progreso

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
}

Ten en cuenta que, cuando el servidor comprime la respuesta (con gzip o brotli, como hacen de forma predeterminada la mayoría de las CDN), Content-Length representa el tamaño comprimido, mientras que los fragmentos que lees ya están descomprimidos. Esto hace que received / total supere el 100 %. Para obtener una barra de progreso precisa a nivel de bytes con respuestas comprimidas, sirve el recurso sin comprimir, envía tu propio encabezado con el tamaño sin comprimir o recurre al evento onprogress de XMLHttpRequest, que informa del progreso real de la transferencia.

4) Carga por lotes con progreso general

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(`Cargando: ${Math.round(progress * 100)}% (${name})`)
})

5) Cargador con cola de prioridad

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)  // Cargar primero
loader.add('optional.png', 1)   // Cargar después

6) Carga diferida de niveles

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) {
    // Cargar solo lo necesario para este nivel
    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)
    // El recolector de basura puede liberar los recursos
  }
}

7) Transmisión de archivos grandes

Para archivos grandes (modelos 3D, audio), transmítelos y procésalos 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 audio: usar Media Source Extensions
// Para 3D: procesar los datos de la malla a medida que llegan

8) Almacenamiento en caché de los recursos cargados

Combínalo con IndexedDB para disponer de una caché persistente:

class CachedLoader {
  constructor() {
    this.memCache = new Map()
    this.dbName = 'AssetCache'
  }
  
  async loadImage(url) {
    // Comprobar la memoria
    if (this.memCache.has(url)) return this.memCache.get(url)
    
    // Comprobar IndexedDB
    const cached = await this.getFromDB(url)
    if (cached) {
      const img = await this.blobToImage(cached)
      this.memCache.set(url, img)
      return img
    }
    
    // Descargar y almacenar en caché
    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 de IndexedDB...
}

9) Patrón de pantalla de carga

class LoadingScreen {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.progress = 0
    this.message = 'Cargando...'
  }
  
  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 progreso
    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) Buenas prácticas

• Muestra algo de inmediato — aunque solo sea una imagen estática
• Carga primero lo que está visible — las texturas de la vista actual
• Usa marcadores de posición — imágenes de baja resolución que se sustituyan por otras de mayor calidad
• Precarga el siguiente nivel — mientras el jugador aún está jugando
• Gestiona los errores correctamente — lógica de reintentos y 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)))
    }
  }
}

Contenido relacionado

• Publica un juego web que cargue rápido
• Service workers para almacenar juegos en caché
• Partidas guardadas en IndexedDB
• Web Workers para la lógica del juego — decodifica y procesa recursos fuera del hilo principal
• Dónde encontrar recursos gratuitos para juegos — fuentes de modelos 3D, texturas y audio para transmitir

Recursos externos

• MDN: API Fetch — transmisión de respuestas y ReadableStream
• MDN: ReadableStream — procesamiento de fragmentos de datos transmitidos
• Especificación de glTF 2.0 — el formato estándar para transmitir recursos 3D

El texto está presente en todas partes en los juegos: puntuaciones, diálogos, menús y cifras de daño. Este tutorial explica distintos enfoques y cuándo usar cada uno.

1) Fundamentos del texto en Canvas

El enfoque más sencillo:

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

Si necesitas un espaciado más estrecho o más amplio para títulos y etiquetas del HUD, el contexto de Canvas ahora admite directamente letterSpacing y wordSpacing. Ambos aceptan cadenas de longitud CSS y alcanzaron la compatibilidad Baseline entre navegadores en 2025, por lo que ya no es necesario dibujar los glifos uno por uno para simular el kerning:

ctx.font = '24px sans-serif'
ctx.letterSpacing = '2px'
ctx.wordSpacing = '6px'
ctx.fillText('GAME OVER', 100, 100)

Restablécelos a '0px' cuando termines, ya que permanecen en el contexto igual que font y fillStyle.

2) Texto con 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, 'GAME OVER', 400, 300, '#fff', '#000', 3)

3) Texto con 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) Renderizado de fuentes de mapa de bits

Para juegos de pixel art o para conseguir un aspecto uniforme 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, 'SCORE: 1000', 10, 10, 2)

5) Texto prerenderizado para mejorar el rendimiento

Para texto estático, renderízalo una vez y reutilízalo:

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('MY GAME', '48px Impact', '#fff')

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

6) Efecto de máquina de escribir

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 con ajuste de línea

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 cuadros 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) Cifras de daño flotantes

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 WebGL (fuentes SDF)

Para juegos WebGL, las fuentes de campos de distancia con signo (SDF) se escalan con 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

En concreto, para escenas de three.js, troika-three-text es una buena opción. En lugar de precalcular un atlas, analiza archivos .ttf/.otf/.woff y genera los glifos SDF sobre la marcha en un web worker. Además, se encarga del kerning, las ligaduras y los sistemas de escritura de derecha a izquierda.

Para la mayoría de los juegos 2D con Canvas, las fuentes de mapa de bits o el texto de Canvas prerenderizado funcionan bien.

Contenido relacionado

• Bucle de juego con Canvas 2D
• Renderizado de pixel art
• Fundamentos de WebGL
• Canvas adaptable para juegos — cómo escalar el texto según la resolución y los PPP del Canvas
• Dónde encontrar recursos gratuitos para juegos — fuentes de tipografías y recursos de interfaz de usuario

Tone.js funciona sobre la API Web Audio y facilita el uso práctico de audio sintetizado. En lugar de cargar archivos de audio, generas sonidos mediante código. Esto significa cero tiempo de carga, variaciones infinitas y sonidos capaces de reaccionar a la jugabilidad en tiempo real.

Pruébalo (haz clic en los botones para escuchar sonidos de juego 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 listo')
}, { once: true })

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

// Reproducir una nota
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
  
  // Control de volumen maestro
  sfxGain = new Tone.Gain(0.7).toDestination()
  
  // Sintetizador suave para sonidos melódicos
  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)
  
  // Subgrave para impactos profundos
  subSynth = new Tone.Synth({
    oscillator: { type: 'sine' },
    envelope: {
      attack: 0.02,
      decay: 0.3,
      sustain: 0.1,
      release: 0.3,
    },
    volume: -8,
  }).connect(sfxGain)
  
  // Ruido para añadir textura
  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)

// Cadena: sintetizador -> filtro -> reverberación -> ganancia -> destino
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()
  
  // Bajo en el primer pulso
  if (beatInMeasure === 0) {
    bassSynth.triggerAttackRelease(chord.root, '4n', now, 0.6)
  }
  
  // Bombo: solo cuando la energía es alta
  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)
}

// Los eventos del juego afectan a la energía
function onEnemyKill() {
  energy = Math.min(1, energy + 0.1)
}

// Bombo
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')

// Caja
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')

// Charles
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()
}

Un buen audio transforma un juego. Un juego silencioso parece carente de vida. Web Audio API te ofrece efectos de sonido de baja latencia, reproducción de música e incluso audio espacial 3D, todo en el navegador.

Pruébalo (haz clic en un botón para escuchar sonidos sintetizados):

let audioCtx = null

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

// Initialize on first interaction
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)
}

Los Web Workers permiten ejecutar JavaScript en un hilo en segundo plano. En los juegos, esto significa que la física, la IA y la generación procedimental pueden ejecutarse sin provocar caídas de fotogramas.

1) Cuándo usar Workers

Buenos casos de uso:

• Simulación física
• Búsqueda de rutas (A*, navmesh)
• Toma de decisiones de la IA
• Generación procedimental
• Procesamiento de recursos (manipulación de imágenes, compresión)
• Matemáticas complejas (FFT, detección de colisiones)

No son ideales para:

• Renderizado (los Workers no pueden acceder directamente al DOM ni a Canvas)
• Tareas muy pequeñas (la sobrecarga del hilo no compensa)

2) Crear un 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) {
  // Trabajo intensivo aquí
  return input * 2
}

main.js:

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

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

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

3) Workers en línea (sin archivo 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

Puedes escribir el código del Worker como un módulo ES y usar import dentro de él, en lugar de importScripts. Pasa { type: 'module' } al constructor:

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

Dentro del Worker puedes usar import para cargar utilidades compartidas de matemáticas, colisiones o IA del mismo modo que en el hilo principal, para no duplicar la lógica del juego. Los Workers como módulos son compatibles con Chrome y Edge 80+, Safari 15+ y Firefox 114+.

5) Ejemplo 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) {
  // Inicializar el mundo físico
}

function step() {
  // Actualizar la física
  for (const body of bodies) {
    body.vy += 9.8 * FIXED_DT // Gravedad
    body.x += body.vx * FIXED_DT
    body.y += body.vy * FIXED_DT
  }
  
  // Devolver las posiciones
  self.postMessage({
    type: 'positions',
    data: bodies.map(b => ({ id: b.id, x: b.x, y: b.y, rotation: b.rotation }))
  })
}

6) Objetos transferibles para mejorar el rendimiento

Los datos de gran tamaño pueden transferirse sin copiarlos:

// Hilo principal
const positions = new Float32Array(1000)
worker.postMessage(positions, [positions.buffer])
// positions ya no se puede usar aquí (se ha transferido)

// Worker
self.onmessage = (e) => {
  const positions = e.data
  // Trabajar con las posiciones
  self.postMessage(positions, [positions.buffer])
}

7) Worker para búsqueda de rutas

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) {
  // Implementación de A*
  const openSet = [start]
  const cameFrom = new Map()
  const gScore = new Map()
  gScore.set(key(start), 0)
  
  while (openSet.length > 0) {
    // ... Lógica de A*
  }
  
  return reconstructPath(cameFrom, end)
}

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

8) Grupo de Workers para tareas en paralelo

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 sincronización en tiempo real

Con el aislamiento entre orígenes activado, puedes compartir memoria:

// Hilo principal
const shared = new SharedArrayBuffer(1024)
const positions = new Float32Array(shared)

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

// El Worker lee y escribe directamente en la memoria compartida
// Sin sobrecarga de postMessage para actualizar posiciones

10) OffscreenCanvas para Workers

Renderiza en un Worker. OffscreenCanvas ya forma parte de Baseline y está ampliamente disponible en Chrome, Edge, Firefox y Safari (Safari añadió compatibilidad en la versión 17.0 para macOS e iOS):

// Hilo principal
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)
    // Dibujar...
    requestAnimationFrame(render)
  }
  render()
}

11) Gestión de errores

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

// En el Worker
self.onerror = (e) => {
  self.postMessage({ type: 'error', message: e.message })
}

Contenido relacionado

• Publica un juego web que cargue rápido
• Activa los hilos de Wasm (SharedArrayBuffer)
• Bucle de juego con Canvas 2D
• Bibliotecas de física para juegos — ejecutar Rapier o Cannon-es en un Worker
• Carga de recursos por streaming — decodificar recursos fuera del hilo principal
• Stack tecnológico para juegos web en 2026 — cómo encajan los Workers en el stack de WebGL, WebGPU y Wasm

Recursos externos

• MDN: API de Web Workers — referencia completa de la API
• MDN: Uso de Web Workers — guía paso a paso
• MDN: Objetos transferibles — transferencia de datos sin copias
• MDN: SharedArrayBuffer — memoria compartida entre hilos

WebGL te da acceso directo a la GPU desde el navegador. Es la base de los juegos web 3D (y de los juegos 2D de alto rendimiento). Este tutorial cubre los conceptos esenciales.

1) Obtener un 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')
}

Prefiere webgl2 cuando esté disponible: es ampliamente compatible y ofrece mejores prestaciones.

2) El pipeline de renderizado (simplificado)

1. El shader de vértices se ejecuta una vez por vértice. Posiciona la geometría.
2. El shader de fragmentos se ejecuta una vez por píxel. Colorea el resultado.
3. Los búferes almacenan datos (posiciones, coordenadas UV y colores).
4. Las texturas son imágenes que los shaders muestrean.

3) Un par mínimo de shaders

Shader de vértices:

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

Shader de fragmentos:

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

4) Compilar y enlazar 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) Crear búferes

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) Conectar los búferes con los shaders

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

7) El bucle del juego

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) Cargar 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, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
    gl.generateMipmap(gl.TEXTURE_2D)
  }
  img.src = url
  return texture
}

9) Errores habituales

• Las texturas con dimensiones que son potencias de dos no son estrictamente necesarias en WebGL 2, pero los mipmaps funcionan mejor con ellas.
• Pérdida del contexto: gestiona los eventos webglcontextlost; los navegadores móviles liberan contextos cuando hay presión sobre la memoria.
• Las texturas de coma flotante requieren comprobar la extensión (EXT_color_buffer_float).

10) Cuándo usar una biblioteca

WebGL puro requiere mucho código. Para la mayoría de los juegos, considera:

• Three.js — 3D con todas las funciones
• PixiJS — renderizado 2D rápido
• PlayCanvas — motor de juegos con editor

Usa WebGL puro cuando necesites:

• control máximo
• un renderizador personalizado
• aprender cómo funcionan realmente las cosas

Una nota para 2026: WebGPU ya viene activado de forma predeterminada en todos los navegadores principales (Chrome y Edge desde la versión 113, Firefox 141 en Windows y 145 en macOS, y Safari en iOS 26, iPadOS 26 y macOS Tahoe 26). Los fundamentos explicados aquí siguen siendo aplicables, ya que bibliotecas como Three.js ejecutan su renderizador WebGPU con WebGL 2 como alternativa automática, por lo que WebGL 2 continúa siendo la base más fiable. Si hoy vas a crear un renderizador nuevo desde cero, lee el tutorial de WebGPU junto con este antes de comprometerte con una API.

Contenido relacionado

• WebGPU para juegos
• Bucle de juego con Canvas 2D
• Publica un juego web que cargue rápido
• Stack tecnológico para juegos web en 2026 — cuándo elegir WebGL, WebGPU o Wasm
• Bibliotecas de física para juegos — motores de física que renderizan mediante WebGL
• Comparativa de motores de juegos web — Three.js, PixiJS, PlayCanvas y otros

Recursos externos

• MDN: API de WebGL — referencia completa de la API
• Fundamentos de WebGL2 — serie de tutoriales detallados sobre WebGL2
• El libro de los shaders — guía interactiva sobre shaders de fragmentos GLSL
• Documentación de Three.js — el framework WebGL más popular

WebGPU es el sucesor de WebGL. Es de más bajo nivel, más explícito y está diseñado para las GPU modernas. Si vas a iniciar un nuevo proyecto 3D en 2026, vale la pena aprender WebGPU.

Tutorial de WebGPU: 10 proyectos que abarcan desde la configuración hasta el renderizado 3D con iluminación y animación

1) Comprueba la compatibilidad del navegador

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

En 2026, WebGPU está disponible en Chrome, Edge, Firefox y Safari.

2) Obtén un dispositivo

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

El adaptador representa la GPU física. El dispositivo es tu interfaz para interactuar con ella.

Ambas llamadas pueden fallar. requestAdapter() devuelve null cuando el sistema no tiene una GPU utilizable y requestDevice() puede rechazar la solicitud, así que compruébalo antes de continuar:

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

Además, el adaptador queda consumido cuando creas un dispositivo a partir de él, así que solicita uno nuevo si necesitas otro dispositivo.

3) Configura el canvas

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

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

4) Escribe shaders en WGSL

WebGPU utiliza WGSL (WebGPU Shading Language), no 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) Crea un módulo de shaders

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

6) Crea un pipeline de renderizado

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

7) Renderiza un fotograma

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) Búferes en 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 enlace 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 frente a WebGL

Cuándo utilizar WebGPU

• Proyectos nuevos dirigidos a navegadores modernos
• Cargas de trabajo con uso intensivo de cómputo (física, IA y generación procedural)
• Cuando necesitas un control preciso de los recursos de la GPU

Contenido relacionado

• Fundamentos de WebGL
• Web Workers para la lógica del juego
• Publica un juego web que cargue rápido
• Stack tecnológico para juegos web en 2026 — marco de decisión para elegir entre WebGL, WebGPU y Wasm
• COOP/COEP y SharedArrayBuffer — cabeceras necesarias para usar multihilo de Wasm con cómputo de WebGPU

Recursos externos

• Especificación de WebGPU — especificación del W3C
• Especificación de WGSL — especificación del lenguaje de shaders de WebGPU
• Fundamentos de WebGPU — serie de tutoriales en profundidad
• Tu primera aplicación WebGPU — guía paso a paso de Google Codelab

Cómo crear un juego multijugador con WebSockets: arquitectura del servidor, salas de juego y sincronización del estado

Los WebSockets permiten la comunicación en tiempo real en juegos multijugador. Este tutorial explica los fundamentos del lado del cliente.

1) Conexión a un 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) Diseño del protocolo de mensajes

Define un protocolo sencillo:

// 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) Clase para gestionar la conexión

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) Envío de las entradas del jugador

Envía las entradas, no las posiciones. Deja que el servidor sea la autoridad:

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) Recepción del estado del juego

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) Interpolación para un movimiento fluido

El servidor envía instantáneas. Interpola entre ellas:

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) Predicción del lado del cliente

Para que los controles respondan de inmediato, predice localmente y concilia el resultado con el 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) Visualización de la latencia

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) Mensajes binarios para mejorar la eficiencia

Para actualizaciones de alta frecuencia, usa datos binarios:

// 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) Ejemplo 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)
  }
}

Contenido relacionado

• Publica un juego web que cargue rápido
• Gestión de entradas en juegos
• Web Workers para la lógica del juego
• COOP/COEP y SharedArrayBuffer — encabezados necesarios para usar SharedArrayBuffer en contextos multijugador
• Diseño de juegos cooperativos en 2026 — por qué los juegos cooperativos «friend slop» están triunfando y cómo encaja el multijugador en el navegador
• Game jams y hackatones — los juegos multijugador de game jams reciben más atención

Recursos externos

• MDN: API WebSocket — referencia de WebSocket para navegadores
• MDN: API WebRTC — conexiones entre pares para reducir la latencia
• MDN: API WebTransport — un transporte HTTP/3 más reciente que alcanzó la compatibilidad básica entre navegadores en marzo de 2026, cuando Safari 26.4 incorporó su implementación (ya estaba disponible en Chrome 97+, Edge y Firefox 114+). A diferencia de un único WebSocket basado en TCP, WebTransport funciona sobre QUIC y ofrece datagramas no fiables, además de varios flujos independientes, por lo que un paquete perdido no bloquea todo lo que viene detrás. Un patrón habitual consiste en enviar actualizaciones de posición de alta frecuencia mediante datagramas y mantener el chat o las tablas de clasificación en un flujo fiable. WebSockets sigue siendo la opción con mayor compatibilidad y todo lo anterior continúa siendo válido, pero ahora vale la pena considerar WebTransport para juegos sensibles a la latencia.
• Documentación de Socket.IO — popular biblioteca contenedora para WebSocket
• Red multijugador de Valve Source — patrones de red autoritativa utilizados en juegos en producción

WebXR lleva la RV y la RA al navegador. Los jugadores pueden disfrutar de tu juego con un visor sin descargar nada.

1) Comprobar la compatibilidad con 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 }
}

// Uso
const support = await checkXRSupport()
if (support.vr) {
  showVRButton()
}

2) Iniciar una sesión 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)
    
    // Configurar el renderizado
    const gl = canvas.getContext('webgl2', { xrCompatible: true })
    await xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, gl),
    })
    
    // Obtener el espacio de referencia
    xrRefSpace = await xrSession.requestReferenceSpace('local-floor')
    
    // Iniciar el bucle de renderizado
    xrSession.requestAnimationFrame(onXRFrame)
  } catch (err) {
    console.error('Failed to start VR:', err)
  }
}

function onSessionEnd() {
  xrSession = null
  xrRefSpace = null
}

3) El bucle de renderizado de 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)
  
  // Renderizar para cada ojo
  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view)
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height)
    
    // Obtener las matrices de la cámara
    const viewMatrix = view.transform.inverse.matrix
    const projectionMatrix = view.projectionMatrix
    
    // Renderizar la escena con estas matrices
    renderScene(viewMatrix, projectionMatrix)
  }
}

4) Fuentes de entrada (controladores)

xrSession.addEventListener('inputsourceschange', (e) => {
  for (const source of e.added) {
    console.log('Controller added:', source.handedness) // 'left' o '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
    
    // Gatillo (normalmente, índice 0)
    const triggerPressed = gamepad.buttons[0]?.pressed
    const triggerValue = gamepad.buttons[0]?.value || 0
    
    // Agarre (normalmente, índice 1)
    const gripPressed = gamepad.buttons[1]?.pressed
    
    // Joystick
    const thumbstickX = gamepad.axes[2] || 0
    const thumbstickY = gamepad.axes[3] || 0
    
    // Botones A/B (índices 4 y 5)
    const buttonA = gamepad.buttons[4]?.pressed
    const buttonB = gamepad.buttons[5]?.pressed
  }
}

No des por sentado que todos los dispositivos tienen un gamepad

El código anterior lee source.gamepad para los gatillos y joysticks. Esto funciona en visores con controladores como Meta Quest, pero no hace nada en Apple Vision Pro (WebXR está activado de forma predeterminada en Safari de visionOS 2), Samsung Galaxy XR y otros dispositivos Android XR, donde la entrada principal se basa en la mirada y el gesto de pellizco o en el seguimiento de manos. En esos visores, source.gamepad es null y session.inputSources permanece vacío hasta que el usuario hace realmente el gesto de pellizco.

Para la única interacción que garantizan todos los dispositivos, la «acción principal», escucha los eventos select en lugar de consultar continuamente los botones. WebXR emite selectstart, select y selectend de la misma forma para el gatillo de un controlador, un pellizco con la mano y un gesto de mirada y pellizco de Vision Pro, por lo que un único controlador de eventos sirve para todos ellos:

xrSession.addEventListener('selectstart', (e) => {
  // e.inputSource es el controlador, la mano o el pellizco transitorio
  // e.frame permite leer la pose de su targetRaySpace
})
xrSession.addEventListener('select', (e) => {
  // acción principal completada (gatillo presionado, pellizco soltado sobre el objetivo)
})
xrSession.addEventListener('selectend', (e) => {})

Conserva el código del gamepad para el desplazamiento con joystick y los botones adicionales en visores con controladores, pero protégelo con if (source.gamepad) y canaliza la interacción principal de «seleccionar/agarrar/activar» a través de estos eventos para que el juego siga funcionando en dispositivos controlados mediante las manos y la mirada.

5) Posiciones de los controladores

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) Lanzamiento de rayos para apuntar

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) Desplazamiento 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) {
        // Apuntar
        this.isAiming = true
        const ray = getControllerRay(frame, source)
        this.targetPosition = this.findTeleportTarget(ray)
      } else if (this.isAiming) {
        // Soltar: teletransportarse
        if (this.targetPosition) {
          player.position.x = this.targetPosition.x
          player.position.z = this.targetPosition.z
        }
        this.isAiming = false
        this.targetPosition = null
      }
    }
  }
  
  findTeleportTarget(ray) {
    // Intersecar con el plano del suelo
    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) Desplazamiento fluido

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
    
    // Aplicar la zona muerta
    if (Math.abs(moveX) < 0.1) moveX = 0
    if (Math.abs(moveY) < 0.1) moveY = 0
    
    // Obtener la dirección de la cabeza para el movimiento
    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] }
    
    // Normalizar al plano XZ
    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) Pautas de comodidad para RV

// Viñeta durante el movimiento para reducir el mareo por movimiento
function renderComfortVignette(movementSpeed) {
  const intensity = Math.min(movementSpeed / 5, 0.5)
  if (intensity < 0.1) return
  
  // Renderizar bordes oscuros que aumentan con la velocidad
  renderVignette(intensity)
}

// Giro por intervalos
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 grados
    player.rotation += angle
    snapTurnCooldown = 0.3 // Evitar giros rápidos
  }
}

10) Configuración completa de 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
    
    // Actualizar la lógica del juego
    this.teleport.update(frame, this.session.inputSources)
    
    // Renderizar
    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) {
    // Tu código de renderizado va aquí
  }
  
  onEnd() {
    this.session = null
  }
}

Contenido relacionado

• Fundamentos de WebGL
• Primeros pasos con WebGPU
• Gestión de entradas en juegos
• Tecnologías para juegos web en 2026 — dónde encaja WebXR en el panorama tecnológico general
• Three.js + USDC en el navegador — carga de recursos 3D para escenas XR

Recursos externos

• MDN: API de dispositivos WebXR — referencia completa de la API
• Immersive Web — ejemplos, herramientas y tablas de compatibilidad con navegadores para WebXR
• Guía de WebXR de Three.js — contenido de RV con Three.js