Everyone has that folder. The one stuffed with half finished tutorials, abandoned side projects, and README files that p

എല്ലാവർക്കും അങ്ങനെയൊരു ഫോൾഡർ ഉണ്ടാകും. പകുതിവഴിയിൽ ഉപേക്ഷിച്ച ട്യൂട്ടോറിയലുകളും, പാതിവഴിയിൽ നിർത്തിയ സൈഡ് പ്രോജക്റ്റുകളും, വാഗ്ദാനം നൽകുന്നതിനേക്കാൾ കുറവ് മാത്രം നൽകുന്ന README ഫയലുകളും നിറഞ്ഞ ഒന്ന്. അത് നല്ല ഉദ്ദേശ്യങ്ങളുടെ ഒരു ശ്മശാനമാണ്, അതിൽ നിന്ന് പുറത്തുകടക്കാനുള്ള ഏക വഴി ശരിക്കും പ്രവർത്തിക്കുന്ന എന്തെങ്കിലും ഒന്ന് പുറത്തിറക്കുക എന്നതാണ്.

പൂർത്തിയാക്കാനുള്ള ആ ആഗ്രഹം ആണ് LIAR എന്ന ഗെയിമിന് പിന്നിലെ പ്രേരണ. വെറും 28KB-യുടെ ഒരു HTML ഫയലിനുള്ളിൽ ഒതുങ്ങുന്ന, വളരെ ചെറുതും എന്നാൽ കഠിനവുമായ ഒരു ബ്രൗസർ ഗെയിമാണിത്. No frameworks. No image files. No sound assets. വെറും HTML5 Canvas, Web Audio API, പിന്നെ കുറച്ച് കടുപ്പമേറിയ സ്വഭാവവും മാത്രം.

ആന്റി-ട്യൂട്ടോറിയൽ

മിക്ക പഠന പ്രോജക്റ്റുകളും പരാജയപ്പെടുന്നത് അവ അമിതമായി വലുതാകുന്നത് കൊണ്ടാണ്. നിങ്ങൾ ഒരു canvas tutorial-ൽ നിന്ന് തുടങ്ങുന്നു, ഒരു movement script ചേർക്കുന്നു, പിന്നെ ഒരു tile editor വേണമെന്ന് തീരുമാനിക്കുന്നു, തുടർന്ന് ഒരു entity component system, പിന്നെ കംപൈൽ ചെയ്യാൻ പതിനൊന്ന് സെക്കൻഡ് എടുക്കുന്ന ഒരു Webpack config. ആറ് ആഴ്ചകൾക്ക് ശേഷം നിങ്ങളുടെ കൈവശം ഒരു build pipeline ഉണ്ടാകും, പക്ഷേ ഗെയിം ഉണ്ടാകില്ല.

LIAR ആ കെണിയിൽ വീഴാൻ തയ്യാറല്ല. ഇതൊരു reaction game ആണ്. TAP, HOLD, അല്ലെങ്കിൽ DON'T എന്ന് ഒരു ബട്ടൺ നിങ്ങളോട് പറയും. ടൈമർ തീരുന്നതിന് മുമ്പ് നിങ്ങൾ പ്രവർത്തിക്കണം. ആദ്യ റൗണ്ടുകൾ വിശ്വാസം വളർത്തുന്നു. ടെക്സ്റ്റ് TAP എന്ന് പറയുമ്പോൾ നിങ്ങൾ ടാപ്പ് ചെയ്യുന്നു. HOLD എന്ന് പറയുമ്പോൾ നിങ്ങൾ വിരൽ അമർത്തിപ്പിടിക്കുന്നു. ഇത് ലളിതവും താളാത്മകവും ഏതാണ്ട് ധ്യാനതുല്യവുമാണ്.

പിന്നെ ആറാം റൗണ്ട് വരുന്നു.

വഞ്ചനയുടെ രീതികൾ

ആറാം റൗണ്ട് അടുക്കുമ്പോൾ ഗെയിം കള്ളം പറയാൻ തുടങ്ങുന്നു. സ്ക്രീനിൽ ഒരു കമാൻഡ് മിന്നിമറയുന്നു — ഒരുപക്ഷേ രക്തവർണ്ണത്തിലുള്ള, വിറയ്ക്കുന്ന ഒരു TAP — നിങ്ങളുടെ എല്ലാ പ്രതികരണങ്ങളും ബട്ടൺ അമർത്താൻ നിങ്ങളോട് വിളിച്ചുപറയും. നിങ്ങൾ അങ്ങനെ ചെയ്താൽ, നിങ്ങൾ തോൽക്കും. ആ ചുവന്ന വിറയൽ ഒരു പിശക് (glitch) അല്ല. അതൊരു സൂചനയാണ്. ഒരു സത്യസന്ധനായ കള്ളൻ നിങ്ങൾക്ക് ഒരു സൂചന നൽകും, ഈ ഗെയിമും അത് നൽകുന്നു: വഞ്ചനയുടെ ഒരു വിഷ്വൽ ഗ്രാമർ (visual grammar of deception).

ഈ തന്ത്രം വിജയിക്കുന്നത് അതിന്റെ അടിസ്ഥാനം സത്യസന്ധമായതുകൊണ്ടാണ്. നിറവും ചലനവും അർത്ഥം നൽകുന്നു എന്ന് ആദ്യ റൗണ്ടുകൾ നിങ്ങളെ പഠിപ്പിക്കുന്നു. പെട്ടെന്ന് നിറം മാറുകയും ടെക്സ്റ്റ് വിറയ്ക്കുകയും ചെയ്യുമ്പോൾ, ഗെയിം കബളിപ്പിക്കുകയല്ല ചെയ്യുന്നത്. അത് സൂചന നൽകുകയാണ്. വിവരങ്ങൾ നിങ്ങളുടെ മുന്നിലുണ്ടായിരുന്നു. ഒന്നുകിൽ നിങ്ങൾ അത് വായിച്ചു, അല്ലെങ്കിൽ നിങ്ങൾ വായിച്ചില്ല.

നിങ്ങൾ പരാജയപ്പെടുമ്പോൾ, ഗെയിം നിങ്ങളെ പരിഹസിക്കുന്നു. ആ പരിഹാസം മനഃപൂർവ്വമാണ്. ലീഡർബോർഡോ സ്ഥിരമായ പുരോഗതിയോ ഇല്ലാത്ത ഒരു മൈക്രോ-ഗെയിമിൽ, വീണ്ടും കളിക്കാനുള്ള താൽപ്പര്യം ഉണ്ടാക്കുന്നത് ആ അപമാനമാണ്. അത് ഫീഡ്ബാക്ക് ലൂപ്പ് പൂർത്തിയാക്കുന്നു. ലാഗ് കാരണമോ അല്ലെങ്കിൽ ഹിറ്റ്‌ബോക്സ് (hitbox) ശരിയല്ലാത്തതുകൊണ്ടോ അല്ല നിങ്ങൾ തോൽക്കുന്നത്. വിറയ്ക്കുന്ന ഒരു ചുവന്ന വാക്കിനെ നിങ്ങൾ വിശ്വസിച്ചതുകൊണ്ടാണ് നിങ്ങൾ തോൽക്കുന്നത്, ആ തെറ്റ് നിങ്ങൾ ഓർമ്മയിൽ വെക്കാനും ഗെയിം നിങ്ങളെ പ്രേരിപ്പിക്കുന്നു.

28KB എന്നാൽ യഥാർത്ഥത്തിൽ എന്താണ് അർത്ഥമാക്കുന്നത്?

വെറും 28KB-യുടെ ഒരു HTML ഫയലിനുള്ളിൽ ഗെയിം നിർമ്മിക്കാൻ തീരുമാനിച്ചത് വെറുമൊരു പുതുമയ്ക്കല്ല. അത് കഠിനമായ തീരുമാനങ്ങൾ എടുക്കാൻ നിർബന്ധിക്കുന്ന ഒരു ഡിസൈൻ നിയന്ത്രണമാണ് (design constraint). ഒളിച്ചിരിക്കാൻ മെഗാബൈറ്റുകൾ വരുന്ന സ്പ്രൈറ്റ് ഷീറ്റുകൾ (sprite sheets) ഇല്ല. പ്ലേ ചെയ്യാൻ ഓഡിയോ ഫയലുകൾ ഇല്ല. കാണുന്നതെല്ലാം HTML5 Canvas-ൽ ഫ്രെയിം ബൈ ഫ്രെയിം വരച്ചതാണ്. കേൾക്കുന്നതെല്ലാം Web Audio oscillators-ൽ നിന്നുള്ളതാണ്.

നിങ്ങൾ നേരിട്ട് Web Audio API ഉപയോഗിച്ചിട്ടില്ലെങ്കിൽ, അതിന്റെ രീതി ഇതാണ്. മുൻകൂട്ടി റെക്കോർഡ് ചെയ്ത ഒരു WAV അല്ലെങ്കിൽ MP3 ലോഡ് ചെയ്യുന്നതിന് പകരം, കോഡ് ഒരു AudioContext നിർമ്മിക്കുന്നു, ഒരു oscillator node ഘടിപ്പിക്കുന്നു, ഒരു വേവ്ഫോം — sine, square, sawtooth — തിരഞ്ഞെടുക്കുന്നു, കൂടാതെ ഒരു ഫ്രീക്വൻസി നിശ്ചയിക്കുന്നു. ശരിയായ ഇൻപുട്ടിന് ഒരു ചെറിയ ബീപ്പും, പരാജയപ്പെട്ടാൽ ഒരു കഠിനമായ ബസ്സ് (buzz) ശബ്ദവും. ഈ ടോണുകൾ ബ്രൗസർ തത്സമയം (real time) കണക്കാക്കുന്നു. അവ ഫയൽ വലുപ്പത്തിൽ മാറ്റം വരുത്തുന്നില്ല, കൂടാതെ പുറത്തുനിന്നുള്ള നെറ്റ്‌വർക്ക് റിക്വസ്റ്റുകളും ആവശ്യമില്ല.

ഇതേ ലോജിക് തന്നെ വിഷ്വലുകൾക്കും ബാധകമാണ്. Canvas നിങ്ങൾക്ക് പെട്ടെന്നുള്ള ഒരു ഡ്രോയിംഗ് സർഫസ് നൽകുന്നു. നിങ്ങൾ റെക്റ്റാങ്കിൾ ക്ലിയർ ചെയ്യുന്നു. ടെക്സ്റ്റ് നിറയ്ക്കുന്നു. വിറയൽ ഇഫക്റ്റിനായി ഒരു ട്രാൻസ്ഫോം അല്ലെങ്കിൽ ഷാഡോ ബ്ലർ (shadow blur) സെറ്റ് ചെയ്യുന്നു. അവിടെ virtual DOM diffing ഇല്ല, React reconciliation ഇല്ല, ഡിബഗ് ചെയ്യാൻ dependency array ഇല്ല. ബ്രൗസർ കോഡ് പ്രവർത്തിപ്പിക്കുന്നു, പിക്സലുകൾ പ്രത്യക്ഷപ്പെടുന്നു. ഇത്രയും ഫോക്കസ്ഡ് ആയ ഒരു ഗെയിമിനെ സംബന്ധിച്ചിടത്തോളം, ആ നേരിട്ടുള്ള രീതി ഒരു പരിമിതിയല്ല, മറിച്ച് ഒരു സവിശേഷതയാണ്.

പേലോഡ് (payload) 28KB-യിൽ തന്നെ നിലനിർത്തുന്നത് കൊണ്ട് ഗെയിം ഒരു മൊബൈൽ ബ്രൗസറിൽ വളരെ വേഗത്തിൽ ലോഡ് ആകുന്നു, കണക്ഷൻ മോശമാണെങ്കിൽ പോലും. ഇത് ഹോസ്റ്റ് ചെയ്യാൻ വലിയ ചിലവില്ല. മിക്ക വെബ്‌സൈറ്റുകളുടെ ഫേവികോണിനേക്കാളും (favicon) ചെറുതാണ് ഈ ആപ്ലിക്കേഷൻ. നിങ്ങൾ ഒരു ലിങ്ക് വഴിയോ ഫോറം വഴിയോ ഇത് പങ്കുവെക്കുകയാണെങ്കിൽ ഇത് വളരെ പ്രധാനമാണ്. ഇൻസ്റ്റാൾ ചെയ്യാനുള്ള ബുദ്ധിമുട്ടുകളില്ല. നിങ്ങൾ URL സന്ദർശിക്കുന്നു, കള്ളം തയ്യാറാണ്.

ന്യായമായ വഞ്ചന

വഞ്ചനയുടെ മെക്കാനിക്സിനായി സമയം ചെലവഴിക്കുമ്പോൾ ഗെയിം ഡിസൈനിനെക്കുറിച്ചുള്ള ഒരു സൂക്ഷ്മമായ സത്യം വെളിപ്പെടുന്നു. അന്യായമായ കാര്യങ്ങൾ പോലും മനസ്സിലാക്കാൻ കഴിയുന്നതാണെങ്കിൽ മാത്രമേ അത് രസകരമാകൂ. മുന്നറിയിപ്പില്ലാതെ കളിക്കാരനെ കൊല്ലുന്ന ഒരു റാൻഡം ട്രാപ്പ് മോശം ഡിസൈനാണ്. എന്നാൽ വിറയ്ക്കുന്നതും നിറം മാറുന്നതും നിലവിലുള്ള വിഷ്വൽ റിഥം തെറ്റിക്കുന്നതുമായ ഒരു ട്രാപ്പ്, ഒരു കെണി പോലെ തോന്നിക്കുന്ന ഒരു പസിലാണ്.

ചുവന്ന വിറയ്ക്കുന്ന ടെക്സ്റ്റിന് ഒന്നിലധികം ലക്ഷ്യങ്ങളുണ്ട്. ഒന്നാം റൗണ്ട് മുതൽ അഞ്ചാം റൗണ്ട് വരെ കളിക്കാർ വികസിപ്പിച്ചെടുത്ത ശീലങ്ങളെ അത് മറികടക്കുന്നു. മുമ്പ് ഒരു റിഫ്ലെക്സ് ടെസ്റ്റ് ആയിരുന്നതിൽ സംശയം, മടി, പരിഭ്രാന്തി എന്നിങ്ങനെയുള്ള വൈകാരികമായ ഘടകങ്ങൾ അത് കൊണ്ടുവരുന്നു. എല്ലാറ്റിലുമുപരി, പരാജയം സ്വന്തം തെറ്റാണെന്ന് തോന്നിപ്പിക്കാൻ അത് സഹായിക്കുന്നു. നിങ്ങൾ ആ ചുവന്ന കമാൻഡ് ടാപ്പ് ചെയ്യുമ്പോൾ പരിഹാസം പ്രത്യക്ഷപ്പെട്ടാൽ, തെറ്റ് നിങ്ങളുടേതാണെന്ന് നിങ്ങൾക്ക് മനസ്സിലാകും. ഗെയിം നിങ്ങൾക്ക് ഒരു സൂചന നൽകിയിരുന്നു, അത് വായിച്ചെടുക്കാൻ നിങ്ങൾ പരാജയപ്പെട്ടു.

ഒരു അനീതിപരമായ പ്രഹരവും നീതിയുക്തമായ പോരാട്ടവും തമ്മിലുള്ള വ്യത്യാസമാണിത്. LIAR നിങ്ങളുടെ മുഖത്ത് ഇടാൻ ആഗ്രഹിക്കുന്നു, പക്ഷേ ആ ആഘാതം നൽകുന്നതിന് മുൻപ് അത് അതിന്റെ മുഴുവൻ കരുത്തും ആഞ്ഞടിക്കാൻ തയ്യാറെടുക്കുന്നു.

മിനുക്കുപണികളേക്കാൾ പ്രധാനം പുറത്തിറക്കുക എന്നതാണ്

ഈ ഗെയിം അത്ര മിനുസപ്പെട്ടതല്ല. രചയിതാവ് തന്നെ അത് സമ്മതിക്കുന്നുണ്ട്. ഇത് അവരുടെ ആദ്യത്തെ പൂർത്തിയാക്കിയ ഗെയിമാണ്, പൂർത്തിയാക്കുക എന്ന ലക്ഷ്യത്തിനായി ലളിതമായിരിക്കുക എന്നതായിരുന്നു അവർ തിരഞ്ഞെടുത്ത വഴി. ഡെവലപ്പർമാർ പലപ്പോഴും പ്രൊഡക്ഷനിൽ എത്താറില്ലാത്ത സിസ്റ്റങ്ങളെക്കുറിച്ച് ബ്ലോഗുകൾ എഴുതുന്ന ഒരു കാലഘട്ടത്തിൽ, ഈ സത്യസന്ധത പുതുമയുള്ളതാണ്. LIAR ഒരു ലൈവ് URL-ൽ ലഭ്യമാണ്. നിങ്ങൾക്ക് ഇപ്പോൾ തന്നെ ഇത് കളിക്കാം. ഒരു monorepo അഴിച്ചുമാറ്റാതെ തന്നെ ഒരു സിംഗിൾ ഫയലിൽ ഇതിന്റെ സോഴ്സ് കോഡ് നിങ്ങൾക്ക് കാണാം.

ഇത് പരീക്ഷിക്കാൻ ധൈര്യമുള്ളവരിൽ നിന്ന് ഡെവലപ്പർ രണ്ട് കാര്യങ്ങൾ അറിയാൻ ആഗ്രഹിക്കുന്നു. ഒന്നാമതായി, നിങ്ങൾ എത്രത്തോളം അതിജീവിക്കുന്നു? രണ്ടാമതായി, ആറാം റൗണ്ടിൽ ആദ്യത്തെ കള്ളം വരുമ്പോൾ, അത് നീതിയുക്തമാണെന്ന് തോന്നുന്നുണ്ടോ അതോ ചതിയാണെന്ന് തോന്നുന്നുണ്ടോ? ചോദിക്കേണ്ടത് ശരിയായ ചോദ്യങ്ങളാണിവ. അവർ കള്ളത്തെ ഒരു ബഗ് ആയിട്ടല്ല, മറിച്ച് ക്രമീകരിക്കേണ്ട ഒരു മെക്കാനിക് ആയിട്ടാണ് കാണുന്നത്.

താൽപ്പര്യമുണ്ടെങ്കിൽ, Canvas drawing loop, Web Audio oscillators-ന് പിന്നിലെ ലോജിക്, കോഡിൽ കള്ളം പറയുന്ന മെക്കാനിക് എങ്ങനെയാണ് ഘടനപ്പെടുത്തിയത് എന്നിവ ഉൾക്കൊള്ളുന്ന ഒരു വിശദമായ ഗൈഡ് എഴുതാൻ അവർ തയ്യാറാണ്. ഒരു HTML ഫയലിനുള്ളിൽ ഒരു പൂർണ്ണ ഗെയിം കാണുന്നത് വളരെ അപൂർവ്വമായതിനാൽ, ട്യൂട്ടോറിയലുകളിൽ മാത്രം കുടുങ്ങിക്കിടക്കുന്നവർക്ക് ആ ഗൈഡ് വളരെയധികം ഉപകാരപ്പെടും.

യഥാർത്ഥ പാഠം

ഒരു ഗെയിം നിർമ്മിക്കാൻ നിങ്ങൾക്ക് ഒരു ഗെയിം എഞ്ചിൻ ആവശ്യമില്ല. അസറ്റുകൾക്കായി ഒരു content delivery network-ഓ, ഇരുപത് പേജുള്ള ഒരു ഡിസൈൻ ഡോക്യുമെന്റോ, അല്ലെങ്കിൽ ഒരു framework maintainer-ന്റെ അനുവാദമോ നിങ്ങൾക്ക് ആവശ്യമില്ല. നിങ്ങൾക്ക് ഒരു പരിധിയും (boundary) — ഇവിടെ, 28KB-യും ഒരു സിംഗിൾ ഫയലും — അത് പൂർത്തിയാക്കാനുള്ള ഒരു കാരണവുമാണ് വേണ്ടത്. പരിമിതികൾ വ്യക്തത നൽകുന്നു. അടിത്തറയിലുള്ള മെക്കാനിക് ശക്തമാണെങ്കിൽ, ആയിരം imported sprites-നേക്കാൾ കൂടുതൽ ഓർമ്മയിൽ നിൽക്കുന്നത് വിറയ്ക്കുന്ന ഒരു ചുവന്ന വാക്കായിരിക്കും.

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.