Todo el mundo tiene esa carpeta. Esa que está llena de tutoriales a medio terminar, proyectos paralelos abandonados y archivos README que prometen más de lo que cumplen. Es un cementerio de buenas intenciones, y la única forma de salir de ahí es lanzar algo —lo que sea— que realmente funcione.
Ese deseo de terminar es lo que impulsó la creación de LIAR, un juego de navegador tan pequeño y tan hostil que cabe dentro de un único archivo HTML de 28KB. Sin frameworks. Sin archivos de imagen. Sin recursos de sonido. Solo HTML5 Canvas puro, la Web Audio API y una vena de malicia.
El anti-tutorial
La mayoría de los proyectos de aprendizaje mueren porque se desbordan. Empiezas con un tutorial de canvas, añades un script de movimiento, luego decides que necesitas un editor de tiles, luego un sistema de componentes de entidad, y luego una configuración de Webpack que tarda once segundos en compilar. Seis semanas después, tienes un pipeline de construcción y ningún juego.
LIAR rechaza esa trampa. Es un juego de reacción. Un botón te dice PULSAR, MANTENER o NO HACER NADA. Actúas antes de que se agote el tiempo. Las primeras rondas establecen confianza. El texto dice PULSAR, tú pulsas. El texto dice MANTENER, mantienes el dedo presionado. Es algo sencillo, rítmico, casi meditativo.
Entonces llega la ronda seis.
La mecánica de la traición
Alrededor de la ronda seis, el juego empieza a mentir. Un comando parpadea en la pantalla —quizás un PULSAR rojo, violento y tembloroso— y cada uno de tus reflejos, construidos durante el calentamiento, te grita que presiones el botón. Si lo haces, pierdes. El temblor rojo no es un error. Es una señal. Un mentiroso honesto te da una pista, y este juego te da exactamente eso: una gramática visual del engaño.
El truco funciona porque la base es honesta. Las primeras rondas te enseñan que el color y el movimiento tienen un significado. Cuando la paleta cambia de repente y el texto tiembla, el juego no está haciendo trampas. Está enviando una señal. Tú tenías la información. O la leíste, o no lo hiciste.
Cuando fallas, el juego te insulta. Ese aguijonazo es deliberado. En un microjuego sin tabla de clasificación y sin progresión persistente, la humillación es la moneda de la rejugabilidad. Cierra el bucle de retroalimentación. No pierdes por el lag o porque la hitbox se sintió mal. Pierdes porque confiaste en una palabra roja que temblaba, y el juego se asegura de que te quedes con ese error.
Lo que 28KB significa realmente
Elegir construir dentro de un único archivo HTML de 28KB no es solo una novedad. Es una restricción de diseño que obliga a tomar decisiones difíciles. No hay megabytes de sprite sheets para esconderse detrás. No hay archivos de audio para activar. Todo lo visible se dibuja fotograma a fotograma en un HTML5 Canvas. Todo lo audible proviene de osciladores de la Web Audio API.
Si no has trabajado directamente con la Web Audio API, esto es lo que implica. En lugar de cargar un WAV o MP3 pregrabado, el código crea un AudioContext, adjunta un nodo oscilador, selecciona una forma de onda —senoidal, cuadrada, de diente de sierra— y establece una frecuencia. Un pitido corto para una entrada correcta, un zumbido áspero para un fallo. Esos tonos son calculados en tiempo real por el navegador. No cuestan nada en tamaño de archivo y no añaden peticiones de red externas.
La misma lógica se aplica a lo visual. Canvas te ofrece una superficie de dibujo de modo inmediato. Limpias el rectángulo. Rellenas el texto. Estableces una transformación o un desenfoque de sombra para el efecto de temblor. No hay diffing del DOM virtual, ni reconciliación de React, ni un array de dependencias que depurar. El navegador ejecuta el código y los píxeles aparecen. Para un juego tan enfocado, esa franqueza es una característica, no una limitación.
Mantener la carga útil en 28KB también significa que el juego se carga casi instantáneamente en un navegador móvil, incluso con una conexión inestable. No cuesta prácticamente nada alojarlo. La aplicación completa es más pequeña que la mayoría de los favicons de los sitios web. Eso importa si lo estás distribuyendo a través de un enlace compartido o incrustándolo en un foro. No hay fricción de instalación. Visitas la URL y la mentira está lista.
Engaño justo
Dedicar tiempo real a la mecánica de la mentira revela una verdad sutil sobre el diseño de juegos. La injusticia solo es divertida cuando es legible. Una trampa aleatoria que mata al jugador sin previo aviso es un mal diseño. Una trampa que vibra, cambia de color y rompe el ritmo visual establecido es un acertijo disfrazado de emboscada.
El texto rojo y tembloroso cumple varios propósitos. Anula la respuesta habitual que los jugadores desarrollaron en las rondas uno a cinco. Introduce un matiz emocional —sospecha, duda, pánico— en lo que antes era una prueba de reflejos. Y lo más importante, hace que el fallo se sienta propio. Cuando pulsas ese comando rojo y aparece el insulto, sabes que la culpa es tuya. El juego te dio una señal. Tú no supiste leerla.
This is the difference between a cheap shot and a fair fight. LIAR wants to punch you in the face, but it puts its weight behind the swing first.
Shipping Over Polishing
The game is rough. The author will tell you that themselves. It is their first finished game, and simplicity was the price of completion. That honesty is refreshing in an ecosystem where developers often blog about systems that never see production. LIAR exists at a live URL. You can play it right now. You can view the source in a single file without untangling a monorepo.
The developer wants to know two things from anyone brave enough to try it. First, how long do you survive? Second, when the first lie hits in round six, does it feel fair, or does it feel cheap? Those are the right questions to ask. They treat the lie not as a bug, but as a mechanic that needs tuning.
If there is interest, they have offered to write a deeper guide covering the Canvas drawing loop, the logic behind the Web Audio oscillators, and exactly how the lying mechanic is structured in code. Given how rare it is to see a full game inside one HTML file, that guide would be genuinely useful to anyone stuck in tutorial purgatory.
The Real Takeaway
You do not need a game engine to build a game. You do not need a content delivery network for assets, or a design document twenty pages long, or permission from a framework maintainer. You need a boundary — here, 28KB and a single file — and a reason to finish. Constraints force clarity. A shaking red word is more memorable than a thousand imported sprites when the mechanic underneath is solid.
Play LIAR for yourself at https://playliar.netlify.app/.
You can read the original developer breakdown and source context at https://dev.to/shabbir_sesaifee_8fdc587/i-built-a-game-that-lies-to-you-in-a-single-28kb-html-file-no-framework-no-assets-4hnh.