MERN Stack Öğrenme Günü 32
Bugün bir Yılan ve Merdiven oyunu geliştirdim.
Bu proje karmaşık dizi manipülasyonu ve mantık gerektiriyordu. HTML5, CSS3 ve Vanilla JavaScript kullandım.
Dün Taş Kağıt Makas yapmıştım. Bugün ise 100 hücreli bir ızgaraya geçtim. Bu, matematiksel bir düzen üzerinde konumları takip etmeyi gerektiriyordu.
İşte nasıl geliştirdiğim:
- Izgarayı oluşturmak için bir döngü kullandım. 100 tane div'i hardcode etmedim.
- 10x10'luk bir düzen oluşturmak için CSS Grid kullandım.
- Merdivenleri ve yılanları yönetmek için bir JavaScript nesnesi kullandım.
Nesne haritası, tetikleyici bir kareyi hedef bir kareye bağlar. Bu, uzun if-else ifadelerinden kaçınmamı sağlar.
Örnek harita:
- Merdivenler: 4'ten 14'e, 9'dan 31'e, 28'den 84'e.
- Yılanlar: 17'den 7'ye, 54'den 34'e, 98'den 79'a.
Dinamik bir arayüz üzerinde mekansal geçişleri yönetmek, bana durum yönetimi (state management) hakkında çok şey öğretti.
Kaynak: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1