home/writing/chapter-4-personal-game-dev-5
Chapter 4 Personal Game Dev

GPTClaudeGemini··▲ 102 copies·updated 2026-07-14
chapter-4-personal-game-dev-5.prompt
---
title: "ส่วนที่ 23 · บทที่ 4 เกมพัซเซิลที่สร้างคนเดียว — บันทึกภาคปฏิบัติ Critter Sort"
part: 23
chapter_in_part: 4
status: v3
written: 2026-05-24
version: v3
author: 이민수
ip_check: done
---

# ส่วนที่ 23 · บทที่ 4 เกมพัซเซิลที่สร้างคนเดียว — บันทึกภาคปฏิบัติ Critter Sort

บ่ายวันเสาร์ ภรรยาของผมกำลังเล่นเกมพัซเซิลจับคู่สีบนมือถือ เป็นเกมชื่อ *Yarn Fever* ที่ต้องคัดแยกไหมพันกันยุ่งใส่ตะกร้าสีเดียวกัน พอจบหนึ่งด่านเธอก็พูดว่า "ก็เหมือนเดิมอีกแล้ว" แล้วปิดเกม เมื่อไม่มีอะไรอัปเดต ความเบื่อจึงมาเร็ว

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

ปัญหาคือผมไม่ใช่กราฟิกเอนจิเนียร์ ผมเป็นนักออกแบบเกม (Game Designer) ที่มีประสบการณ์ 24 ปี แต่ไม่เคยเขียนเชดเดอร์ด้วย Three.js มาก่อน ดังนั้นบทนี้จึงเป็นบันทึกจริงของการ "ทำเกมหนึ่งเกมให้รันได้ภายในไม่กี่วันโดยลำพังร่วมกับ AI" เป็นบันทึกที่ใช้เครื่องมือชุดเดียวกับงาน MMORPG ของบริษัท (ต่อจากนี้เรียกว่าโปรเจกต์ A) แต่ก็เป็นบันทึกของการแบ่งแยกที่ไม่ปนเนื้อหาเชิงโดเมนเข้ามาแม้แต่บรรทัดเดียว

เกมจริงอยู่ใน repository `critter-sort/` และมี git tag v0.1\~v0.3 ที่เก็บบันทึกการตัดสินใจตลอดสามวันไว้ ผมจะอ้างอิงจาก repository นั้นตามจริง ไม่ใช่กรณีที่ปรุงแต่งขึ้น

---

## 23.4.1 ทำวิศวกรรมย้อนกลับด้วยพรอมต์ — แล้วก็สูญเสียลายเซ็นไป

สิ่งแรกที่ทำคือถอดเกมต้นฉบับออกมาเป็นคำพูดแล้วโยนให้ AI พรอมต์แรกเป็นแบบนี้

> **พรอมต์ (เริ่ม v0.1):**
> "ผมอยากดัดแปลงลูปหลักของเกมพัซเซิลแคชชวลชื่อ Yarn Fever ให้เป็นธีมสัตว์ แล้วสร้างด้วย Three.js + Vite ลูปเป็นแบบนี้ คัดแยกก้อนสีที่พันกันใส่ถังสีเดียวกัน ถ้าเกินช่องชั่วคราวก็เกมโอเวอร์ ใช้สัตว์เป็นเป้าหมายในการคัดแยก โดยให้แตะที่กองสัตว์ที่พันกันยุ่งแล้วมันถูกส่งไปยังรัง (nest) สีเดียวกัน เขียนลอจิกเป็น state machine ของ JS ล้วน ๆ ที่ไม่ขึ้นกับ Three.js เพื่อให้ทดสอบแบบ headless ได้ ใส่ด่านโพรซีเดอรัลที่ไม่มีที่สิ้นสุด (อิงซีด) มาด้วย"

AI ทำตามอย่างซื่อสัตย์ มันแยกโครงสร้างโฟลเดอร์เป็น `game/` (ลอจิกล้วน) กับ `render/` (Three.js) เขียน `state.js`·`rules.js`·`generator.js` ก่อน แล้วแสดงบอร์ดด้วย placeholder กล่องที่ลงสีไว้ ไม่ใช่กี่วันด้วยซ้ำ แค่เซสชันเดียว v0.1 ก็รันได้

แต่ในวินาทีที่ผมลองเล่นเองเพื่อจะให้ภรรยาดู ความรู้สึกขัด ๆ ก็มา มันกลายเป็นเกมจับคู่ทั่วไปที่สัตว์กระโดดจากด้านบนของจอลงไปในตะกร้า สัมผัสเฉพาะตัวของเกมต้นฉบับหายไป ตัวตนของ *Yarn Fever* ไม่ได้อยู่ที่ "การคัดแยก" แต่อยู่ที่ **สัมผัสของการใช้มือคลายไหมที่พันกันยุ่ง** และ **การหมุนจอไปเพื่อยืนยันสีที่ถูกบังไว้** ผมไปบีบสิ่งนั้นให้แบนเป็นการ sort ทั่วไปด้วยพรอมต์ที่ว่า "แตะสัตว์แล้วส่งไปรัง" และ AI ก็เพียงแค่ทำตามนิยามที่ผมให้อย่างซื่อสัตย์เท่านั้น

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

ตรงนี้ผมขอชี้ชัดอย่างหนึ่ง AI ไม่ได้ให้คำตอบที่ผิด พรอมต์ของผมต่างหากที่ผิด ฉะนั้นรอบถัดไปจึงไม่ใช่การแก้โค้ด แต่เป็น **การแก้ไขนิยาม**

---

## 23.4.2 กระดูกสันหลัง — รอบการแก้ไขที่ชุบชีวิตการหมุนและการคลายไหมกลับมา

ทันทีที่เห็น v0.1 ผมระบุแก่นใหม่อีกครั้งในสองรอบ การแก้ไขรอบแรกเล็งไปที่การกระทำ รอบที่สองเล็งไปที่สัมผัส

> **พรอมต์ (แก้ไขรอบที่ 1 — การกระทำ):**
> "อันนี้มันกลายเป็นแค่เกมจับคู่ไปแล้ว ตัวตนของ Yarn Fever คือ 'การหมุนจอ 3D ไปเพื่อยืนยันสีที่ถูกบัง แล้วกำหนดลำดับการคลาย' อย่าโปรยบอร์ดลงบนระนาบ แต่ให้กองสูงเป็นเนินตรงกลาง เพื่อให้ต้องหมุนถึงจะเห็นสีที่บังอยู่ด้านหลัง ใส่การหมุนด้วย OrbitControls แต่การหมุนกับการแตะมันชนกันนี่ — จะแยกยังไง"

> **ผลลัพธ์จาก Claude (ดิบ ไม่สรุปย่อ):**
> "ถูกต้องครับ ท่าทางหมุนกับการแตะใช้ pointer event เดียวกันจึงชนกัน ผมเสนอวิธีแยกด้วยเกณฑ์ระยะทางและเวลา บันทึกพิกัดและเวลาที่ `pointerdown` แล้วที่ `pointerup` ถ้าระยะการเคลื่อนเกิน 9px หรือเวลากดเกิน 400ms ให้ถือว่าเป็นท่าทางหมุนและละเว้นการแตะ เฉพาะที่ต่ำกว่านั้นเท่านั้นจึงใช้ raycaster หยิบสัตว์แล้วเรียก `state.tap()` ส่วน azimuth ของ OrbitControls ผมจะจำกัดไว้ราว ±54° เพื่อไม่ให้กองหลุดออกนอกจอ อย่างไรก็ตามบนมือถือ 9px อาจไวเกินไป จึงต้องตรวจสอบบนเครื่องจริง"

เกณฑ์ 9px/400ms นั้นยังคงอยู่ใน `src/main.js` จนถึงตอนนี้ เป็นโค้ดที่ไม่มีส่วนเกินและตรวจสอบได้โดยตรง
when to use it

Community prompt sourced from the open-source GitHub repo eremes81/game-design-ai-practice-th (NOASSERTION). A "Chapter 4 Personal Game Dev" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.