ซอร์สโค้ดเกมมินิกอล์ฟ: หลุม ฟิสิกส์ และแผนที่สนาม 3D

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

บทความนี้พาไล่ดูแพ็กเกจตามลำดับที่นักพัฒนาจะเจอจริง: โฟลเดอร์ ไลบรารี ไฟล์สนาม ลำดับการแก้ไข การโฮสต์ และไลเซนส์ ชื่อไฟล์ทั้งหมดมาจากคู่มือผู้ซื้อที่มากับเกม

คำตอบสั้น ๆ สำหรับคนรีบ: Puttide เป็น JavaScript ที่จัดรูปแบบให้อ่านง่าย ใช้ Three.js วาดภาพและ Rapier คำนวณฟิสิกส์ของลูก ทั้งสองไลบรารีอยู่ในแพ็กเกจแล้ว ไม่ต้อง build ไม่ใช้ CDN และไม่มีโค้ดฝั่งเซิร์ฟเวอร์

ซอร์สโค้ดเกมมินิกอล์ฟนี้มีอะไรบ้าง

Puttide เป็นเกมที่เสร็จสมบูรณ์ มี 30 หลุมบนสนามเกาะห้าแห่ง ได้แก่ Sunlit Ruins, Lantern Pier, Frost Peaks, Cloud Garden และ Volcano Forge แห่งละหกหลุม ทางลาด พอร์ทัล กันชน และกังหันลมทำให้แต่ละหลุมกลายเป็นปริศนาเล็ก ๆ แต่ละหลุมให้สามดาว (จบหลุม ทำได้เท่าพาร์หรือดีกว่า และเหรียญที่ซ่อนอยู่) ส่วนเหรียญรางวัลทองแดง เงิน และทองมอบให้รอบที่เล่นได้ดีที่สุด

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

• game/: บิลด์พร้อมอัปโหลด เป็นโฟลเดอร์เดียวที่ต้องเผยแพร่
• source/: เกมเดียวกันในฉบับสำหรับนักพัฒนา มี README และ package.json
• documentation/: คู่มือพร้อมภาพประกอบหนึ่งชุด ภาษาอังกฤษและโปรตุเกส
• THIRD-PARTY-LICENSES/: ข้อความไลเซนส์ของไลบรารีและฟอนต์
• เวอร์ชัน 1.1.0 อัปเดตเมื่อ 22 ตุลาคม 2026

เปิดหน้า Puttide: เดโม คู่มือ และราคา

Three.js, Rapier และเทคโนโลยีส่วนที่เหลือ

ลูกกอล์ฟจำลองด้วย Rapier 3D 0.21.0 ที่ทำงานเป็น WebAssembly ส่วนฉากวาดด้วย Three.js r186 ทั้งสองอยู่ใน lib/three/ และ lib/rapier/ พร้อมไฟล์ไลเซนส์ และ index.html มี import map ที่ชี้ให้เกมใช้ไลบรารีเหล่านี้ คู่มือระบุว่าไฟล์ไลบรารีทำงานเหมือนเดิมทุกอย่าง แค่จัดรูปแบบให้อ่านได้

เรื่องนี้สำคัญด้วยสองเหตุผล ข้อแรก ไม่มีอะไรโหลดจาก CDN พอร์ทัลหรือลูกค้าที่มีนโยบายความปลอดภัยเข้มงวดจึงต้องอนุญาตแค่โฮสต์ของคุณ ข้อสอง การอัปเกรดไลบรารีเป็นขั้นตอนที่ทำด้วยมืออย่างตั้งใจ: source/package.json ระบุเวอร์ชันที่แน่นอน คุณคัดลอกไฟล์โมดูลใหม่ทับโฟลเดอร์ lib/ ที่ตรงกัน และคงพาธใน import map ไว้

• Three.js r186: ไลเซนส์ MIT
• Rapier 3D compat 0.21.0 แบบฝัง WebAssembly: ไลเซนส์ Apache-2.0
• เว็บฟอนต์ Rubik และ Fredoka: SIL Open Font License 1.1
• เพลงสองแทร็ก: music/menu.mp3 และ music/play-1.mp3

หลุม เหรียญ และข้อความอยู่ที่ไหน

พาธใน source/ และ game/ เหมือนกัน ข้อมูลสนามแยกตามเกาะ ทำให้แต่ละไฟล์สั้นพอจะอ่านจบในรอบเดียว

• src/course/courses.js: ลำดับสนามและเงื่อนไขการปลดล็อก
• src/course/holes.js: หลุมของ Sunlit Ruins พร้อมรูปทรง พาร์ และสิ่งกีดขวาง
• src/course/pier.js, ice.js, lava.js และ sky.js: หลุมของอีกสี่สนาม
• src/sim/constants.js: การปรับค่าฟิสิกส์
• src/game/economy.js: ลูก เส้นทางลูก และชุด พร้อมราคา
• src/ui/i18n.js และไฟล์ที่เกี่ยวข้อง: พจนานุกรม 14 ภาษา รวมชื่อหลุมและคำแนะนำ
• src/game/localRecords.js: สถิติสนามที่เก็บในเบราว์เซอร์
• src/audio/audio.js: เอฟเฟกต์เสียงและการจับคู่เพลงใน probeTracks
• css/style.css: สีอินเทอร์เฟซ ฟอนต์ และสไตล์แบบ responsive

เพิ่มหลุมใหม่ทีละขั้น

นี่คือการแก้ไขที่ผู้ซื้อส่วนใหญ่ทำ และคู่มืออธิบายไว้ไม่กี่บรรทัด เราขยายความตามลำดับที่เราเองจะทำ

1. เลือกไฟล์สนามที่หลุมใหม่จะอยู่ เช่น lava.js สำหรับ Volcano Forge
2. คัดลอกนิยามหลุมเดิมที่ใกล้เคียงกับที่คุณต้องการมากที่สุด
3. ตั้ง id ที่ไม่ซ้ำ การใช้ id ซ้ำจะทำให้ความคืบหน้าที่บันทึกไว้สับสน
4. กำหนดพาร์ ตำแหน่งที (tee) และตำแหน่งหลุม (cup) แล้วย้ายหรือเปลี่ยนสิ่งกีดขวาง
5. เพิ่มหลุมเข้าสนามใน courses.js
6. เพิ่มชื่อที่แสดงและคำแนะนำลงในพจนานุกรมของทุกภาษาที่คุณจะเผยแพร่
7. ลองเล่น: ทดสอบการชน การนำลูกกลับเมื่อออกนอกสนาม และครบทั้งสามดาว รวมถึงเหรียญที่ซ่อนอยู่

แก้ไขใน source/ คัดลอกไฟล์ที่เปลี่ยนไปยังพาธเดียวกันใน game/ แล้วเปิดโฟลเดอร์ผ่าน HTTP เพื่อทดสอบ package.json มีสคริปต์ serve หรือจะรัน python -m http.server 8765 ก็ได้ Node.js ไม่บังคับ ใช้เฉพาะเมื่อต้องการให้ npm จัดการเวอร์ชันไลบรารี

การแก้ไขอื่น ๆ ตามลำดับที่เหมาะสม

1. แบรนด์และสี: โลโก้ สี และฟอนต์ใน css/style.css ทำ white label ได้ แบรนด์ของคุณแทนที่ของเราได้เลย
2. ราคาใน Locker: economy.js ไอเท็มราคาถูกทำให้เว็บเกมสบาย ๆ เป็นมิตรขึ้น ไอเท็มราคาแพงช่วยยืดแคมเปญยาว
3. ข้อความ: ถ้อยคำและคำแนะนำในไฟล์ i18n
4. เพลง: เปลี่ยนสองแทร็กที่ให้มาเป็นเพลงที่คุณมีไลเซนส์ได้ คัดลอกไฟล์และอัปเดตการจับคู่ใน audio.js (probeTracks) เพลงประจำฉากจะใช้แทร็กตอนเล่นแทนหากไม่มี
5. ฟิสิกส์: constants.js ทำเป็นอย่างสุดท้ายและปรับทีละน้อย เพราะทุกหลุมปรับจูนตามค่าปัจจุบัน

ถ้าต้องการโปรเจกต์ใกล้เคียงที่ใช้ JavaScript ล้วนแบบเดียวกันแต่ไม่ใช้ไลบรารี 3D เลย เทมเพลตพูลของเราก็สร้างด้วยวิธีเดียวกัน

Velvet Pool: พูล 8 ลูกด้วย JavaScript ล้วนและ WebGL2

Sunset Rally: ปิงปอง 3D พร้อมแคมเปญเก้าแมตช์

การโฮสต์ ชนิด MIME และการห่อเป็นแอป

อัปโหลดทุกอย่างใน game/ ไปยังโฟลเดอร์ เช่น public_html/puttide/ คงโฟลเดอร์ย่อยไว้ แล้วเปิดที่อยู่ผ่าน HTTPS เซิร์ฟเวอร์ไม่ต้องมี npm, PHP, ฐานข้อมูล หรือบัญชีใด ๆ การเปิด index.html จากดิสก์จะใช้ไม่ได้ เพราะเบราว์เซอร์บล็อกโมดูลบน file://

Puttide มีรายละเอียดการโฮสต์ที่เกม 2D ไม่มี คือฟิสิกส์ทำงานเป็น WebAssembly เซิร์ฟเวอร์ต้องส่งไฟล์ .js ด้วยชนิด MIME ของ JavaScript และส่ง .wasm เป็น application/wasm โฮสต์ที่ตั้งค่าผิดจะแสดงหน้าจอว่างหรือข้อผิดพลาดของโมดูล จึงควรตรวจตั้งแต่วันแรก

• เบราว์เซอร์ต้องรองรับ: JavaScript, ES modules, WebAssembly และ WebGL2
• ใน iframe ของพอร์ทัล ให้อนุญาต fullscreen และ autoplay
• บนจอสัมผัส: ลากเพื่อเล็งและพัตต์ ใช้สองนิ้วหมุนกล้อง และถ่างนิ้วเพื่อซูม
• ไม่ใช่แอปออฟไลน์ที่ติดตั้งได้: การโหลดใหม่แต่ละครั้งยังต้องเชื่อมต่อโฮสต์ของคุณ

แพ็กเกจไม่มีโปรเจกต์แอปเนทีฟ ถ้าวางแผนลงสโตร์ ให้เผื่องบสำหรับตัวห่อแอปและการทดสอบบนมือถือจริง เพราะเกมฟิสิกส์ 3D หนักกว่าเกมไพ่บนเครื่องรุ่นเก่า

สิ่งที่ไม่รวมอยู่ และไลเซนส์

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

Puttide ราคาปกติ 39 ดอลลาร์สหรัฐ จนถึง 30 พฤศจิกายน 2026 โปรโมชัน Black Friday ลดเหลือ 33.15 ดอลลาร์ และการซื้อเทมเพลตตั้งแต่สองชิ้นในคำสั่งซื้อเดียวได้ส่วนลดแพ็กรวม 5% ถึง 20% ไลเซนส์เป็นแบบถาวรและไม่ผูกขาด สำหรับผลิตภัณฑ์ปลายทางหนึ่งชิ้นของคุณหรือของลูกค้าหนึ่งราย คุณเปลี่ยนแบรนด์ แก้โค้ด ภาพ และเสียง และให้ผู้เล่นเล่นฟรีหรือมีโฆษณาได้ แต่ห้ามขายต่อเทมเพลตหรือโค้ดโดยลำพัง ซัพพอร์ตหกเดือน หรือสิบสองเดือนเมื่อขยายเวลา หลุมแบบกำหนดเอง การเชื่อมต่อระบบ และโฮสติ้งเสนอราคาตามคำขอ

ข้อกำหนดไลเซนส์ ซัพพอร์ต และการคืนเงินฉบับเต็ม

คำถามที่พบบ่อย

ซอร์สโค้ดมินิกอล์ฟเขียนด้วย TypeScript หรือไม่

ไม่ Puttide เป็น JavaScript ล้วนที่จัดรูปแบบแล้วใน source/src และ game/src ไม่มีไฟล์ที่ย่อหรือรวมไฟล์โดยเรา

เพิ่มหลุมหรือสนามของตัวเองได้ไหม

ได้ คัดลอกหลุมในไฟล์สนาม ตั้ง id ที่ไม่ซ้ำ กำหนดพาร์ ที และหลุม เพิ่มลงใน courses.js แล้วใส่ชื่อและคำแนะนำในไฟล์ภาษา

Three.js โหลดจาก CDN หรือเปล่า

ไม่ Three.js, Rapier, ฟอนต์ และเพลงอยู่ใน game/ ทั้งหมด เกมจึงต้องการแค่โฮสต์ของคุณ

ทำไมโฮสต์ของฉันแสดงหน้าจอว่าง

ส่วนใหญ่เป็นเรื่องชนิด MIME ให้ส่ง .js เป็น JavaScript และ .wasm เป็น application/wasm เปิดเกมผ่าน HTTP(S) และตรวจว่าเปิดใช้ WebGL2 แล้ว

เพื่อน ๆ เล่นด้วยกันได้ไหม

ได้ ผู้เล่นสองถึงสี่คนผลัดกันเล่นบนอุปกรณ์เดียวกัน ฉบับนี้ไม่มีการเล่นออนไลน์

เป็นฐานเกมมินิกอล์ฟที่ใช่สำหรับคุณไหม

Puttide เหมาะกับพอร์ทัลเกมครอบครัวหรือกีฬา เอเจนซีที่ทำสนามติดแบรนด์ให้ลูกค้ารายเดียว และนักพัฒนาที่อยากเห็น Three.js กับ Rapier ทำงานร่วมกันในโค้ดที่อ่านง่าย แต่ไม่ค่อยเหมาะกับโปรเจกต์ที่ต้องมีรอบออนไลน์หรือลีดเดอร์บอร์ดร่วมตั้งแต่วันแรก

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

เล่นเดโม Puttide และซื้อไลเซนส์