เตตริสที่สมบูรณ์แบบของฉัน

คลัง GitHub ของโปรเจกต์



นี่คืออะไร

เตตริส เป็นเกมระดับตำนานและเป็นเกมที่ฉันชอบมาก ฉันรักเกมนี้จริง ๆ และสนุกกับการเล่นมันมาก มันช่วยคลายความเครียดได้ดีมาก สำหรับโปรเจกต์สุดสัปดาห์ที่สนุก ๆ ฉันตัดสินใจสร้างเกมนี้เป็นเกม/แอปบนเบราว์เซอร์ที่ออกแบบมาสำหรับทั้งเดสก์ท็อปและมือถือ โดยใช้หลักการของ การเขียนโค้ดตามอารมณ์ ส่วนที่เป็นมือถือของเวอร์ชันนี้ได้รับแรงบันดาลใจจาก Play-Tetris ซึ่งมีการจัดการบนมือถือที่ดีมากด้วยการควบคุมแบบปัด ลองดูและเล่นการสร้างเตตริสของฉันได้ ที่นี่ มันคือเวอร์ชันของ เตตริส ที่ฉันคิดว่า “สมบูรณ์แบบ” ที่สุด



การเล่นเตตริสเวอร์ชันของฉัน ลองเล่นด้วยตัวคุณเองได้ที่นี่

นอกเหนือจากโค้ด

ฉันไม่ได้ตั้งใจสร้างเกมเลียนแบบเตตริสเพื่อใช้เป็นโปรเจกต์พอร์ตโฟลิโอหรือเพื่อเรียนรู้สิ่งใหม่ ฉันสร้างมันขึ้นมาเพราะฉันต้องการมันจริง ๆ เมื่อฉันเครียด ไม่ว่าจะเป็นสัปดาห์ที่หนักหน่วงจากงานหรือเพียงแค่ชีวิตที่ถาโถมเข้ามา เตตริสเป็นหนึ่งในไม่กี่สิ่งที่ดีต่อสุขภาพและช่วยให้ฉันตั้งหลักใหม่ได้จริง ๆ เมื่อฉันเครียด ฉันมักจะกินเยอะ ซึ่งเมื่อเวลาผ่านไปก็เพิ่มขึ้นเรื่อย ๆ ดังนั้นการมีบางสิ่งที่ใช้งานได้โดยไม่มีข้อเสียใด ๆ จึงมีความหมายกับฉันมาก เพียงแค่ใช้เวลา 10 ถึง 30 นาทีในการปล่อยบล็อกลงมา สมองของฉันก็รู้สึกเหมือนได้รับการทำความสะอาดไปเล็กน้อย สำหรับฉันมันไม่ใช่แค่การผ่อนคลายแบบสบาย ๆ แต่มันเป็นวิธีที่จะมีสิ่งเรียบง่ายและจดจ่อสำหรับระบายความเครียดลงไป นอกจากนี้ยังมีงานวิจัยที่น่าสนใจซึ่งแสดงให้เห็นว่าเตตริสอาจส่งผลต่อวิธีที่สมองจัดการกับความทรงจำที่รบกวนจิตใจและความเครียด ตัวอย่างเช่น ในการทดลองภาพยนตร์เกี่ยวกับบาดแผลทางใจ ในผู้ที่ได้รับการรักษาหลังประสบอุบัติเหตุจริง และ ในฐานะส่วนเสริมของการบำบัดที่ทำให้เกิดการเปลี่ยนแปลงในสมองซึ่งวัดได้ ฉันไม่ได้พยายามเปลี่ยนเกมนี้ให้เป็นการรักษาทางการแพทย์ แต่ก็น่าสนใจที่ได้เห็นว่าอาจมีวิทยาศาสตร์จริงรองรับสิ่งที่ฉันรู้สึกอยู่แล้ว นั่นคือเตตริสสามารถช่วยให้ผู้คนรับมือกับความเครียดได้จริง ๆ

ดังนั้นฉันจึงออกตามหาเตตริสเวอร์ชันดี ๆ เพื่อเล่น และปัญหาคือไม่มีอะไรที่ตรงกับวิธีที่ฉันอยากเล่นจริง ๆ แอปมือถือบน iOS App Store เต็มไปด้วยโฆษณาและการซื้อภายในแอป เวอร์ชันบนเว็บกระตุกหรือให้ความรู้สึกแย่มากเมื่อเล่นบนโทรศัพท์ เวอร์ชัน NES คลาสสิกนั้นยอดเยี่ยม แต่ต้องใช้โปรแกรมจำลองและฮาร์ดแวร์เพิ่มเติม ฉันถึงกับซื้อ Miyoo Mini โดยคิดว่ามันจะแก้ปัญหาได้ แต่สุดท้ายสิ่งเดียวที่ฉันทำคือพกอุปกรณ์เครื่องที่สองไปด้วยเพียงเพื่อเล่นเตตริส เมื่อถึงจุดหนึ่งฉันก็ตระหนักว่าฉันใช้เวลามองหาเวอร์ชันที่เหมาะสมมากกว่าที่จะใช้เวลาสร้างมันเองเสียอีก

ด้วยเบราว์เซอร์สมัยใหม่ เครื่องมือ LLM อย่าง Claude Code และเวิร์กโฟลว์อย่างการเขียนโค้ดตามอารมณ์ ในที่สุดก็รู้สึกว่านี่เป็นเวลาที่เหมาะสมที่จะสร้างเตตริสที่ฉันต้องการด้วยตัวเอง รวดเร็ว เรียบง่าย ไม่มีโฆษณา ไม่มีบัญชีผู้ใช้ ไม่มีแอปสโตร์ มีเพียงเกมบนเบราว์เซอร์ที่ใช้งานได้บนโทรศัพท์และแล็ปท็อปของฉัน และเป็นสิ่งที่ฉันควบคุมได้ทั้งหมด ในเวลาประมาณหนึ่งวันฉันก็มีเวอร์ชันที่ใช้งานได้ และหลังจากทำงานเป็นระยะ ๆ ประมาณหนึ่งสัปดาห์เพื่อทำให้มันมีความเสถียรและปรับความรู้สึกในการเล่นให้เหมาะสมทั้งบนเดสก์ท็อปและมือถือ ฉันก็พอใจกับมัน

ฉันแบ่งปันมันเพราะหากมันช่วยให้คนอื่นคลายเครียดได้แม้เพียงคนเดียวในแบบเดียวกับที่ช่วยฉัน นั่นจะทำให้ฉันมีความสุขมาก มันเป็นสิ่งเล็ก ๆ แต่บางครั้งสิ่งเล็ก ๆ ก็เป็นสิ่งที่คุณต้องการพอดี

ฟีเจอร์

  • กระดานเตตริสคลาสสิกขนาด 10x20
  • การควบคุมด้วยคีย์บอร์ดเต็มรูปแบบบนเดสก์ท็อป และการควบคุมด้วยท่าทางสัมผัสบนมือถือ
  • ระบบสุ่มชิ้นส่วนแบบถุงเจ็ดชิ้นมาตรฐาน
  • ตัวอย่างชิ้นส่วนที่ถืออยู่และชิ้นส่วนถัดไป
  • เงาชิ้นส่วนแสดงตำแหน่งที่ชิ้นส่วนจะตกลง
  • เส้นโค้งความเร็วตามเลเวลพร้อมระยะเวลาหน่วงการล็อกแบบไดนามิก
  • การติดตามคะแนน จำนวนแถว เลเวล และคะแนนสูงสุด โดยบันทึกไว้ในพื้นที่จัดเก็บภายในเครื่อง
  • การให้คะแนนสำหรับการดรอปแบบนุ่มนวลและการดรอปแบบรวดเร็ว
  • เมนูในเกมพร้อมตัวเลือกเล่นต่อ เริ่มใหม่ ออก ปิดเสียงเพลง/เอฟเฟกต์เสียง และลิงก์ไปยังซอร์สโค้ด
  • แอนิเมชันกะพริบเมื่อเคลียร์แถวพร้อมเอฟเฟกต์เสียง
  • รองรับพื้นที่ปลอดภัยของ iOS (Dynamic Island, รอยบาก, ตัวบ่งชี้หน้าหลัก)
  • รองรับการใช้งานออฟไลน์ผ่าน Service Worker (ใช้งานได้โดยไม่ต้องมีอินเทอร์เน็ตหลังจากเข้าชมครั้งแรก)
  • ติดตั้งเป็น PWA ได้ (เพิ่มลงหน้าจอหลักบน iOS/Android เพื่อประสบการณ์แบบแอป)

การควบคุม

เดสก์ท็อป (คีย์บอร์ด)

การกระทำ ปุ่ม
เคลื่อนที่ ← → หรือ A D
ดรอปแบบนุ่มนวล ↓ หรือ S
ดรอปแบบรวดเร็ว Space
หมุนตามเข็มนาฬิกา ↑ W X
หมุนทวนเข็มนาฬิกา Z
ถือ C หรือ LShift
เมนู Esc หรือ M
ซอร์สโค้ด G (หน้าจอชื่อเกม)

มือถือ (สัมผัส)

การกระทำ ท่าทาง
เคลื่อนที่ ปัดไปทางซ้าย / ขวา
ดรอปแบบนุ่มนวล กดค้างแล้วลากลง
ดรอปแบบรวดเร็ว สะบัดลงอย่างรวดเร็ว
หมุนตามเข็มนาฬิกา แตะ
ถือ สะบัดขึ้นอย่างรวดเร็ว

เส้นโค้งความยาก

เส้นโค้งความเร็วและระยะเวลาหน่วงการล็อกในเวอร์ชันนี้ได้รับการปรับแต่งโดยใช้การวิจัยเกี่ยวกับวิธีที่เกมเตตริสคลาสสิกและสมัยใหม่จัดการกับการเพิ่มระดับความยาก ใน NES Tetris ดั้งเดิม แรงโน้มถ่วงจะไปถึงหนึ่งแถวต่อเฟรมที่เลเวล 29 ซึ่งกลายเป็น “หน้าจอสังหาร” อันโด่งดัง ซึ่งเกมจะเล่นไม่ได้ในทางปฏิบัติสำหรับมนุษย์ส่วนใหญ่ นั่นไม่ใช่ตอนจบที่ถูกออกแบบไว้อย่างแท้จริง แต่เป็นผลข้างเคียงจากฮาร์ดแวร์และการที่ DAS (การเลื่อนอัตโนมัติแบบหน่วงเวลา) ช้าเกินกว่าจะตามความเร็วการตกได้ Willis Gibson พิสูจน์เรื่องนี้ในปี 2024 เมื่อเขา ผ่านจุดนั้นไปและทำให้เกมล่มที่เลเวล 157



การเล่น NES Tetris คลาสสิกปี 1989 (แหล่งที่มาดั้งเดิม)

เกมสมัยใหม่อย่าง TGM (Tetris: The Grand Master) แก้ปัญหานี้ด้วยวิธีที่แตกต่างออกไป แทนที่จะเพียงทำให้ชิ้นส่วนตกเร็วขึ้นเรื่อย ๆ จนเกมพัง TGM จำกัดแรงโน้มถ่วงไว้ที่ 20G (ตกลงทันที) แล้วจึงลดช่วงเวลาของระบบอื่น ๆ เช่น ระยะเวลาหน่วงการล็อกและ DAS เพื่อเพิ่มความยาก มาตรฐาน Tetris Guideline ใช้ระยะเวลาหน่วงการล็อก 500 มิลลิวินาที พร้อมการรีเซ็ตการเคลื่อนที่ได้สูงสุด 15 ครั้ง ซึ่งเป็นสิ่งที่เวอร์ชันนี้ทำตาม การวิจัยเกี่ยวกับ โหมด TGM2 Death และ TGM3 Shirase แสดงให้เห็นว่าขีดจำกัดในทางปฏิบัติสำหรับการเล่นแบบแข่งขันอยู่ที่ระยะเวลาหน่วงการล็อกประมาณ 250 มิลลิวินาทีพร้อม DAS ที่รวดเร็ว ขณะที่ค่าต่ำกว่า 133 มิลลิวินาทีถือเป็นระดับสำหรับผู้เชี่ยวชาญ

จากทั้งหมดนี้ เส้นโค้งความเร็วที่นี่จำกัดแรงโน้มถ่วงไว้ที่ 33 มิลลิวินาทีต่อแถว (คล้ายกับ NES เลเวล 19 ถึง 28) แทนที่จะไปสู่การตกทันที และ DAS จะปรับจาก 170 มิลลิวินาทีลงไปถึง 100 มิลลิวินาทีในเลเวลที่สูงขึ้น เพื่อให้คุณเคลื่อนที่ข้ามกระดานได้ระหว่างช่วงเวลาหน่วงการล็อก เป้าหมายคือทำให้เลเวลสูง ๆ รู้สึกเร็วอย่างโหดร้ายแต่ยังคงยุติธรรม ใกล้เคียงกับวิธีที่ Tetris 99 และ TGM จัดการกับความยากช่วงท้ายเกม มากกว่าวิธีดั้งเดิมของ NES ที่ปล่อยให้ความเร็วดิบแซงหน้าการกดปุ่มของคุณ

เบื้องหลังการทำงาน

  • การออกแบบแบบตอบสนองที่ปรับให้เหมาะกับทั้งเดสก์ท็อปและมือถือ (แนวตั้ง)
  • สไปรต์บล็อกและพื้นหลังตารางที่เรนเดอร์ล่วงหน้าเพื่อประสิทธิภาพ
  • ใช้ระบบหมุน Super Rotation System (SRS) ในรูปแบบการเตะกำแพงสำหรับการหมุนชิ้นส่วน
  • การตรวจจับท่าทางสัมผัสตามความเร็วเพื่อแยกความแตกต่างระหว่างการสะบัดและการลากได้อย่างน่าเชื่อถือ
  • ระบบจับเวลาตามเลเวลสำหรับความเร็วแรงโน้มถ่วงและระยะเวลาหน่วงการล็อก
  • คะแนนสูงสุดและการตั้งค่าเสียงถูกบันทึกไว้ด้วย localStorage
  • แหล่งที่มาของเพลงพื้นหลัง NmCCQxVBfyM
  • แหล่งที่มาของเอฟเฟกต์เสียงเมื่อเคลียร์แถว UMViM2tHrOk
  • โปรเจกต์นี้เป็นโอเพนซอร์สอย่างเต็มรูปแบบภายใต้ ใบอนุญาต MIT
  • สร้างด้วยเครื่องมือ AI ต่อไปนี้:
    • Claude Code CLI - การเขียนโค้ด/การพัฒนา
    • Gemini CLI - การเขียนโค้ด/การพัฒนา
    • Cha CLI - การเขียนโค้ดและการเขียน
    • xAI Grok - โลโก้และไอคอน
    • Perplexity - การค้นคว้าข้อบกพร่อง
    • Google Search - การค้นหา SVG และทรัพยากรอื่น ๆ
    • YouTube + yt-dlp - การจัดหาไฟล์เสียง
    • FFmpeg - การตัดต่อไฟล์เสียง

ความคิดส่งท้าย

นี่เป็นหนึ่งในโปรเจกต์เหล่านั้นที่แรงจูงใจไม่ได้มาจากเรื่องทางเทคนิค แต่มาจากเรื่องส่วนตัว ผมแค่อยากได้เกมเททริสเวอร์ชันหนึ่งที่ทำงานในแบบที่ผมต้องการ โดยไม่มีโฆษณา ไม่มีฮาร์ดแวร์เพิ่มเติม และไม่ต้องพึ่งพาแอปของคนอื่นที่อาจหายไปหรือเปลี่ยนแปลงเมื่อใดก็ได้ การที่ผมสามารถเปลี่ยนจากแนวคิดไปเป็นเกมที่ขัดเกลาเรียบร้อยได้ภายในเวลาประมาณหนึ่งสัปดาห์ของการลงมือทำเป็นช่วง ๆ โดยใช้เครื่องมือปัญญาประดิษฐ์สมัยใหม่และการเขียนโค้ดแบบไวบ์ บอกอะไรได้มากทีเดียวว่าในตอนนี้เราอยู่จุดไหนแล้วในด้านการพัฒนาซอฟต์แวร์

ผมใช้เวอร์ชันนี้แทบทุกวันนับตั้งแต่สร้างมันขึ้นมา และมันยังคงทำสิ่งที่ผมต้องการได้อย่างพอดี มันช่วยให้ผมถอยออกมาจากสิ่งที่กำลังทำให้เครียด จดจ่อกับบางสิ่งที่เรียบง่ายสักสองสามนาที แล้วกลับมาด้วยความคิดที่ปลอดโปร่งขึ้น หากคุณลองใช้แล้วมันช่วยคุณได้เช่นเดียวกัน นั่นคือผลลัพธ์ที่ดีที่สุดที่ผมจะขอได้ และหากคุณต้องการฟอร์กโปรเจกต์นี้ ปรับเส้นโค้งความเร็ว เปลี่ยนการควบคุม หรือสร้างสิ่งใดต่อยอดจากมัน ก็เชิญได้เลย หากคุณพบข้อบกพร่องหรือมีข้อเสนอแนะ โปรดเปิด issue ได้ที่ คลัง GitHub นั่นคือจุดประสงค์ทั้งหมดของการทำให้มันเป็นโอเพนซอร์ส