ซอร์สโค้ดเกมปิงปอง Sunset Rally: ไฟล์ ฟิสิกส์ และแคมเปญ

ถ้าคุณต้องการซอร์สโค้ดเกมปิงปองที่นำขึ้นโฮสต์เองและแก้ไขได้ Sunset Rally คือเกมปิงปอง 3D บนเบราว์เซอร์ที่ทำเสร็จแล้ว มีแคมเปญเก้าแมตช์ คู่แข่ง CPU สามคน โรงช่าง และโปรเจกต์ TypeScript ครบชุด ราคาปกติ $39 โฟลเดอร์เกมบิลด์ไว้แล้วและไม่ได้ย่อโค้ด (minify) คุณจึงอัปโหลดขึ้นก่อนแล้วค่อยอ่านโค้ดทีหลังได้

เกมกีฬาปรับแต่งยากกว่าที่เห็น เพราะความสนุกอยู่ที่ฟิสิกส์และการควบคุม ไม่ได้อยู่ที่เมนู บทความนี้จะชี้ว่าส่วนเหล่านั้นอยู่ตรงไหนในโปรเจกต์ Sunset Rally ส่วนไหนแก้ได้อย่างปลอดภัย และรุ่นนี้ไม่มีอะไรบ้าง

เกมปิงปองนี้เล่นอย่างไร

แต่ละแมตช์แข่งกับคู่แข่ง CPU ถึงเจ็ดแต้ม ผู้เล่นขยับเมาส์หรือลากนิ้วเพื่อควบคุมไม้ ส่วนการตีเป็นอัตโนมัติ ดันขึ้นเพื่อเพิ่มแรง เลื่อนไปด้านข้างเพื่อวางลูก ดึงลงเพื่อตีหยอด (drop shot) และลูกที่ลอยสูงก็คือโอกาสตบ

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

คู่แข่ง CPU สามคนมีสไตล์ของตัวเอง ได้แก่ Capi ผู้ใจเย็น Nori ผู้ขี้เล่น และ Miso ผู้แม่นยำ แต่ละคนมีระดับ Easy, Normal และ Hard โหมดฝึกซ้อมมีคู่ซ้อมที่ตีกลับทุกลูก หลังจบแมตช์ จะมีรีเพลย์ฉายแต้มชี้ขาดให้ดูอีกครั้ง

ลองเล่นเดโม Sunset Rally

ในแพ็กเกจซอร์สโค้ดเกมปิงปองมีอะไรบ้าง

• โฟลเดอร์ game/ ที่พร้อมขึ้นโฮสต์ บิลด์แล้วและไม่ได้ย่อโค้ด
• ซอร์ส TypeScript สำหรับนักพัฒนา พร้อมการตั้งค่า Vite และไฟล์ของเกม ใน source/
• คู่มือภาษาอังกฤษและโปรตุเกสพร้อมภาพประกอบจากหน้าจอจริง
• ฟอนต์และไฟล์เสียงที่มาพร้อมเกม
• ประกาศสัญญาอนุญาตของบุคคลที่สามและบันทึกการเปลี่ยนแปลง

เทคโนโลยีที่ใช้คือ TypeScript, Three.js r184, Vite และ WebGL2 ไฟล์มีทั้ง HTML, CSS, JavaScript, TypeScript และ JSON อินเทอร์เฟซมี 14 ภาษา ได้แก่ อังกฤษ โปรตุเกส สเปน ฝรั่งเศส เยอรมัน อิตาลี ดัตช์ โปแลนด์ ตุรกี รัสเซีย อินโดนีเซีย ญี่ปุ่น เกาหลี และจีนตัวย่อ ส่วนคู่มือมีแค่ภาษาอังกฤษและโปรตุเกส

เนื้อหารอบ ๆ แมตช์ก็อยู่ในแพ็กเกจด้วย ได้แก่ Sunset Circuit เก้าแมตช์ในสามสเตจ ฉากสามแห่ง (สวน Sunset, สวน Sakura และคาเฟ่ Seaside) ในช่วงเช้า บ่าย กลางคืน หรือฝนตก และโรงช่างที่ใช้เหรียญจากการชนะซื้อสีไม้ ยางหน้าไม้ รูปทรง ด้ามจับ เนื้อไม้ เทปขอบ สติกเกอร์ รวมถึงสไตล์ลูกบอลและโต๊ะ

แต่ละส่วนอยู่ตรงไหนในโค้ด

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

• Campaign.ts: เก้าแมตช์ในแคมเปญและเป้าหมายดาว
• Places.ts: หน้าตาของแต่ละฉาก
• physics.ts: ฟิสิกส์ของลูกบอลและไม้
• match.ts: การนับแต้มและกติกาแมตช์
• i18n.ts: ข้อความอินเทอร์เฟซภาษาอังกฤษและโปรตุเกส ภาษาอื่นอยู่ในโฟลเดอร์ locales
• styles.css: สไตล์ของเมนูและหน้าจอ

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

เทมเพลตเกมปิงปอง ควรแก้อะไรก่อน

เราแนะนำลำดับนี้ เรียงจากความเสี่ยงต่ำไปสูง

1. ข้อความอินเทอร์เฟซและชื่อเกม ใน i18n.ts และโฟลเดอร์ locales
2. สีและหน้าจอ ใน styles.css
3. สไตล์ไม้ ลูกบอล และโต๊ะในโรงช่าง เพื่อให้อุปกรณ์มีแบรนด์ของคุณ
4. ภาพของฉาก ใน Places.ts
5. แมตช์ในแคมเปญและเป้าหมายดาว ใน Campaign.ts
6. ฟิสิกส์และการนับแต้ม ใน physics.ts และ match.ts เฉพาะเมื่อต้องการความรู้สึกในการเล่นที่ต่างออกไป

คู่มือให้กฎอีกสามข้อที่ควรทำตาม เก็บ ID การปลดล็อก ID ไอเท็ม และคีย์บันทึกไว้เหมือนเดิม ไม่อย่างนั้นผู้เล่นจะเสียสิ่งที่สะสมไว้ สำรองไฟล์ก่อนเริ่ม และแก้ทีละฟีเจอร์ เพื่อให้รู้ว่าการแก้ไหนส่งผลอะไร

ทำ white label ได้ ชื่อและโลโก้ของคุณหรือของลูกค้าใส่แทนของเราได้เลย

บิลด์ใหม่ ขึ้นโฮสต์ และฝังในหน้าเว็บ

ถ้าแค่จะเล่น ไม่ต้องบิลด์อะไรเลย อัปโหลดเนื้อหาใน game/ ขึ้นโฮสต์ HTTP(S) ใดก็ได้ที่ให้บริการไฟล์สแตติก คงพาธสัมพัทธ์ไว้ แล้วเปิดที่อยู่นั้น ไม่ต้องใช้ PHP ฐานข้อมูล หรือบัญชีผู้ใช้

ถ้าจะแก้ซอร์ส ต้องมี Node.js (แนะนำ 24 LTS) และ npm แก้ TypeScript บิลด์ใหม่ด้วย Vite แล้วแทนที่โฟลเดอร์ game/ บนโฮสต์ด้วยผลลัพธ์ใหม่

เบราว์เซอร์ต้องรองรับ JavaScript, ES modules และ WebGL2 รองรับทั้งจอสัมผัสและเมาส์ และการควบคุมปรับตามขนาดหน้าจอ ประสิทธิภาพขึ้นกับเบราว์เซอร์และอุปกรณ์ จึงควรทดสอบบนมือถือที่ผู้เล่นของคุณใช้จริง

1. อัปโหลด game/ ไปไว้ในโฟลเดอร์ทดสอบบนโฮสต์
2. เล่นหนึ่งแมตช์บนเบราว์เซอร์คอมพิวเตอร์ และอีกหนึ่งแมตช์บนมือถือ
3. แก้ข้อความและสไตล์ใน source/ แล้วบิลด์ใหม่
4. แทนที่โฟลเดอร์ทดสอบทั้งโฟลเดอร์ แล้วเล่นอีกครั้ง
5. ย้ายไปยังที่อยู่จริง

สิ่งที่รุ่นนี้ไม่มี

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

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

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

ขอใบเสนอราคางานพิเศษ

สัญญาอนุญาต การซัพพอร์ต และราคา ในย่อหน้าเดียว

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

อ่านข้อกำหนดฉบับเต็ม

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

ต้องบิลด์อะไรก่อนใช้เกมปิงปองนี้ไหม

ไม่ต้อง โฟลเดอร์ game/ บิลด์ไว้แล้ว อัปโหลดเนื้อหาขึ้นเว็บโฮสต์แบบสแตติกแล้วเปิดที่อยู่ได้เลย ต้องใช้ Node.js และ npm เฉพาะเมื่อแก้ TypeScript และบิลด์ใหม่

มีโหมดสองผู้เล่นหรือโหมดออนไลน์ไหม

ไม่มี รุ่นนี้เล่นกับ CPU ในแคมเปญ แมตช์อิสระ และการฝึกซ้อม

เปลี่ยนแคมเปญและเป้าหมายดาวได้ไหม

ได้ แมตช์และเงื่อนไขดาวอยู่ใน Campaign.ts แก้แล้วบิลด์ใหม่ด้วย Node.js

เปลี่ยนการเคลื่อนที่ของลูกบอลได้ไหม

ได้ ฟิสิกส์อยู่ใน physics.ts และกติกานับแต้มอยู่ใน match.ts แก้ทีละอย่างแล้วทดสอบกับคู่แข่งทุกคน

เล่นบนมือถือได้ไหม

ได้ ด้วยการควบคุมแบบสัมผัสที่ปรับตามหน้าจอ ต้องมี WebGL2 และประสิทธิภาพขึ้นกับอุปกรณ์ จึงควรทดสอบบนมือถือที่คุณตั้งเป้าไว้

ความคืบหน้าบันทึกไว้ที่ไหน

ในเบราว์เซอร์ของผู้เล่น ไม่ใช้เซิร์ฟเวอร์หรือบัญชี

เทมเพลตเกมกีฬาอื่นที่น่าเทียบ

ถ้าคุณกำลังทำมุมเกมกีฬาให้เว็บไซต์ มีอีกสองเทมเพลตที่วางคู่กับ Sunset Rally ได้ดี Velvet Pool คือเกมพูล 8 ลูกที่มีคู่แข่ง CPU และโหมดสองผู้เล่นบนเครื่องเดียว เขียนด้วย JavaScript ล้วนกับ WebGL2 ราคาปกติ $39 ส่วน Puttide คือเกมมินิกอล์ฟ 3D 30 หลุม สร้างบน Three.js และ Rapier ราคาปกติ $39 ทั้งคู่มีอินเทอร์เฟซ 14 ภาษา

Sunset Rally เหมาะกับพอร์ทัลและเว็บไซต์ที่อยากได้เกมกีฬาแมตช์สั้น สตูดิโอที่ส่งมอบเกมติดแบรนด์ให้ลูกค้ารายเดียว และนักพัฒนาที่อยากได้โปรเจกต์ TypeScript กับ Three.js ที่อ่านง่ายไว้ศึกษาหรือต่อยอด ถ้าต้องการให้สองคนเล่นบนเครื่องเดียวกัน Velvet Pool มีโหมดนี้ แต่ Sunset Rally ไม่มี

ดู Velvet Pool เกมพูล 8 ลูก

ดู Puttide เกมมินิกอล์ฟ 3D

ซื้อตั้งแต่สองเทมเพลตขึ้นไปในคำสั่งซื้อเดียว ราคาแต่ละสัญญาอนุญาตจะลดลง ลด 5% เมื่อซื้อสอง 10% เมื่อซื้อสาม 15% เมื่อซื้อสี่ และ 20% เมื่อซื้อห้าขึ้นไป

รับซอร์สโค้ดเกมปิงปอง Sunset Rally