[7 วัน] สร้างเกมสนุกๆ กับ AI

ตอนนี้ผ่านไปหนึ่งสัปดาห์แล้วนับตั้งแต่เริ่มสร้างเกมเว็บที่ใช้ D&D5e ร่วมกับ Perplexity.AI

วันนี้มีการปรับปรุงโครงสร้างภายในมากกว่าการสร้างเนื้อหา เพื่อให้เกมมีความแข็งแกร่งยิ่งขึ้น

★ การใช้เลเยอร์แคนวาส

แทนที่จะใช้แคนวาสเดียว ได้แยกแคนวาสออกเป็น 3 ส่วน (background, ui, character)

วิธีนี้จะช่วยให้การทำงานมีประสิทธิภาพมากขึ้น เนื่องจากจะวาดและรวมเฉพาะส่วนที่จำเป็นต้องอัปเดตใหม่ แทนที่จะวาดใหม่ทั้งหมด

(AI บอกว่า) จะช่วยเพิ่มประสิทธิภาพโดยรวม ฮ่าๆ

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

ดังนั้น หากต้องการแสดงผลบนแคนวาสอย่างแม่นยำตามที่ต้องการ ควรใช้คำสั่ง save และ restore

★ เปลี่ยนเป็นวิธี ESM

ก่อนหน้านี้ โหลด js ทั้งหมดใน html ด้วย <script> แต่เมื่อมีการแยกโค้ด js ก็เพิ่มขึ้นเรื่อยๆ...

ตอนแรก ด้วยความทรงจำในอดีต จึงพยายามใช้ require.js แต่ AI ก็สอนเทคนิคใหม่ให้

ด้วยเหตุนี้ จึงปรับปรุงใหม่โดยใช้วิธี ESM ตอนนี้ไม่ว่าโค้ดจะเพิ่มขึ้นมากแค่ไหนก็ตาม

เช่นเดียวกับในตัวอย่างด้านบน จะมีเพียง main.js ที่ประกาศด้วย module เท่านั้นที่จะถูกระบุใน index.html ดูดีทีเดียว

หลังจากปรับปรุงโครงสร้างโดยรวมแล้ว จึงสามารถเพิ่มฟังก์ชันต่างๆ ดังต่อไปนี้ได้

★ การใช้งานสิ่งอำนวยความสะดวก

เมื่อเข้าไปในสิ่งอำนวยความสะดวก ตัวเลือกจะปรากฏในกล่องโต้ตอบ และสามารถโต้ตอบได้โดยการคลิก (แตะ)

นี่จะเป็นฟังก์ชันพื้นฐานสำหรับการเพิ่มระบบต่างๆ ในอนาคต แม้ว่าระหว่างการเพิ่มจะมีบั๊กและการแก้ไขมากมาย

แต่ตอนนี้ใช้งานได้ดีแล้ว จึงถือว่าโอเค

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

และในระหว่างการต่อสู้ เอฟเฟกต์จะแสดงขึ้นตามผลลัพธ์ของการโจมตี ดังภาพด้านล่าง!

หากโจมตีถูกต้อง จะแสดง Hit! และหากโจมตีวิกฤต จะแสดง Critical! เมื่อวานยังทำงานไม่ราบรื่นเลย ฮ่าๆๆ..

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

และเนื่องจากโหลดรูปภาพทั้งหมดไว้ล่วงหน้าก่อนเริ่มเกม จึงได้สร้างหน้าจอโหลดดังภาพด้านล่าง

รู้สึกเหมือน... ตอนนี้มันเริ่มดูเหมือนเกมขึ้นมาแล้ว

ดูเหมือนว่าการจัดระเบียบและการสร้างฐานเสร็จสมบูรณ์แล้ว ดังนั้นจึงจะเริ่มต้นการใช้งานขั้นต่อไป

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

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

อืม... ยังมีอีกเยอะเลย!?

แต่ก็สนุกดีที่ได้ร่วมงานกับ AI ขอเริ่มต้นต่อไปเลย

ที่อยู่สำหรับทดสอบ: https://ggoban.com/d2ng/

ที่อยู่ GitHub: https://github.com/d2ng/