วันที่ 32 ของการเรียนรู้ MERN Stack
วันนี้ผมได้สร้างเกมบันไดงู (Snake and Ladder)
ผมใช้ HTML5, CSS3 และ Vanilla JavaScript
เมื่อวานผมสร้างเกมเป่ายิ้งฉุบ (Rock Paper Scissors) วันนี้ผมเลยอยากลองความท้าทายที่มากขึ้น โดยต้องมีการติดตามตำแหน่งบนตารางขนาด 100 ช่อง
ผมมุ่งเน้นไปที่สองด้านทางเทคนิคหลักๆ คือ:
การสร้างตาราง (Grid Generation) ผมไม่ได้เขียน HTML div แยกกัน 100 อัน แต่ผมใช้ loop ในการสร้างตารางขึ้นมาด้วยโปรแกรม และใช้ CSS Grid เพื่อสร้างเลย์เอาต์ขนาด 10x10
ตรรกะของเกม (Game Logic) ผมหลีกเลี่ยงการใช้ if-else ยาวๆ สำหรับเรื่องงูและบันได แต่ผมใช้ JavaScript object ในการจับคู่การเคลื่อนที่แทน ซึ่งช่วยให้โค้ดดูสะอาดตาขึ้น
Object นี้จะจับคู่ช่องเริ่มต้นไปยังช่องปลายทาง:
- บันไดจะพาคุณขึ้นไปข้างบน
- งูจะพาคุณลงมาข้างล่าง
ตัวอย่างตรรกะ: const gameModifications = { 4: 14, 9: 31, 21: 42, 28: 84, 51: 67, 72: 91, 80: 99, 17: 7, 54: 34, 62: 19, 64: 60, 87: 36, 93: 73, 95: 75, 98: 79 };
การสร้างสิ่งนี้สอนให้ผมรู้วิธีการจัดการ state และพิกัด (coordinates) ในเกม
ที่มา: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1