Setiap orang punya folder itu. Folder yang penuh dengan tutorial setengah jadi, proyek sampingan yang terbengkalai, dan file README yang m...

Setiap orang pasti punya folder itu. Folder yang penuh dengan tutorial yang setengah jadi, proyek sampingan yang ditinggalkan, dan file README yang menjanjikan lebih dari yang mereka berikan. Itu adalah kuburan dari niat-niat baik, dan satu-satunya jalan keluar adalah dengan merilis sesuatu — apa pun — yang benar-benar berfungsi.

Hasrat untuk menyelesaikannya itulah yang mendorong terciptanya LIAR, sebuah game browser yang sangat kecil dan sangat menantang sehingga muat di dalam satu file HTML berukuran 28KB. Tanpa framework. Tanpa file gambar. Tanpa aset suara. Hanya HTML5 Canvas murni, Web Audio API, dan sifat yang kejam.

Anti-Tutorial

Kebanyakan proyek pembelajaran gagal karena skalanya terus membengkak. Anda mulai dengan tutorial canvas, menambah skrip pergerakan, lalu memutuskan butuh editor tile, lalu sistem entity component, lalu konfigurasi Webpack yang butuh sebelas detik untuk kompilasi. Enam minggu kemudian, Anda memiliki jalur build tetapi tidak memiliki game.

LIAR menolak jebakan itu. Ini adalah permainan reaksi. Sebuah tombol memberi tahu Anda untuk TAP, HOLD, atau DON'T. Anda bertindak sebelum timer habis. Babak-babak awal membangun kepercayaan. Teksnya bertuliskan TAP, Anda mengetuk. Teksnya bertuliskan HOLD, Anda menahan jari Anda. Ini sederhana, ritmis, dan hampir meditatif.

Lalu babak keenam tiba.

Mekanisme Pengkhianatan

Sekitar babak keenam, permainan mulai berbohong. Sebuah perintah muncul di layar — mungkin sebuah TAP berwarna merah, keras, dan bergetar — dan setiap refleks yang Anda bangun selama pemanasan berteriak kepada Anda untuk menekan tombol. Jika Anda melakukannya, Anda kalah. Getaran merah itu bukan glitch. Itu adalah sebuah petunjuk. Seorang pembohong yang jujur memberi Anda petunjuk, dan game ini memberi Anda hal yang sama persis: tata bahasa visual penipuan.

Trik ini berhasil karena fondasinya jujur. Babak-babak awal mengajarkan Anda bahwa warna dan gerakan membawa makna. Ketika palet tiba-tiba berubah dan teks bergetar, permainan tidak sedang curang. Ia sedang memberi sinyal. Anda sudah memiliki informasinya. Anda memilih untuk membacanya atau tidak.

Saat Anda gagal, permainan akan menghina Anda. Sengatan itu disengaja. Dalam sebuah micro-game tanpa leaderboard dan tanpa progres yang persisten, penghinaan adalah mata uang untuk membuat pemain ingin bermain lagi. Ini menutup siklus umpan balik. Anda tidak kalah karena lag atau karena hitbox yang terasa tidak pas. Anda kalah karena Anda memercayai kata merah yang bergetar, dan permainan memastikan Anda merenungkan kesalahan tersebut.

Apa Arti Sebenarnya dari 28KB

Memilih untuk membangun di dalam satu file HTML 28KB bukan sekadar keunikan. Ini adalah batasan desain yang memaksa pengambilan keputusan yang sulit. Tidak ada megabyte sprite sheets untuk bersembunyi di baliknya. Tidak ada file audio untuk dipicu. Segala sesuatu yang terlihat digambar frame-demi-frame pada HTML5 Canvas. Segala sesuatu yang terdengar berasal dari oscillator Web Audio.

Jika Anda belum pernah bekerja langsung dengan Web Audio API, inilah yang terlibat. Alih-alih memuat WAV atau MP3 yang telah direkam sebelumnya, kode membuat sebuah AudioContext, memasang node oscillator, memilih waveform — sine, square, sawtooth — dan mengatur frekuensi. Bunyi bip singkat untuk input yang benar, dengungan kasar untuk kegagalan. Nada-nada tersebut dihitung secara real-time oleh browser. Mereka tidak memakan ukuran file dan tidak menambah permintaan jaringan eksternal.

Logika yang sama berlaku untuk visualnya. Canvas memberi Anda permukaan gambar immediate-mode. Anda menghapus persegi panjang. Anda mengisi teks. Anda mengatur transform atau shadow blur untuk efek getaran. Tidak ada virtual DOM diffing, tidak ada rekonsiliasi React, tidak ada array dependensi untuk di-debug. Browser menjalankan kode, dan piksel pun muncul. Untuk game yang sangat fokus seperti ini, keterlangsungan tersebut adalah sebuah fitur, bukan batasan.

Menjaga payload tetap di 28KB juga berarti game ini dimuat hampir seketika di browser seluler, bahkan pada koneksi yang tidak stabil. Biaya hostingnya hampir nol. Seluruh aplikasi ini lebih kecil daripada sebagian besar favicon situs web. Hal ini penting jika Anda mendistribusikannya melalui tautan bersama atau menyematkannya di sebuah forum. Tidak ada hambatan instalasi. Anda mengunjungi URL, dan kebohongan pun siap dimulai.

Penipuan yang Adil

Menghabiskan waktu sungguhan pada mekanisme kebohongan mengungkapkan kebenaran halus tentang desain game. Ketidakadilan hanya akan terasa menyenangkan jika dapat dipahami. Jebakan acak yang membunuh pemain tanpa peringatan adalah desain yang buruk. Jebakan yang bergetar, berubah warna, dan merusak ritme visual yang telah ditetapkan adalah sebuah teka-teki yang menyamar sebagai penyergapan.

Teks merah yang bergetar melayani berbagai tujuan. Ia membatalkan respons kebiasaan yang dikembangkan pemain pada babak satu hingga lima. Ia memperkenalkan nuansa emosional — kecurigaan, keraguan, kepanikan — dalam apa yang sebelumnya merupakan tes refleks. Dan yang paling penting, ia membuat kegagalan terasa seperti kesalahan sendiri. Saat Anda mengetuk perintah merah itu dan hinaan muncul, Anda tahu kesalahan itu ada pada Anda. Game telah memberi Anda petunjuk. Anda gagal membacanya.

Inilah perbedaan antara serangan curang dan pertarungan yang adil. LIAR ingin meninju wajah Anda, tetapi ia memberikan tenaga pada ayunannya terlebih dahulu.

Mengutamakan Peluncuran daripada Memoles

Game ini masih kasar. Penulisnya sendiri akan mengatakan hal itu kepada Anda. Ini adalah game pertama mereka yang selesai, dan kesederhanaan adalah harga yang harus dibayar untuk menyelesaikannya. Kejujuran tersebut sangat menyegarkan di ekosistem di mana para pengembang sering menulis blog tentang sistem yang tidak pernah sampai ke tahap produksi. LIAR tersedia di URL langsung. Anda bisa memainkannya sekarang juga. Anda bisa melihat kode sumbernya dalam satu file tunggal tanpa harus mengurai monorepo.

Pengembang ingin mengetahui dua hal dari siapa pun yang cukup berani untuk mencobanya. Pertama, berapa lama Anda bertahan? Kedua, ketika kebohongan pertama muncul di ronde keenam, apakah terasa adil, atau terasa curang? Itulah pertanyaan yang tepat untuk diajukan. Mereka memperlakukan kebohongan bukan sebagai bug, melainkan sebagai mekanik yang perlu disesuaikan.

Jika ada minat, mereka telah menawarkan untuk menulis panduan yang lebih mendalam yang mencakup loop penggambaran Canvas, logika di balik osilator Web Audio, dan bagaimana tepatnya mekanik kebohongan disusun dalam kode. Mengingat betapa jarangnya melihat game lengkap di dalam satu file HTML, panduan tersebut akan sangat berguna bagi siapa pun yang terjebak dalam siklus tutorial tanpa henti.

Pelajaran Utama

Anda tidak memerlukan game engine untuk membuat sebuah game. Anda tidak memerlukan content delivery network untuk aset, atau dokumen desain sepanjang dua puluh halaman, atau izin dari pemelihara framework. Anda membutuhkan batasan — di sini, 28KB dan satu file tunggal — dan alasan untuk menyelesaikannya. Batasan memaksa kejelasan. Sebuah kata merah yang bergetar lebih berkesan daripada seribu sprite yang diimpor ketika mekanik di bawahnya sudah solid.

Mainkan LIAR sendiri di https://playliar.netlify.app/.
Anda dapat membaca rincian asli pengembang dan konteks sumbernya 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.