ప్రతి ఒక్కరి దగ్గర కూడా అలాంటి ఒక ఫోల్డర్ ఉంటుంది. సగం పూర్తయిన ట్యుటోరియల్స్, వదిలేసిన సైడ్ ప్రాజెక్టులు, మరియు వాస్తవానికి ఏమీ చేయలేకపోయినా గొప్పగా వాగ్దానం చేసే README ఫైళ్లతో నిండిన ఫోల్డర్ అది. అది మంచి ఉద్దేశాల సమాధి, దాని నుండి బయటపడటానికి ఉన్న ఏకైక మార్గం — ఏదైనా ఒకటి, అది నిజంగా పనిచేసేలా విడుదల చేయడం (ship చేయడం).
ఆ పనిని పూర్తి చేయాలనే తపన వల్లే LIAR సృష్టించబడింది. ఇది ఒక బ్రౌజర్ గేమ్, ఇది ఎంత చిన్నదంటే మరియు ఎంత కఠినంగా ఉంటుందంటే, కేవలం ఒకే ఒక 28KB HTML ఫైల్లో ఇమిడిపోతుంది. ఎటువంటి ఫ్రేమ్వర్క్లు లేవు. ఇమేజ్ ఫైల్స్ లేవు. సౌండ్ అసెట్స్ లేవు. కేవలం స్వచ్ఛమైన HTML5 Canvas, Web Audio API మరియు ఒక కఠినమైన స్వభావం మాత్రమే ఉన్నాయి.
ది యాంటీ-ట్యుటోరియల్
చాలా లెర్నింగ్ ప్రాజెక్టులు అవి అనవసరంగా పెరిగిపోవడం వల్ల ఆగిపోతాయి. మీరు ఒక canvas tutorialతో మొదలుపెడతారు, ఒక movement script జోడిస్తారు, తర్వాత మీకు ఒక tile editor కావాలని నిర్ణయించుకుంటారు, ఆపై ఒక entity component system, ఆపై పదకొండు సెకన్ల పాటు కంపైల్ అయ్యే Webpack config. ఆరు వారాల తర్వాత మీ దగ్గర ఒక build pipeline ఉంటుంది కానీ గేమ్ ఉండదు.
LIAR ఆ ఉచ్చులో పడదు. ఇది ఒక రియాక్షన్ గేమ్. ఒక బటన్ మిమ్మల్ని TAP, HOLD, లేదా DON'T చేయమని చెబుతుంది. టైమర్ ముగియకముందే మీరు స్పందించాలి. ప్రారంభ రౌండ్లు నమ్మకాన్ని ఏర్పరుస్తాయి. టెక్స్ట్ TAP అని ఉంటే, మీరు ట్యాప్ చేస్తారు. టెక్స్ట్ HOLD అని ఉంటే, మీరు మీ వేలిని నొక్కి ఉంచుతారు. ఇది సరళంగా, లయబద్ధంగా మరియు ధ్యానం లాగా ఉంటుంది.
ఆ తర్వాత ఆరో రౌండ్ వస్తుంది.
ది మెకానిక్స్ ఆఫ్ బెట్రయల్
ఆరో రౌండ్ ప్రాంతంలో, గేమ్ అబద్ధాలు చెప్పడం ప్రారంభిస్తుంది. స్క్రీన్పై ఒక కమాండ్ మెరుస్తుంది — బహుశా ఒక హింసాత్మకమైన, ఎరుపు రంగులో, వణుకుతున్న TAP — మరియు వార్మ్-అప్ సమయంలో మీరు అలవాటు చేసుకున్న ప్రతి రిఫ్లెక్స్ బటన్ను నొక్కమని మిమ్మల్ని అరుస్తుంది. ఒకవేళ మీరు నొక్కితే, మీరు ఓడిపోతారు. ఆ ఎరుపు రంగు వణుకు అనేది ఏదో లోపం (glitch) కాదు. అది ఒక సంకేతం (tell). ఒక నిజాయితీ గల అబద్ధం మీకు ఒక క్లూ ఇస్తుంది, ఈ గేమ్ కూడా మీకు సరిగ్గా అదే ఇస్తుంది: మోసానికి సంబంధించిన ఒక విజువల్ గ్రామర్.
ఈ ట్రిక్ పని చేయడానికి కారణం దాని పునాది నిజాయితీగా ఉండటమే. రంగు మరియు కదలికలు అర్థాన్ని కలిగి ఉంటాయని ప్రారంభ రౌండ్లు మీకు నేర్పిస్తాయి. కలర్ ప్యాలెట్ అకస్మాత్తుగా మారినప్పుడు మరియు టెక్స్ట్ వణుకుతున్నప్పుడు, గేమ్ మోసం చేయడం లేదు. అది సంకేతాన్ని ఇస్తోంది. సమాచారం మీ దగ్గర ఉంది. మీరు దానిని చదివారో లేదో మీ ఇష్టం.
మీరు విఫలమైనప్పుడు, గేమ్ మిమ్మల్ని అవమానిస్తుంది. ఆ బాధ ఉద్దేశపూర్వకమైనది. లీడర్బోర్డ్ మరియు నిరంతర పురోగతి లేని ఒక మైక్రో-గేమ్లో, అవమానమే మళ్ళీ మళ్ళీ ఆడేలా చేసే శక్తి (replayability). ఇది ఫీడ్బ్యాక్ లూప్ను పూర్తి చేస్తుంది. లాగ్ వల్లనో లేదా హిట్ బాక్స్ సరిగ్గా లేకపోవడం వల్లనో మీరు ఓడిపోరు. వణుకుతున్న ఎరుపు రంగు పదాన్ని మీరు నమ్మడం వల్ల మీరు ఓడిపోతారు, మరియు ఆ తప్పును మీరు గుర్తుంచుకునేలా గేమ్ చేస్తుంది.
28KB అంటే నిజానికి ఏమిటి
ఒకే 28KB HTML ఫైల్లో నిర్మించాలని నిర్ణయించుకోవడం కేవలం ఒక కొత్తదనం మాత్రమే కాదు. ఇది కఠినమైన నిర్ణయాలు తీసుకోవాలని ఒత్తిడి చేసే ఒక డిజైన్ కన్స్ట్రైంట్ (design constraint). దాక్కోవడానికి మెగాబైట్ల కొద్దీ స్ప్రైట్ షీట్లు లేవు. ట్రిగ్గర్ చేయడానికి ఆడియో ఫైల్స్ లేవు. కనిపించే ప్రతిదీ HTML5 Canvas పై ఫ్రేమ్-బై-ఫ్రేమ్ గీయబడుతుంది. వినిపించే ప్రతిదీ Web Audio ఆసిలేటర్ల నుండి వస్తుంది.
మీరు నేరుగా Web Audio APIతో పనిచేయకపోతే, అది ఏమిటో ఇక్కడ ఉంది. ముందే రికార్డ్ చేసిన WAV లేదా MP3ని లోడ్ చేయడానికి బదులుగా, కోడ్ ఒక AudioContextను సృష్టిస్తుంది, ఒక ఆసిలేటర్ నోడ్ను జత చేస్తుంది, ఒక వేవ్ఫామ్ — sine, square, sawtooth —ను ఎంచుకుంటుంది మరియు ఫ్రీక్వెన్సీని సెట్ చేస్తుంది. సరైన ఇన్పుట్ కోసం ఒక చిన్న బీప్, వైఫల్యం కోసం ఒక కఠినమైన బజ్. ఆ టోన్లు బ్రౌజర్ ద్వారా రియల్ టైమ్లో లెక్కించబడతాయి. వాటికి ఫైల్ సైజులో ఖర్చు ఉండదు మరియు ఎటువంటి బాహ్య నెట్వర్క్ రిక్వెస్ట్లు అవసరం లేదు.
ఇదే లాజిక్ విజువల్స్కు కూడా వర్తిస్తుంది. Canvas మీకు ఇమ్మీడియట్-మోడ్ డ్రాయింగ్ సర్ఫేస్ను ఇస్తుంది. మీరు రెక్టాంగిల్ను క్లియర్ చేస్తారు. టెక్స్ట్ను నింపుతారు. వణుకు ఎఫెక్ట్ కోసం ట్రాన్స్ఫార్మ్ లేదా షాడో బ్లర్ను సెట్ చేస్తారు. అక్కడ వర్చువల్ DOM డిఫింగ్ లేదు, React రీకన్సిలియేషన్ లేదు, డీబగ్ చేయడానికి డిపెండెన్సీ అర్రే లేదు. బ్రౌజర్ కోడ్ను రన్ చేస్తుంది, మరియు పిక్సెల్స్ కనిపిస్తాయి. ఇంత ఫోకస్డ్ గేమ్కు, ఆ ప్రత్యక్షత అనేది ఒక ఫీచర్, పరిమితి కాదు.
పేలోడ్ను 28KB వద్ద ఉంచడం అంటే గేమ్ మొబైల్ బ్రౌజర్లో కూడా దాదాపు తక్షణమే లోడ్ అవుతుంది, నెట్వర్క్ కనెక్షన్ సరిగ్గా లేకపోయినా కూడా. దీనిని హోస్ట్ చేయడానికి దాదాపు ఏమీ ఖర్చు అవ్వదు. మొత్తం అప్లికేషన్ చాలా వెబ్సైట్ ఫావికాన్ల కంటే చిన్నదిగా ఉంటుంది. మీరు ఒక షేర్డ్ లింక్ ద్వారా పంపిస్తున్నా లేదా ఒక ఫోరమ్లో ఎంబెడ్ చేస్తున్నా ఇది చాలా ముఖ్యం. ఇన్స్టాల్ చేసే ఇబ్బంది ఏమీ ఉండదు. మీరు URLని సందర్శించగానే, ఆ అబద్ధం సిద్ధంగా ఉంటుంది.
ఫెయిర్ డిసెప్షన్
అబద్ధం చెప్పే మెకానిక్ కోసం సమయం వెచ్చించడం గేమ్ డిజైన్ గురించి ఒక సూక్ష్మమైన సత్యాన్ని వెల్లడిస్తుంది. అన్యాయం అనేది అది అర్థమయ్యేలా ఉన్నప్పుడు మాత్రమే సరదాగా ఉంటుంది. హెచ్చరిక లేకుండా ప్లేయర్ను చంపే రాండమ్ ట్రాప్ అనేది చెడ్డ డిజైన్. వణుకుతూ, రంగు మారుతూ, స్థాపించబడిన విజువల్ రిథమ్ను బ్రేక్ చేసే ట్రాప్ అనేది ఒక అంబుష్ (ambush) రూపంలో ఉన్న పజిల్.
ఎరుపు రంగులో వణుకుతున్న టెక్స్ట్ బహుళ ప్రయోజనాలను కలిగి ఉంటుంది. ఇది మొదటి నుండి ఐదవ రౌండ్ల వరకు ప్లేయర్లు అభివృద్ధి చేసుకున్న అలవాటుగా మారిన ప్రతిస్పందనను అధిగమిస్తుంది. ఇది అంతకుముందు కేవలం రిఫ్లెక్స్ టెస్ట్గా ఉన్న దానిలో అనుమానం, సంశయం, ఆందోళన వంటి భావోద్వేగాలను ప్రవేశపెడుతుంది. మరియు అన్నిటికంటే ముఖ్యంగా, ఇది వైఫల్యం మీదే అని అనిపింపజేస్తుంది. మీరు ఆ ఎరుపు రంగు కమాండ్ను ట్యాప్ చేసినప్పుడు మరియు అవమానం కనిపించినప్పుడు, తప్పు మీదేనని మీకు తెలుస్తుంది. గేమ్ మీకు ఒక సంకేతాన్ని ఇచ్చింది. మీరు దానిని చదవడంలో విఫలమయ్యారు.
ఇది ఒక అన్యాయమైన దాడికి మరియు ఒక నిష్పక్షపాత పోరాటానికి మధ్య ఉన్న తేడా. LIAR మిమ్మల్ని ముఖంపై కొట్టాలని అనుకుంటుంది, కానీ అది ముందుగా తన బరువును ఆ దెబ్బ వెనుక పెడుతుంది.
మెరుగుపరచడం కంటే పూర్తి చేయడం ముఖ్యం
ఈ గేమ్ ఇంకా పాలిష్ చేయబడలేదు. రచయిత స్వయంగా మీకు అది చెబుతారు. ఇది వారి మొదటి పూర్తి చేసిన గేమ్, మరియు దానిని పూర్తి చేయడం కోసం వారు సరళతను ఎంచుకున్నారు. డెవలపర్లు తరచుగా ఎప్పటికీ ప్రొడక్షన్లోకి రాని సిస్టమ్స్ గురించి బ్లాగులు రాసే ఈ వ్యవస్థలో, ఆ నిజాయితీ చాలా కొత్తగా అనిపిస్తుంది. LIAR ఒక లైవ్ URLలో అందుబాటులో ఉంది. మీరు దానిని ఇప్పుడే ఆడవచ్చు. ఒక monorepo ని విడదీయాల్సిన అవసరం లేకుండా, మీరు ఒకే ఫైల్లో దాని సోర్స్ కోడ్ను చూడవచ్చు.
దీనిని ప్రయత్నించే ధైర్యం ఉన్న ఎవరి నుండైనా డెవలపర్ రెండు విషయాలను తెలుసుకోవాలని అనుకుంటున్నారు. మొదటిది, మీరు ఎంతసేపు బ్రతుకుతారు? రెండవది, ఆరో రౌండ్లో మొదటి అబద్ధం ఎదురైనప్పుడు, అది నిష్పక్షపాతంగా అనిపిస్తుందా లేక అన్యాయంగా అనిపిస్తుందా? అడగాల్సిన ప్రశ్నలు ఇవే. వారు ఆ అబద్ధాన్ని ఒక బగ్ (bug) లాగా కాకుండా, సర్దుబాటు చేయాల్సిన ఒక మెకానిక్ (mechanic) లాగా పరిగణిస్తారు.
ఒకవేళ ఆసక్తి ఉంటే, Canvas drawing loop, Web Audio oscillators వెనుక ఉన్న లాజిక్ మరియు కోడ్లో ఆ అబద్ధం చెప్పే మెకానిక్ (lying mechanic) ఎలా నిర్మించబడిందో వివరిస్తూ ఒక లోతైన గైడ్ను రాయడానికి వారు సిద్ధంగా ఉన్నారు. ఒకే HTML ఫైల్లో పూర్తి గేమ్ను చూడటం చాలా అరుదు కాబట్టి, ట్యుటోరియల్ పర్గేటరీలో (tutorial purgatory) చిక్కుకున్న ఎవరికైనా ఆ గైడ్ నిజంగా ఉపయోగకరంగా ఉంటుంది.
అసలైన సారాంశం
గేమ్ను నిర్మించడానికి మీకు గేమ్ ఇంజిన్ అవసరం లేదు. అసెట్స్ (assets) కోసం content delivery network, లేదా ఇరవై పేజీల డిజైన్ డాక్యుమెంట్, లేదా ఫ్రేమ్వర్క్ మెయింటైనర్ (framework maintainer) నుండి అనుమతి అవసరం లేదు. మీకు ఒక పరిమితి కావాలి — ఇక్కడ అది 28KB మరియు ఒకే ఫైల్ — మరియు దానిని పూర్తి చేయడానికి ఒక కారణం కావాలి. పరిమితులు స్పష్టతను ఇస్తాయి. దాని వెనుక ఉన్న మెకానిక్ బలంగా ఉన్నప్పుడు, వేలకొద్దీ ఇంపోర్ట్ చేసిన స్ప్రైట్స్ (imported sprites) కంటే వణుకుతున్న ఒక ఎర్రటి పదం ఎక్కువ గుర్తుండిపోతుంది.
LIARని మీరే స్వయంగా ఇక్కడ ఆడండి: https://playliar.netlify.app/.
డెవలపర్ అందించిన అసలు వివరణ మరియు సోర్స్ సందర్భాన్ని ఇక్కడ చదవవచ్చు: 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.