วันที่ 32 ของการเรียนรู้ MERN Stack
วันนี้ผมได้สร้างเกมบันไดงู (Snake and Ladder)
โปรเจกต์นี้ต้องใช้การจัดการอาร์เรย์ (array manipulation) และตรรกะที่ซับซ้อน ผมใช้ HTML5, CSS3 และ Vanilla JavaScript
เมื่อวานผมสร้างเกมเป่ายิ้งฉุบ (Rock Paper Scissors) ส่วนวันนี้ผมขยับมาทำตารางขนาด 100 ช่อง ซึ่งต้องมีการติดตามตำแหน่งผ่านเลย์เอาต์ทางคณิตศาสตร์
นี่คือวิธีการที่ผมสร้างมันขึ้นมา:
- ผมใช้ loop ในการสร้างตาราง โดยไม่ได้เขียน hardcode div ทั้ง 100 ตัว
- ผมใช้ CSS Grid เพื่อสร้างเลย์เอาต์ขนาด 10x10
- ผมใช้ JavaScript object ในการจัดการบันไดและงู
Object map จะเชื่อมโยงช่องที่เป็นตัวกระตุ้น (trigger tile) ไปยังช่องปลายทาง ซึ่งช่วยหลีกเลี่ยงการใช้คำสั่ง if-else ที่ยาวเหยียด
ตัวอย่าง map:
- บันได: 4 ไป 14, 9 ไป 31, 28 ไป 84
- งู: 17 ไป 7, 54 ไป 34, 98 ไป 79
การจัดการการเปลี่ยนผ่านเชิงพื้นที่ (spatial transitions) บนอินเทอร์เฟซแบบไดนามิก ช่วยให้ผมได้เรียนรู้มากมายเกี่ยวกับการจัดการสถานะ (state management)
ที่มา: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1