𝗗𝗮𝘆 𝟯𝟮 𝗼𝗳 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸
Hari ke-32 Belajar MERN Stack
Hari ini saya membuat permainan Ular Tangga.
Saya menggunakan HTML5, CSS3, dan Vanilla JavaScript.
Kemarin saya membuat Batu Gunting Kertas. Hari ini saya menginginkan tantangan yang lebih besar. Saya perlu melacak posisi pada grid 100 sel.
Saya berfokus pada dua area teknis utama:
Pembuatan Grid Saya tidak menulis 100 div HTML secara terpisah. Saya menggunakan loop untuk membuat grid secara terprogram. Saya menggunakan CSS Grid untuk membuat tata letak 10x10.
Logika Permainan Saya menghindari pernyataan if-else yang panjang untuk ular dan tangga. Saya menggunakan objek JavaScript untuk memetakan pergerakan. Ini membuat kode menjadi bersih.
Objek tersebut memetakan ubin awal ke ubin tujuan:
- Tangga membuatmu naik.
- Ular membuatmu turun.
Contoh logika: 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 };
Membangun ini mengajarkan saya cara mengelola state dan koordinat dalam sebuah permainan.
Sumber: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1