Everyone has that folder. The one stuffed with half-finished tutorials, abandoned side projects, and README files that promise more than they deliver. It is a graveyard of good intentions, and the only way out is to ship something — anything — that actually works.

That itch to finish is what drove the creation of LIAR, a browser game so small and so hostile that it fits inside a single 28KB HTML file. No frameworks. No image files. No sound assets. Just raw HTML5 Canvas, the Web Audio API, and a mean streak.

The Anti-Tutorial

Most learning projects die because they grow legs. You start with a canvas tutorial, add a movement script, then decide you need a tile editor, then an entity component system, then a Webpack config that takes eleven seconds to compile. Six weeks later you have a build pipeline and no game.

LIAR refuses that trap. It is a reaction game. A button tells you to TAP, HOLD, or DON'T. You act before a timer runs out. Early rounds establish trust. The text says TAP, you tap. The text says HOLD, you hold your finger down. It is simple, rhythmic, almost meditative.

Then round six arrives.

The Mechanics of Betrayal

Around round six, the game starts lying. A command flashes on screen — perhaps a violent, red, shaking TAP — and every reflex you built during the warm-up screams at you to hit the button. If you do, you lose. The red shake is not a glitch. It is a tell. An honest liar gives you a clue, and this game gives you exactly that: a visual grammar of deception.

The trick works because the foundation is honest. The early rounds teach you that color and motion carry meaning. When the palette suddenly shifts and the text trembles, the game is not cheating. It is signaling. You had the information. You either read it or you did not.

When you fail, the game insults you. That sting is deliberate. In a micro-game with no leaderboard and no persistent progression, humiliation is the currency of replayability. It closes the feedback loop. You do not lose because of lag or because a hitbox felt off. You lose because you trusted a shaking red word, and the game makes sure you sit with that mistake.

What 28KB Actually Means

Choosing to build inside a single 28KB HTML file is not just a novelty. It is a design constraint that forces hard decisions. There are no megabytes of sprite sheets to hide behind. No audio files to trigger. Everything visible is drawn frame-by-frame on an HTML5 Canvas. Everything audible comes from Web Audio oscillators.

If you have not worked with the Web Audio API directly, here is what that entails. Instead of loading a pre-recorded WAV or MP3, the code creates an AudioContext, attaches an oscillator node, selects a waveform — sine, square, sawtooth — and sets a frequency. A short beep for a correct input, a harsh buzz for a failure. Those tones are computed in real time by the browser. They cost nothing in file size and add no external network requests.

The same logic applies to the visuals. Canvas gives you an immediate-mode drawing surface. You clear the rectangle. You fill text. You set a transform or a shadow blur for the shake effect. There is no virtual DOM diffing, no React reconciliation, no dependency array to debug. The browser runs the code, and the pixels appear. For a game this focused, that directness is a feature, not a limitation.

Keeping the payload at 28KB also means the game loads almost instantly on a mobile browser, even on a shaky connection. It costs virtually nothing to host. The entire application is smaller than most website favicons. That matters if you are distributing through a shared link or embedding on a forum. There is no install friction. You visit the URL, and the lie is ready.

Fair Deception

Spending real time on the lying mechanic reveals a subtle truth about game design. Unfairness is only fun when it is legible. A random trap that kills the player without warning is bad design. A trap that vibrates, changes color, and breaks the established visual rhythm is a puzzle dressed as an ambush.

The red shaking text serves multiple purposes. It overrides the habitual response players developed in rounds one through five. It introduces an emotional beat — suspicion, hesitation, panic — in what was previously a reflex test. And most importantly, it makes failure feel owned. When you tap that red command and the insult appears, you know the fault is yours. The game gave you a tell. You failed to read it.

Đây chính là sự khác biệt giữa một đòn chơi xấu và một cuộc đấu công bằng. LIAR muốn đấm vào mặt bạn, nhưng trước hết, nó dồn toàn bộ lực vào cú vung tay đó.

Ưu tiên Phát hành hơn là Trau chuốt

Trò chơi này còn khá thô. Chính tác giả cũng sẽ nói với bạn như vậy. Đây là trò chơi hoàn chỉnh đầu tiên của họ, và sự đơn giản chính là cái giá để có thể hoàn thành. Sự trung thực đó thật đáng quý trong một hệ sinh thái nơi các nhà phát triển thường viết blog về những hệ thống chẳng bao giờ được đưa vào thực tế. LIAR hiện hữu tại một URL trực tiếp. Bạn có thể chơi nó ngay bây giờ. Bạn có thể xem mã nguồn trong một tệp duy nhất mà không cần phải gỡ rối một monorepo.

Nhà phát triển muốn biết hai điều từ bất kỳ ai đủ can đảm để thử nó. Thứ nhất, bạn sống sót được bao lâu? Thứ hai, khi lời nói dối đầu tiên xuất hiện ở vòng thứ sáu, bạn cảm thấy nó công bằng hay cảm thấy bị chơi xấu? Đó là những câu hỏi đúng đắn. Họ coi lời nói dối không phải là một lỗi, mà là một cơ chế cần được tinh chỉnh.

Nếu có người quan tâm, họ đã đề nghị viết một hướng dẫn chuyên sâu bao gồm vòng lặp vẽ Canvas, logic đằng sau các bộ dao động Web Audio, và chính xác cách cơ chế nói dối được cấu trúc trong mã nguồn. Với việc một trò chơi đầy đủ nằm gọn trong một tệp HTML là điều hiếm thấy, bản hướng dẫn đó sẽ thực sự hữu ích cho bất kỳ ai đang mắc kẹt trong "luyện ngục" của các bài hướng dẫn.

Bài học cốt lõi

Bạn không cần một game engine để xây dựng một trò chơi. Bạn không cần mạng phân phối nội dung (CDN) cho các tài nguyên, hay một tài liệu thiết kế dài hai mươi trang, hay sự cho phép từ người duy trì framework. Bạn cần một giới hạn — ở đây là 28KB và một tệp duy nhất — và một lý do để hoàn thành. Những ràng buộc buộc ta phải trở nên rõ ràng. Một từ màu đỏ đang rung lên sẽ đáng nhớ hơn cả ngàn sprite được nhập vào khi cơ chế cốt lõi bên dưới thực sự vững chắc.

Hãy tự mình trải nghiệm LIAR tại https://playliar.netlify.app/.
Bạn có thể đọc phần phân tích chi tiết của nhà phát triển và ngữ cảnh mã nguồn tại 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.