𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 𝗢ğ𝗿𝗮𝗻𝗺𝗮 𝟯𝟮. 𝗚ü𝗻
Bugün bir Yılanlar ve Merdiven oyunu geliştirdim.
HTML5, CSS3 ve Vanilla JavaScript kullandım.
Dün Taş Kağıt Makas yapmıştım. Bugün daha büyük bir meydan okuma istedim. 100 hücreli bir ızgara üzerinde konumları takip etmem gerekiyordu.
İki ana teknik alana odaklandım:
Izgara Oluşturma 100 ayrı HTML div'i yazmadım. Izgarayı programatik olarak oluşturmak için bir döngü kullandım. 10x10'luk bir düzen oluşturmak için CSS Grid kullandım.
Oyun Mantığı Yılanlar ve merdivenler için uzun if-else ifadelerinden kaçındım. Hamleleri eşlemek için bir JavaScript nesnesi kullandım. Bu, kodu temiz tutuyor.
Nesne, başlangıç karesini bir hedef kareye eşler:
- Merdivenler sizi yukarı taşır.
- Yılanlar sizi aşağı indirir.
Örnek mantık: 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 };
Bunu inşa etmek, bir oyunda durumu (state) ve koordinatları nasıl yöneteceğimi öğretti.
Kaynak: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1