Bu sefer Windows içinde bir klasik haline gelen mayın tarlası oyunun basit bir kopyasını kodlayacağız. Direk sonucu görmek isterseniz yukarıdaki kod yazım videosunu izleyebilirsiniz. Kodlara da buradan erişebilirsiniz.
Basit bir HTML dosyası ile başlıyoruz. Bir div elementi oluşturup mineSweeper id’sini veriyoruz. İçine de grid sınıflı bir div elementi ekliyoruz.
CSS tarafında karmaşık bir durum yok. grid sınıflı element için display: grid özelliğini kullanıyoruz. Kolon ve satır sayımıza göre javascript içinde gerekli değerli vereceğiz. Grid içindeki hücreler için de cell sınıflı elementler kullanıyoruz, bunlar ::after sanal sınıflarını da hücrenin içeriğini kapamak için kullanacak şekilde stillendiriyoruz.
Javascript tarafında ise mineSweeper.js dosyasını yükleyerek başlıyoruz. Burada helper modülünü yükleyerek çok kez kullanılabilecek fonksiyonları buradan çağıracağız. square modülü ile de hücreler için gerekli sınıfları yüklemiş oluyoruz.
Kolon, satır ve oyundaki bomba sayılarının tutulduğu değişkenleri tanımlıyoruz. grid isimli dizide hücrelerimizin verilerini tutacağız fakat bu dizi tek boyutlu olacak. Normalde {2,4} şeklinde konumu olan 5 kolonlu bir hücrenin bu dizideki konumu {9} olacak.
Kolon sayımıza göre grid elementinin kolon sayısı stilini veriyoruz.
Bombalarımız için rastgele konumlar belirleyip önce onları yerleştiriyoruz. Daha sonra tekrar bu bomba konumlarını döngüde kullanıp komşularının değerlerini birer arttırıyoruz. Bu değerler oyun bir hücrenin etrafındaki bomba sayısını gösterecek. Tabii burada komşu eğer grid dizisinde bir değere sahip değilse onu Cell sınıfı örneği ile dolduruyoruz.
Son olarak bütün grid‘i tarayarak varsa boş index onu doldurup DOM elementlerini oluşturarak ekliyoruz. Hücrelerin DOM elementlerine verilen tıklama olayları ile eğer bomba ise oyunu bitirip değilse zincir bir reaksiyon ile bomba olmayan ve değeri sıfır olan bütün hücreleri açıyoruz.
Bir cevap yazın