ซอร์สโค้ดเกมปริศนาจอดรถ: เกมจราจร 3D 30 ด่าน

ถ้าคุณกำลังหาซอร์สโค้ดเกมปริศนาจอดรถ คำตอบสั้น ๆ คือ Beep Out เป็นเกมปริศนาจราจร 3D ที่เสร็จสมบูรณ์แล้ว เล่นบนเบราว์เซอร์ มี 30 ด่าน มาพร้อมบิลด์ที่อัปโหลดได้ทันทีและโปรเจกต์ TypeScript ที่แก้ไขได้ ราคา $35 บทความนี้จะเปิดแพ็กเกจให้ดูว่าแต่ละส่วนมีไว้ทำอะไร

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

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

Beep Out จำหน่ายในชื่อ Local Browser Edition เวอร์ชัน 1.1.0 ไฟล์ที่ดาวน์โหลดแบ่งเป็นสองส่วน คือเกมที่นำขึ้นเว็บได้วันนี้ และโปรเจกต์ที่คุณแก้ไขได้

• โฟลเดอร์ game/ พร้อมอัปโหลด ครบทั้ง 30 ด่าน
• JavaScript, CSS และข้อมูลที่ใช้รันจริงในรูปแบบที่อ่านได้ เพื่อให้เห็นว่าเบราว์เซอร์รันอะไร
• ซอร์ส TypeScript สำหรับนักพัฒนา พร้อมแอสเซ็ตของเกมและชุดทดสอบ
• คู่มือพร้อมภาพประกอบภาษาอังกฤษและโปรตุเกส ครอบคลุมการติดตั้ง แผนผังไฟล์ การปรับแต่ง การแก้ปัญหา และ FAQ
• ประกาศไลเซนส์ของไลบรารีและฟอนต์

อินเทอร์เฟซมี 14 ภาษา ได้แก่ อังกฤษ โปรตุเกส สเปน ฝรั่งเศส เยอรมัน อิตาลี ดัตช์ โปแลนด์ ตุรกี รัสเซีย อินโดนีเซีย ญี่ปุ่น เกาหลี และจีนตัวย่อ ส่วนคู่มือมีเฉพาะภาษาอังกฤษและโปรตุเกส ข้อนี้สำคัญถ้านักพัฒนาของคุณอ่านไม่ได้ทั้งสองภาษา

เปิดหน้า Beep Out แล้วลองเล่นเดโม

เกมปริศนาจราจรทำงานอย่างไร ทีละกติกา

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

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

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

โค้ดจัดวางอย่างไร

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

เทคโนโลยีที่ใช้คือ TypeScript, Three.js และ WebGL2 บิลด์ด้วย Vite ไฟล์มีทั้ง HTML, CSS, JavaScript, TypeScript และ JSON การบิลด์ใหม่ต้องใช้ Node.js 22.12 ขึ้นไปและ npm แต่ถ้าแค่เล่นไม่ต้องใช้อะไรเลย

โปรเจกต์มีคำสั่งให้สี่คำสั่ง และคู่มืออธิบายไว้ทุกคำสั่ง

• npm run levels ตรวจไฟล์ด่านก่อนบิลด์
• npm test รันชุดทดสอบ
• npm run typecheck จับข้อผิดพลาดเรื่องชนิดข้อมูลใน TypeScript
• npm run build สร้างโฟลเดอร์ game ชุดใหม่

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

เทมเพลตเกมจอดรถ: ควรแก้อะไรก่อน

เราแนะนำให้เริ่มจากสี่อย่างนี้ ตามลำดับ

1. ชื่อ โลโก้ และแบรนด์

ชื่อหน้า HTML และการตั้งค่าแบรนด์อยู่ในโปรเจกต์ซอร์ส ไฟล์โลโก้อยู่ใน public/ และเสียงอยู่ในโฟลเดอร์ของตัวเอง เปลี่ยนไฟล์โดยใช้พาธเดิม แล้วบิลด์ใหม่ ทำ white label ได้ ใส่แบรนด์ของคุณหรือของลูกค้าแทนแบรนด์ของเรา

2. ด่าน

ไฟล์สำหรับสร้างด่านอยู่ใน source/ แก้ไข ตรวจด้วย npm run levels บิลด์ใหม่ แล้วอัปโหลด คู่มือมีแผนผังไฟล์ จึงไม่ต้องไล่หาในโค้ดว่าด่านไหนอยู่ตรงไหน

3. ข้อความในอินเทอร์เฟซและภาษา

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

4. การตั้งค่าเกม

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

1. สำรองแพ็กเกจต้นฉบับไว้
2. เปลี่ยนไฟล์แบรนด์โดยคงพาธเดิม
3. แก้หรือเพิ่มด่าน แล้วรัน npm run levels
4. รัน npm test และ npm run build
5. แทนที่โฟลเดอร์ game/ บนโฮสต์ทั้งโฟลเดอร์ ไม่ใช่ทีละไฟล์
6. ทดสอบบนมือถือและเบราว์เซอร์ที่ผู้เล่นของคุณใช้

โฮสติ้ง การฝังในหน้าเว็บ และแอปสโตร์

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

ไม่รองรับการเปิด index.html จากดิสก์โดยตรง ต้องเสิร์ฟผ่าน HTTP(S) เบราว์เซอร์ต้องรองรับ JavaScript, ES modules และ WebGL2 ผู้เล่นแตะบนจอสัมผัสและคลิกบนเดสก์ท็อป ใน Settings มีโหมดกราฟิก Low ที่ช่วยประหยัดแบตบนมือถือรุ่นเก่า

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

ขอใบเสนอราคาสำหรับการแก้ไข โฮสติ้ง หรือเวอร์ชันแอป

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

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

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

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

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

อ่านเงื่อนไขไลเซนส์และซัพพอร์ตฉบับเต็ม

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

ต้องใช้เซิร์ฟเวอร์หรือฐานข้อมูลไหม

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

เพิ่มด่านจอดรถของตัวเองได้ไหม

ได้ แก้ไฟล์สร้างด่านใน source/ ตรวจด้วย npm run levels บิลด์ใหม่ แล้วแทนที่โฟลเดอร์ game/ บนโฮสต์ด้วยผลลัพธ์ชุดใหม่

เกมปริศนาจราจรเล่นบนมือถือได้ไหม

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

ใส่เกมไว้ในหน้าเว็บของตัวเองได้ไหม

ได้ โฮสต์ไว้ในโฟลเดอร์ไหนก็ได้ แล้วฝังด้วย iframe คู่มือมีตัวอย่างโค้ดให้

มีโฆษณาหรือคะแนนออนไลน์มาด้วยไหม

ไม่มี รุ่นนี้ไม่มี SDK โฆษณา อันดับออนไลน์ หรือโหมดผู้เล่นหลายคน การเพิ่มสิ่งเหล่านี้เป็นงานสั่งทำ เสนอราคาเป็นรายโปรเจกต์

ใช้ไลเซนส์เดียวกับลูกค้าสองรายได้ไหม

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

เทมเพลตเกมปริศนาที่เกี่ยวข้อง

ถ้ากลุ่มผู้เล่นของคุณชอบการแยกสีมากกว่าเรื่องรถติด Mochi Monsters เป็นเกมปริศนาเรียงสี 60 ด่านในสามโลก พร้อมโหมด Endless (เล่นไม่รู้จบ) ราคาปกติ $39 ถ้าต้องการรอบการเล่นที่สั้นกว่า Gridspark เป็นเกมปริศนาบล็อก 8×8 ที่มีท่า ZAP สายฟ้า และภารกิจรายวันที่สร้างจาก seed ราคาปกติ $29 ทั้งสองเกมมีซอร์สที่อ่านได้และอินเทอร์เฟซ 14 ภาษา

ดู Mochi Monsters เกมปริศนาเรียงสี

ดู Gridspark เกมปริศนาบล็อก

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

ซื้อซอร์สโค้ดเกมปริศนาจอดรถ Beep Out