الجميع لديه ذلك المجلد. المجلد المليء بالدروس التعليمية غير المكتملة، والمشاريع الجانبية المهجورة، وملفات README التي تعد بأكثر مما تقدمه. إنه مقبرة للنوايا الحسنة، والطريقة الوحيدة للخروج هي إطلاق شيء ما — أي شيء — يعمل بالفعل.
تلك الرغبة الملحة في الإنجاز هي ما دفع لابتكار LIAR، وهي لعبة متصفح صغيرة للغاية وعدائية لدرجة أنها تتسع داخل ملف HTML واحد بحجم 28 كيلوبايت فقط. لا أطر عمل (frameworks). لا ملفات صور. لا ملفات صوتية. فقط HTML5 Canvas الخام، و Web Audio API، ونزعة عدائية.
مضادة الدروس التعليمية
معظم مشاريع التعلم تموت لأنها تتضخم بشكل غير منضبط. تبدأ بدرس تعليمي عن canvas، ثم تضيف نصاً برمجياً للحركة، ثم تقرر أنك بحاجة إلى محرر مربعات (tile editor)، ثم نظام مكونات الكيانات (entity component system)، ثم إعداد Webpack يستغرق أحد عشر ثانية للترجمة (compile). بعد ستة أسابيع، يصبح لديك خط أنابيب بناء (build pipeline) ولكن ليس لديك لعبة.
ترفض LIAR هذا الفخ. إنها لعبة رد فعل. يخبرك زر بالضغط (TAP)، أو الاستمرار (HOLD)، أو عدم القيام بشيء (DON'T). عليك التصرف قبل انتهاء الوقت. الجولات الأولى تبني الثقة؛ النص يقول TAP، فتضغط. النص يقول HOLD، فتستمر في الضغط. إنها بسيطة، إيقاعية، وشبه تأملية.
ثم تأتي الجولة السادسة.
ميكانيكا الخيانة
في حدود الجولة السادسة، تبدأ اللعبة بالكذب. تومض أمر على الشاشة — ربما يكون TAP أحمر وعنيف ومهتز — وكل رد فعل بنيته خلال مرحلة الإحماء يصرخ فيك لتضغط على الزر. إذا فعلت ذلك، فستخسر. الاهتزاز الأحمر ليس خللاً تقنياً، بل هو إشارة (tell). الكاذب الصادق يعطيك تلميحاً، وهذه اللعبة تعطيك ذلك بالضبط: لغة بصرية للخداع.
تنجح هذه الحيلة لأن الأساس صادق. الجولات الأولى تعلمك أن اللون والحركة يحملان معنى. عندما تتغير لوحة الألوان فجأة ويرتجف النص، فإن اللعبة لا تغش، بل ترسل إشارة. لقد كانت المعلومات بين يديك؛ إما أنك قرأتها أو لم تفعل.
عندما تفشل، تشتمك اللعبة. هذه اللسعة متعمدة. في لعبة مصغرة بلا قائمة متصدرين ولا تقدم مستمر، فإن الإهانة هي عملة قابلية إعادة اللعب. إنها تغلق حلقة التغذية الراجعة. أنت لا تخسر بسبب التأخير (lag) أو لأن منطقة التصادم (hitbox) كانت غير دقيقة، بل تخسر لأنك وثقت بكلمة حمراء مهتزة، وتضمن اللعبة أن تظل متذكراً لهذا الخطأ.
ماذا يعني حجم 28 كيلوبايت حقاً
اختيار البناء داخل ملف HTML واحد بحجم 28 كيلوبايت ليس مجرد حداثة، بل هو قيد تصميمي يجبرك على اتخاذ قرارات صعبة. لا توجد ميجابايتات من صفحات الرسوم (sprite sheets) لتختبئ خلفها. لا توجد ملفات صوتية لتشغيلها. كل ما هو مرئي يتم رسمه إطاراً بإطار على HTML5 Canvas. كل ما هو مسموع يأتي من Web Audio oscillators.
إذا لم تعمل مع Web Audio API مباشرة، فإليك ما يتطلبه الأمر. بدلاً من تحميل ملف WAV أو MP3 مسجل مسبقاً، يقوم الكود بإنشاء AudioContext ويربط به عقدة تذبذب (oscillator node)، ويختار شكل الموجة — sine، square، sawtooth — ويحدد التردد. رنين قصير للمدخل الصحيح، وطنين حاد للفشل. يتم حساب هذه النغمات في الوقت الفعلي بواسطة المتصفح. لا تكلف شيئاً من حيث حجم الملف ولا تتطلب أي طلبات شبكة خارجية.
ينطبق المنطق نفسه على المرئيات. يمنحك Canvas سطح رسم بنمط فوري (immediate-mode). تقوم بمسح المستطيل، وتعبئة النص، وتحديد تحويل (transform) أو ضبابية ظل (shadow blur) لتأثير الاهتزاز. لا يوجد مقارنة DOM افتراضية (virtual DOM diffing)، ولا تسوية React (React reconciliation)، ولا مصفوفة تبعيات (dependency array) لتصحيحها. يقوم المتصفح بتشغيل الكود، وتظهر البكسلات. بالنسبة للعبة بهذا التركيز، فإن هذه المباشرة هي ميزة وليست عائقاً.
الحفاظ على حجم الحمولة عند 28 كيلوبايت يعني أيضاً أن اللعبة تُحمل فوراً تقريباً على متصفح الهاتف المحمول، حتى مع الاتصال الضعيف. تكلفة استضافتها لا تذكر تقريباً. التطبيق بأكمله أصغر من معظم أيقونات المواقع (favicons). هذا أمر مهم إذا كنت توزع اللعبة عبر رابط مشترك أو تضمنها في منتدى. لا توجد عقبات عند التثبيت؛ تزور الرابط، وتكون الكذبة جاهزة.
الخداع العادل
قضاء وقت حقيقي في تطوير ميكانيكا الكذب يكشف حقيقة دقيقة حول تصميم الألعاب. عدم الإنصاف يكون ممتعاً فقط عندما يكون مفهوماً. الفخ العشوائي الذي يقتل اللاعب دون سابق إنذار هو تصميم سيئ. أما الفخ الذي يهتز، ويتغير لونه، ويكسر الإيقاع البصري الراسخ، فهو لغز متنكر في زي كمين.
يخدم النص الأحمر المهتز أغراضاً متعددة. فهو يلغي الاستجابة المعتادة التي طورها اللاعبون في الجولات من الأولى إلى الخامسة. ويقدم نبضة عاطفية — الشك، التردد، الذعر — فيما كان في السابق اختباراً لرد الفعل. والأهم من ذلك، أنه يجعل الفشل يبدو وكأنه مسؤوليتك. عندما تضغط على ذلك الأمر الأحمر وتظهر الإهانة، ستعرف أن الخطأ خطؤك. لقد أعطتك اللعبة إشارة، لكنك فشلت في قراءتها.
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.