Setiap orang mempunyai folder itu. Folder yang sarat dengan tutorial yang tidak selesai, projek sampingan yang ditinggalkan, dan fail README yang menjanjikan lebih daripada apa yang mampu diberikan. Ia adalah sebuah tanah perkuburan niat yang baik, dan satu-satunya jalan keluar adalah dengan melancarkan sesuatu — apa sahaja — yang benar-benar berfungsi.
Keinginan mendalam untuk menyiapkannya itulah yang mendorong penciptaan LIAR, sebuah permainan pelayar yang sangat kecil dan sangat mencabar sehingga ia muat di dalam satu fail HTML 28KB sahaja. Tiada rangka kerja (frameworks). Tiada fail imej. Tiada aset bunyi. Hanya HTML5 Canvas mentah, Web Audio API, dan sedikit sifat garang.
Anti-Tutorial
Kebanyakan projek pembelajaran mati kerana ia menjadi terlalu besar dan kompleks. Anda bermula dengan tutorial canvas, menambah skrip pergerakan, kemudian memutuskan anda memerlukan penyunting jubin (tile editor), kemudian sistem komponen entiti (entity component system), kemudian konfigurasi Webpack yang mengambil masa sebelas saat untuk dikompil. Enam minggu kemudian, anda mempunyai saluran binaan (build pipeline) tetapi tiada permainan.
LIAR menolak perangkap itu. Ia adalah sebuah permainan reaksi. Satu butang memberitahu anda untuk KETIK (TAP), TEKAN (HOLD), atau JANGAN (DON'T). Anda bertindak sebelum pemasa habis. Pusingan awal membina kepercayaan. Teks menyebut TAP, anda mengetik. Teks menyebut HOLD, anda menekan jari anda. Ia ringkas, berirama, dan hampir seperti meditasi.
Kemudian, pusingan keenam tiba.
Mekanik Pengkhianatan
Menjelang pusingan keenam, permainan mula menipu. Satu arahan berkelip di skrin — mungkin satu KETIK (TAP) yang merah, ganas, dan bergegar — dan setiap refleks yang anda bina semasa sesi pemanasan akan menjerit kepada anda untuk menekan butang tersebut. Jika anda melakukannya, anda kalah. Gegaran merah itu bukan ralat (glitch). Ia adalah satu petunjuk (a tell). Seorang penipu yang jujur akan memberi anda pembayang, dan permainan ini memberikan anda perkara yang sama: tatabahasa visual penipuan.
Trik ini berkesan kerana asasnya adalah jujur. Pusingan awal mengajar anda bahawa warna dan gerakan membawa makna. Apabila palet warna tiba-tiba berubah dan teks bergetar, permainan itu tidak menipu. Ia sedang memberi isyarat. Anda telah menerima maklumat tersebut. Sama ada anda membacanya atau tidak.
Apabila anda gagal, permainan itu menghina anda. Sengatan itu adalah disengajakan. Dalam sebuah permainan mikro tanpa papan pendahulu dan tanpa kemajuan berterusan, penghinaan adalah mata wang untuk kebolehmain semula (replayability). Ia menutup kitaran maklum balas. Anda tidak kalah disebabkan oleh lengah (lag) atau kerana kawasan sentuhan (hitbox) terasa tidak tepat. Anda kalah kerana anda mempercayai perkataan merah yang bergegar, dan permainan ini memastikan anda merasai kesilapan tersebut.
Apa Maksud Sebenar 28KB
Memilih untuk membina di dalam satu fail HTML 28KB bukan sekadar satu keunikan. Ia adalah satu kekangan reka bentuk yang memaksa keputusan sukar dibuat. Tiada megabait helaian sprite (sprite sheets) untuk bersembunyi di sebaliknya. Tiada fail audio untuk dimuatkan. Segala yang kelihatan dilukis bingkai demi bingkai pada HTML5 Canvas. Segala yang kedengaran datang daripada osilator Web Audio.
Jika anda belum pernah bekerja dengan Web Audio API secara langsung, inilah yang terlibat. Daripada memuatkan WAV atau MP3 yang telah dirakam, kod tersebut mencipta AudioContext, menyambungkan nod osilator, memilih bentuk gelombang — sinus (sine), segiempat (square), gergaji (sawtooth) — dan menetapkan frekuensi. Bunyi bip pendek untuk input yang betul, bunyi dengungan kasar untuk kegagalan. Nada-nada tersebut dikira dalam masa nyata oleh pelayar. Ia tidak menelan sebarang saiz fail dan tidak menambah sebarang permintaan rangkaian luaran.
Logik yang sama terpakai kepada visual. Canvas memberikan anda permukaan lukisan mod segera (immediate-mode). Anda memadamkan segi empat. Anda mengisi teks. Anda menetapkan transformasi atau kekaburan bayang (shadow blur) untuk kesan gegaran. Tiada perbezaan (diffing) virtual DOM, tiada penyelarasan (reconciliation) React, tiada tatasusunan kebergantungan (dependency array) untuk dinyahpepijat (debug). Pelayar menjalankan kod tersebut, dan piksel pun muncul. Untuk permainan yang sangat fokus sebegini, keterusannya adalah satu ciri, bukannya satu had.
Mengekalkan saiz muatan (payload) pada 28KB juga bermakna permainan dimuatkan hampir serta-merta pada pelayar mudah alih, walaupun pada sambungan yang tidak stabil. Kos untuk menghosnya hampir sifar. Keseluruhan aplikasi adalah lebih kecil daripada kebanyakan ikon kegemaran (favicon) laman web. Itu penting jika anda mengedarkannya melalui pautan kongsi atau menyematkannya di dalam forum. Tiada halangan pemasangan. Anda melawat URL, dan penipuan sedia bermula.
Penipuan yang Adil
Meluangkan masa sebenar pada mekanik penipuan mendedahkan kebenaran halus tentang reka bentuk permainan. Ketidakadilan hanya menyeronokkan apabila ia boleh difahami. Perangkap rawak yang membunuh pemain tanpa amaran adalah reka bentuk yang buruk. Perangkap yang bergetar, berubah warna, dan memecahkan ritma visual yang telah ditetapkan adalah sebuah teka-teki yang berpura-pura menjadi serangan hendap.
Teks merah yang bergegar berfungsi untuk pelbagai tujuan. Ia mengatasi tindak balas tabiat yang dibangunkan pemain dalam pusingan satu hingga lima. Ia memperkenalkan rentak emosi — syak wasangka, teragak-agak, panik — dalam apa yang sebelum ini merupakan ujian refleks. Dan yang paling penting, ia membuatkan kegagalan itu terasa seperti kesilapan sendiri. Apabila anda mengetik arahan merah itu dan penghinaan muncul, anda tahu kesilapan itu adalah milik anda. Permainan itu telah memberi anda petunjuk. Anda gagal membacanya.
Inilah perbezaan antara serangan kotor dan pertarungan yang adil. LIAR mahu menumbuk muka anda, tetapi ia memberikan seluruh kekuatannya pada hayunan itu terlebih dahulu.
Mengutamakan Pelancaran Berbanding Penggilapan
Permainan ini masih kasar. Penulis sendiri akan memberitahu anda perkara itu. Ini adalah permainan pertama mereka yang telah siap, dan kesederhanaan adalah harga yang perlu dibayar untuk menyiapkannya. Kejujuran sebegitu amat menyegarkan dalam ekosistem di mana pembangun sering menulis blog tentang sistem yang tidak pernah sampai ke peringkat produksi. LIAR wujud pada URL yang aktif. Anda boleh memainkannya sekarang juga. Anda boleh melihat kod sumber dalam satu fail tunggal tanpa perlu mengurai monorepo.
Pembangun ingin mengetahui dua perkara daripada sesiapa sahaja yang cukup berani untuk mencubanya. Pertama, berapa lama anda boleh bertahan? Kedua, apabila penipuan pertama berlaku pada pusingan keenam, adakah ia terasa adil, atau terasa seperti serangan kotor? Itulah soalan yang tepat untuk ditanya. Mereka tidak menganggap penipuan itu sebagai pepijat, sebaliknya sebagai satu mekanik yang memerlukan pelarasan.
Jika ada minat, mereka telah menawarkan untuk menulis panduan yang lebih mendalam merangkumi gelung lukisan Canvas, logik di sebalik osilator Web Audio, dan bagaimana sebenarnya mekanik penipuan itu disusun dalam kod. Memandangkan betapa jarangnya kita melihat permainan penuh di dalam satu fail HTML, panduan tersebut pasti akan sangat berguna kepada sesiapa sahaja yang terperangkap dalam purgatori tutorial.
Intipati Sebenar
Anda tidak memerlukan enjin permainan untuk membina sebuah permainan. Anda tidak memerlukan rangkaian penghantaran kandungan untuk aset, atau dokumen reka bentuk sepanjang dua puluh halaman, atau kebenaran daripada penyelenggara rangka kerja. Anda memerlukan sempadan — dalam kes ini, 28KB dan satu fail tunggal — serta alasan untuk menyiapkannya. Kekangan memaksa kejelasan. Perkataan merah yang bergegar adalah lebih mudah diingati berbanding seribu sprite yang diimport apabila mekanik di bawahnya adalah mantap.
Mainkan LIAR sendiri di https://playliar.netlify.app/.
Anda boleh membaca huraian asal pembangun dan konteks sumber di 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.