[ตอนที่ 2] สร้างเกมเว็บด้วย AI ภายใน 30 นาที

วันนี้ได้ทำการแยกโค้ดและเพิ่มฟังก์ชันเล็กน้อยต่อจากงานที่แล้ว

ก่อนอื่นเลย ได้ร้องขอให้แยกแหล่งที่มาที่ html, js และ css อยู่ในไฟล์เดียวกันออกจากกัน

Q9. โปรดเขียนซอร์สโค้ดแบบรวมด้านบนใหม่ให้เป็นโครงสร้างที่แยกเป็นไฟล์ html, js และ css

-> แยกเป็น 3 โครงสร้าง ได้แก่ index.html, game.js และ styles.css

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

-> เพิ่มแถบด้านข้างคงที่ทางด้านซ้าย และเพิ่ม/แก้ไขฟังก์ชันที่เกี่ยวข้องใน game.js เพื่อให้สามารถตรวจสอบสถานะได้ตลอดเวลา

Q11. ในซอร์สโค้ดด้านบน โปรดเพิ่มปุ่มและฟังก์ชันที่สามารถใช้คะแนนสกิลในหน้าต่างแสดงสถานะได้

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

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

-> เพิ่มฟังก์ชันที่จะได้รับทองคำ และแก้ไขให้สามารถตรวจสอบได้ในแถบด้านซ้าย

การสอบถามทั้ง 4 ข้อนี้ทำให้หน้าจอและโครงสร้างดูดีขึ้น และได้เตรียมพื้นฐานสำหรับการเพิ่มฟังก์ชันอื่นๆ เช่น ระบบร้านค้าในอนาคต

ต่อไปจะขยายฟังก์ชันเพิ่มเติม เช่น การเพิ่มฟังก์ชันร้านค้า (ไอเทมฟื้นฟู ฯลฯ) และระบบสกิล

https://ggoban.com/hof/