Tutoriales

Suscribirse por RSS

Guías prácticas para crear juegos web. Cada tutorial es independiente e incluye código listo para copiar y pegar.

Primeros pasos

Fundamentos del bucle de juego con Canvas 2D Crea un bucle de juego independiente de la velocidad de fotogramas con requestAnimationFrame, tiempo delta y un paso de tiempo fijo, además de sprites, colisiones y una cámara. Leer más →

Fundamentos de WebGL para desarrolladores de juegos Aprende WebGL 2 puro dibujando tu primer triángulo con shaders GLSL, búferes, texturas y un bucle de renderizado. Leer más →

Primeros pasos con WebGPU Configura un dispositivo WebGPU y el lienzo, escribe shaders WGSL y renderiza tu primer triángulo con la moderna API de GPU. Leer más →

Física

Física para juegos web Compara Rapier, Cannon-es, Ammo.js, Matter.js y más con código real para elegir el motor de física adecuado para tu juego. Leer más →

Entrada y controles

Gestión de entrada del juego (teclado, ratón, pantalla táctil y mando) Unifica el teclado, el ratón, la pantalla táctil y el mando en un único objeto de estado de entrada que el bucle de juego lee en cada fotograma. Leer más →

API Gamepad para juegos web Añade compatibilidad con mandos digna de una consola mediante asignación de botones, zonas muertas analógicas, vibración y multijugador local para hasta cuatro jugadores. Leer más →

Pointer Lock para juegos FPS Captura el ratón para obtener una vista fluida en FPS y crea una cámara con guiñada e inclinación, movimiento WASD y apuntado directo sin aceleración. Leer más →

Gráficos y renderizado

Lienzo adaptable para juegos Escala tu lienzo con nitidez en pantallas Retina mediante devicePixelRatio, bandas negras, escalado entero para pixel art y gestión de redimensionamiento sin tirones. Leer más →

Renderizado de pixel art Elimina el desenfoque con escalado entero y suavizado desactivado; después, crea animaciones de sprites, cambios de paleta, mapas de teselas y sacudidas de pantalla. Leer más →

Renderizado de texto en juegos Dibuja texto nítido con rellenos de Canvas, fuentes de mapa de bits y SDF, además de cuadros de diálogo con efecto de máquina de escribir y números de daño flotantes. Leer más →

Audio

API Web Audio para juegos Configura la API Web Audio para el sonido del juego con un gestor de sonido reutilizable, música en bucle, panoramización espacial 3D y agrupación de sonidos. Leer más →

Tone.js para el audio de juegos Genera efectos de sonido y música reactiva con los sintetizadores de Tone.js para prescindir de archivos de audio y variar cada reproducción. Leer más →

Datos y almacenamiento

Guardar y cargar con IndexedDB Almacena partidas guardadas, ajustes y recursos binarios en IndexedDB con patrones asíncronos, guardado automático y almacenamiento persistente resistente a la eliminación. Leer más →

Carga progresiva de recursos Carga los recursos del juego por niveles de prioridad con barras de progreso reales, una cola de concurrencia y caché de IndexedDB para que los jugadores empiecen rápidamente. Leer más →

Rendimiento y optimización

Publica un juego web que cargue rápido Una lista de comprobación práctica que abarca presupuestos de carga, compresión Brotli y Zstandard, texturas KTX2, división de código y almacenamiento en caché. Leer más →

Web Workers para la lógica de juegos Ejecuta física, búsqueda de rutas A* y generación procedimental en un hilo de segundo plano mediante grupos de workers, objetos transferibles y OffscreenCanvas. Leer más →

Activar hilos de Wasm (SharedArrayBuffer) Configura las cabeceras COOP y COEP que habilitan el aislamiento entre orígenes para que SharedArrayBuffer y los hilos de Wasm funcionen realmente. Leer más →

Redes

Fundamentos del multijugador con WebSocket Configura un sistema multijugador en tiempo real con reconexiones, predicción del lado del cliente, interpolación de instantáneas y mensajes binarios mediante un servidor autoritativo. Leer más →

Móviles y plataformas

Juegos web adaptados a dispositivos móviles Añade controles táctiles, un joystick virtual, gestión del área de visualización y la orientación, y un rendimiento que tenga en cuenta la batería para que tu juego funcione de maravilla en teléfonos. Leer más →

PWA para juegos sin conexión Haz que tu juego se pueda instalar y jugar sin conexión mediante un manifiesto, almacenamiento en caché con service workers, avisos de actualización y sincronización de puntuaciones en segundo plano. Leer más →

Service workers para almacenar juegos en caché Almacena los recursos del juego en caché con estrategias cache-first, network-first y stale-while-revalidate, además de control de versiones y solicitudes de rango para audio. Leer más →

Prácticas recomendadas para integrar juegos con iframes Integra tu juego correctamente en iframes con los permisos adecuados, postMessage para comunicarse con la página principal, pantalla completa, correcciones de foco y SDK de plataformas. Leer más →

VR/XR

Fundamentos de WebXR para juegos de RV Configura una sesión de RV con WebXR, renderiza para cada ojo, lee los mandos y añade teletransporte y locomoción fluida compatibles con visores controlados mediante las manos o la mirada. Leer más →

Analítica y monitorización

Analítica para juegos web Crea un sistema de seguimiento de eventos por lotes para sesiones, embudos de niveles, FPS, errores, pruebas A/B y privacidad sujeta al consentimiento. Leer más →

Herramientas y flujo de trabajo

Herramientas de programación con agentes de IA Compara Claude Code, Cursor y Copilot, y aprende flujos de trabajo en modo de planificación, controles de aprobación y prompts que hacen que los agentes editen y prueben código real. Leer más →