ทุกคนต่างก็มีโฟลเดอร์แบบนั้น โฟลเดอร์ที่เต็มไปด้วยบทเรียนที่ทำค้างไว้ โปรเจกต์เสริมที่ถูกทิ้งร้าง และไฟล์ README ที่สัญญาเกินจริง มันคือสุสานของความตั้งใจดี และทางออกเดียวคือการปล่อย (ship) อะไรบางอย่าง — อะไรก็ได้ — ที่ใช้งานได้จริง
ความกระหายที่จะทำให้เสร็จนี่แหละคือแรงผลักดันในการสร้าง LIAR เกมบนเบราว์เซอร์ที่เล็กและโหดร้ายเสียจนบรรจุอยู่ในไฟล์ HTML ขนาดเพียง 28KB เท่านั้น ไม่มีการใช้ framework ไม่มีการใช้ไฟล์รูปภาพ ไม่มีการใช้ไฟล์เสียง มีเพียง HTML5 Canvas เพียวๆ, Web Audio API และความแสบสัน
บทเรียนที่สวนทาง (The Anti-Tutorial)
โปรเจกต์เพื่อการเรียนรู้ส่วนใหญ่มักจะตายเพราะมัน "งอกขา" ออกมา คุณเริ่มจากบทเรียนเรื่อง canvas เพิ่มสคริปต์การเคลื่อนที่ จากนั้นก็ตัดสินใจว่าต้องมีตัวแก้ไขไทล์ (tile editor) ต่อด้วยระบบ entity component system แล้วก็ตามด้วยการตั้งค่า Webpack ที่ใช้เวลาคอมไพล์ถึงสิบเอ็ดวินาที หกสัปดาห์ผ่านไป คุณมี build pipeline แต่กลับไม่มีเกม
LIAR ปฏิเสธกับดักนั้น มันคือเกมแนวปฏิกิริยาตอบสนอง (reaction game) ปุ่มจะบอกให้คุณ TAP (แตะ), HOLD (กดค้าง) หรือ DON'T (อย่า) คุณต้องลงมือทำก่อนที่เวลาจะหมดลง รอบแรกๆ จะเป็นการสร้างความเชื่อใจ ข้อความบอกให้ TAP คุณก็แตะ ข้อความบอกให้ HOLD คุณก็กดนิ้วค้างไว้ มันเรียบง่าย มีจังหวะ และเกือบจะเหมือนการทำสมาธิ
จนกระทั่งรอบที่หกมาถึง
กลไกแห่งการทรยศ (The Mechanics of Betrayal)
เมื่อถึงประมาณรอบที่หก เกมจะเริ่มโกหก คำสั่งจะกะพริบบนหน้าจอ — อาจจะเป็นคำว่า TAP สีแดงที่สั่นไหวอย่างรุนแรง — และทุกปฏิกิริยาตอบสนองที่คุณสร้างขึ้นในช่วงวอร์มอัพจะตะโกนบอกให้คุณกดปุ่ม ถ้าคุณทำตาม คุณจะแพ้ การสั่นสีแดงนั้นไม่ใช่บั๊ก แต่มันคือ "สัญญาณบอกเหตุ" (tell) คนโกหกที่ซื่อสัตย์จะให้คำใบ้แก่คุณ และเกมนี้ก็ให้สิ่งนั้นแก่คุณพอดี: ไวยากรณ์ทางภาพของการหลอกลวง
กลเม็ดนี้ได้ผลเพราะรากฐานนั้นซื่อสัตย์ รอบแรกๆ สอนให้คุณรู้ว่าสีและการเคลื่อนไหวมีความหมาย เมื่อจานสีเปลี่ยนไปอย่างกะทันหันและข้อความเริ่มสั่น เกมไม่ได้โกง แต่มันกำลังส่งสัญญาณ คุณได้รับข้อมูลแล้ว คุณจะอ่านมันออกหรือไม่ก็ขึ้นอยู่กับตัวคุณเอง
เมื่อคุณพลาด เกมจะด่าคุณ ความรู้สึกเจ็บจี๊ดนั้นเป็นความตั้งใจ ในมินิเกมที่ไม่มีตารางคะแนน (leaderboard) และไม่มีความคืบหน้าที่คงอยู่ ความอัปยศคือสกุลเงินที่ทำให้เกิดการเล่นซ้ำ มันช่วยปิดลูปของการตอบสนอง (feedback loop) คุณไม่ได้แพ้เพราะอาการแล็กหรือเพราะ hitbox มันเพี้ยน แต่คุณแพ้เพราะคุณเชื่อคำสั่งสีแดงที่สั่นไหวนั้น และเกมก็ทำให้แน่ใจว่าคุณจะจดจำความผิดพลาดนั้นไว้
ความหมายที่แท้จริงของ 28KB
การเลือกสร้างเกมภายในไฟล์ HTML ขนาด 28KB เพียงไฟล์เดียวไม่ใช่แค่เรื่องแปลกใหม่ แต่มันคือข้อจำกัดในการออกแบบที่บังคับให้ต้องตัดสินใจอย่างเด็ดขาด ไม่มีไฟล์ sprite sheet ขนาดหลายเมกะไบต์ให้หลบซ่อน ไม่มีไฟล์เสียงให้เรียกใช้ ทุกอย่างที่มองเห็นถูกวาดขึ้นแบบเฟรมต่อเฟรมบน HTML5 Canvas ทุกอย่างที่ได้ยินมาจาก Web Audio oscillators
หากคุณไม่เคยทำงานกับ Web Audio API โดยตรง นี่คือสิ่งที่คุณต้องเจอ แทนที่จะโหลดไฟล์ WAV หรือ MP3 ที่บันทึกไว้ล่วงหน้า โค้ดจะสร้าง AudioContext ขึ้นมา เชื่อมต่อกับ oscillator node เลือก waveform — sine, square, sawtooth — และตั้งค่าความถี่ เสียงบี๊บสั้นๆ สำหรับการตอบสนองที่ถูกต้อง และเสียงบัซที่บาดหูสำหรับการทำพลาด เสียงเหล่านั้นถูกคำนวณแบบเรียลไทม์โดยเบราว์เซอร์ มันไม่กินพื้นที่ไฟล์และไม่มีการเรียกใช้เครือข่ายภายนอกเลย
ตรรกะเดียวกันนี้ยังใช้กับงานภาพด้วย Canvas มอบพื้นผิวการวาดแบบ immediate-mode ให้คุณ คุณล้างสี่เหลี่ยม (clear the rectangle) คุณเติมข้อความ คุณตั้งค่า transform หรือ shadow blur สำหรับเอฟเฟกต์การสั่น ไม่มีการทำ virtual DOM diffing, ไม่มีการทำ React reconciliation, ไม่มี dependency array ให้ต้องดีบั๊ก เบราว์เซอร์รันโค้ด แล้วพิกเซลก็ปรากฏขึ้น สำหรับเกมที่เน้นความชัดเจนขนาดนี้ ความตรงไปตรงมานั้นคือฟีเจอร์ ไม่ใช่ข้อจำกัด
การรักษาขนาด payload ไว้ที่ 28KB ยังหมายความว่าเกมจะโหลดขึ้นมาเกือบจะทันทีบนเบราว์เซอร์มือถือ แม้จะอยู่ในจุดที่สัญญาณไม่เสถียรก็ตาม แทบไม่มีค่าใช้จ่ายในการโฮสต์ แอปพลิเคชันทั้งหมดมีขนาดเล็กกว่า favicon ของเว็บไซต์ส่วนใหญ่เสียอีก ซึ่งเป็นเรื่องสำคัญหากคุณต้องการแจกจ่ายผ่านลิงก์ที่แชร์กันหรือฝังไว้ในฟอรัม มันไม่มีความยุ่งยากในการติดตั้ง เพียงแค่เข้า URL คำลวงก็พร้อมใช้งานแล้ว
การหลอกลวงที่ยุติธรรม (Fair Deception)
การใช้เวลาไปกับกลไกการโกหกเผยให้เห็นความจริงที่ละเอียดอ่อนเกี่ยวกับการออกแบบเกม ความไม่ยุติธรรมจะสนุกก็ต่อเมื่อมันสามารถอ่านออกได้ กับดักแบบสุ่มที่ฆ่าผู้เล่นโดยไม่มีการเตือนคือการออกแบบที่แย่ แต่กับดักที่สั่นไหว เปลี่ยนสี และทำลายจังหวะทางภาพที่สร้างขึ้นมา คือปริศนาที่ปลอมตัวมาในรูปแบบของการซุ่มโจมตี
ข้อความสีแดงที่สั่นไหวนั้นทำหน้าที่หลายอย่าง มันเข้าแทนที่การตอบสนองตามความเคยชินที่ผู้เล่นพัฒนาขึ้นในรอบที่หนึ่งถึงห้า มันสร้างจังหวะทางอารมณ์ — ความสงสัย, ความลังเล, ความตื่นตระหนก — ในสิ่งที่เคยเป็นเพียงการทดสอบปฏิกิริยาตอบสนอง และที่สำคัญที่สุด มันทำให้ความพ่ายแพ้เป็นความรับผิดชอบของคุณเอง เมื่อคุณกดคำสั่งสีแดงนั้นแล้วคำด่าปรากฏขึ้น คุณจะรู้ว่าความผิดนั้นเป็นของคุณ เกมได้ให้สัญญาณบอกเหตุแก่คุณแล้ว แต่คุณเองที่อ่านมันไม่ออก
นี่คือความแตกต่างระหว่างการลอบโจมตีที่ขี้โกงกับการต่อสู้ที่ยุติธรรม LIAR ต้องการจะต่อยหน้าคุณ แต่ตัวเกมจะทุ่มน้ำหนักลงไปในการเหวี่ยงหมัดก่อน
เน้นปล่อยของ มากกว่าการขัดเกลา
ตัวเกมยังมีความหยาบอยู่ ซึ่งผู้พัฒนาเองก็ยอมรับเรื่องนี้ มันเป็นเกมแรกที่เขาทำจนเสร็จ และความเรียบง่ายคือสิ่งที่ต้องแลกเพื่อให้งานเสร็จสมบูรณ์ ความซื่อสัตย์เช่นนี้เป็นเรื่องที่น่าประทับใจในระบบนิเวศที่เหล่านักพัฒนามักจะเขียนบล็อกเกี่ยวกับระบบต่างๆ ที่ไม่เคยถูกนำมาใช้งานจริงเลย LIAR มี URL ให้เข้าเล่นได้จริง คุณสามารถเล่นได้ทันที และสามารถดูซอร์สโค้ดได้ในไฟล์เดียวโดยไม่ต้องไปไล่แกะ monorepo ให้วุ่นวาย
ผู้พัฒนาต้องการทราบสองสิ่งจากใครก็ตามที่กล้าพอจะลองเล่น อย่างแรกคือ คุณรอดชีวิตได้นานแค่ไหน? อย่างที่สองคือ เมื่อคำโกหกแรกปรากฏขึ้นในรอบที่หก มันรู้สึกยุติธรรม หรือรู้สึกว่าขี้โกง? นั่นคือคำถามที่ถูกต้อง เพราะเขาไม่ได้มองว่าการโกหกเป็นบั๊ก แต่มองว่าเป็นกลไก (mechanic) ที่ต้องได้รับการปรับจูน
หากมีผู้สนใจ เขาได้เสนอที่จะเขียนคู่มือเชิงลึกที่ครอบคลุมทั้งเรื่อง Canvas drawing loop, ตรรกะเบื้องหลัง Web Audio oscillators และโครงสร้างของกลไกการโกหกในโค้ดอย่างละเอียด เมื่อพิจารณาว่าการเห็นเกมเต็มๆ ภายในไฟล์ HTML เพียงไฟล์เดียวนั้นหาได้ยากเพียงใด คู่มือนี้จะเป็นประโยชน์อย่างยิ่งสำหรับใครก็ตามที่กำลังติดอยู่ในสภาวะติดหล่มบทเรียน (tutorial purgatory)
บทเรียนที่แท้จริง
คุณไม่จำเป็นต้องมี game engine เพื่อสร้างเกม คุณไม่จำเป็นต้องมี content delivery network สำหรับ assets หรือต้องมีเอกสารการออกแบบยาวเหยียดยี่สิบหน้า หรือต้องรอการอนุญาตจากผู้ดูแล framework สิ่งที่คุณต้องการคือขอบเขต — ในที่นี้คือ 28KB และไฟล์เพียงไฟล์เดียว — และเหตุผลที่จะทำให้งานเสร็จสิ้น ข้อจำกัดจะช่วยสร้างความชัดเจน คำสีแดงที่สั่นไหวสามารถสร้างความจดจำได้มากกว่าสไปรต์ (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.