เกมกอล์ฟที่สร้างขึ้นเมื่อคืนนี้ด้วย Claude Code, Svelte และ ThreeJS

เมื่อคืนที่ผ่านมา เกมกอล์ฟ 3 มิติที่เล่นได้เต็มรูปแบบกลับมามีชีวิตอีกครั้งโดยใช้ Claude Code, Svelte และ ThreeJS ซึ่งสร้างขึ้นในเซสชั่นเดียวโดยไม่ต้องสัมผัสเอ็นจิ้นเกม โปรเจ็กต์นี้แสดงให้เห็นอย่างชัดเจนว่าการพัฒนาที่ได้รับความช่วยเหลือจาก AI สมัยใหม่กำลังทำลายช่องว่างระหว่างแนวคิดกับผลิตภัณฑ์ที่ใช้งานได้จริงอย่างไร และเหตุใดจึงมีเครื่องมืออย่าง Mewayz เพื่อช่วยให้ผู้สร้างที่มีความทะเยอทะยานจัดส่งได้เร็วขึ้น

เกมกอล์ฟจริง ๆ แล้วมีลักษณะเป็นอย่างไรเมื่อทำเสร็จแล้ว?

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

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

Claude Code รับมือกับการยกของหนักทางเทคนิคได้อย่างไร

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

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

Claude Code ยังจัดการงานการใช้งานที่น่าเบื่อกว่าซึ่งโดยปกติแล้วจะทำให้โปรเจ็กต์เดี่ยวช้าลงในการรวบรวมข้อมูล: การเขียนควอเทอร์เนียนคณิตศาสตร์สำหรับเวกเตอร์ผลกระทบแบบคลับถึงบอล จัดโครงสร้างไปป์ไลน์การโหลดสินทรัพย์ และตั้งค่าการกำหนดค่า Vite สำหรับโปรเจ็กต์ Svelte + ThreeJS ตั้งแต่เริ่มต้น โดยปกติแล้วโบราณคดี Stack Overflow จะใช้เวลาประมาณสองชั่วโมงใช้เวลาประมาณสิบสองนาที

เหตุใด Svelte และ ThreeJS จึงกลายเป็นคู่ที่สมบูรณ์แบบ?

การรวมกันของ Svelte และ ThreeJS นั้นไม่ค่อยถูกใช้ในชุมชนการพัฒนาเกมบนเว็บ และโปรเจ็กต์นี้พิสูจน์ให้เห็นว่าเหตุใดจึงสมควรได้รับความสนใจมากขึ้น ปฏิกิริยาตอบสนองตามเวลาคอมไพล์ของ Svelte หมายความว่าแทบจะไม่มีค่าใช้จ่ายใด ๆ ในการอัปเดตองค์ประกอบ UI ของเกม — แถบพลังงาน การแสดงความเร็วลม และตัวนับจังหวะ ทั้งหมดได้รับการอัปเดตที่ 60fps โดยไม่มีอาการสะดุดด้านประสิทธิภาพแม้แต่ครั้งเดียว

ThreeJS มอบทุกสิ่งที่จำเป็นสำหรับสภาพแวดล้อม 3 มิติที่น่าเชื่อโดยไม่มีค่าใช้จ่ายด้านนามธรรมของเอ็นจิ้นเต็มรูปแบบ:

รูปทรงดั้งเดิมสำหรับแฟร์เวย์ ทีบ็อกซ์ และโฮลคัพ — ทั้งหมดนี้สร้างขึ้นด้วยอินสแตนซ์ PlaneGeometry และ CylindricalGeometry

MeshStandardMaterial ที่มีค่าความหยาบและความเป็นโลหะทำให้ลูกกอล์ฟมีความแวววาวโดดเด่นภายใต้แสงไฟบอกทิศทาง

Raycasting สำหรับตรวจจับการชนกันของลูกบอลสู่พื้นที่และกระตุ้นฟิสิกส์การสะท้อน

OrbitControls ได้รับการปรับให้เหมาะกับมุมมองของกล้องฟลายแคมที่ตามส่วนโค้งของลูกบอลหลังจากการยิงแต่ละครั้ง

AnimationMixer เพื่อจัดการกับแอนิเมชันธงบนกรีน โดยเพิ่มรายละเอียดเล็กๆ น้อยๆ ที่สวยงามแต่น่าพึงพอใจ

แผนผังส่วนประกอบ Svelte แยกจากแผนผังฉาก ThreeJS โดยสิ้นเชิง ซึ่งทำให้การดีบักตรงไปตรงมา และทำให้โค้ดเบสสะอาดแม้ว่าจะมีการเพิ่มฟีเจอร์อย่างรวดเร็วก็ตาม

โครงสร้างนี้เปิดเผยอะไรเกี่ยวกับการพัฒนาผลิตภัณฑ์ที่ได้รับความช่วยเหลือจาก AI ในปี 2568

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

Related Posts

• เครื่องมือแซนด์บ็อกซ์บรรทัดคำสั่งที่รู้จักกันน้อยของ macOS (2025)
• ผู้บริหาร Waymo เผยบริษัทจ้างพนักงานระยะไกลในฟิลิปปินส์
• ระบบควบคุมภาพ Sony Jumbotron (1998) [pdf]
• วิศวกรซิลิคอนวัลเลย์ถูกฟ้องในข้อหาส่งความลับไปยังอิหร่าน

Frequently Asked Questions