Bu yazımda, yukarıda kod yazım videosu olan 2048 oyununun çok basit bir versiyonunun yapımını anlatacağım.
Projeye ait kodlara buradan ulaşabilirsiniz. Buradan da oyunu oynayabilirsiniz.
Bu tarz küçük oyunlar yazılım pratiği olarak çok faydalı olduğunu düşünüyorum. 2048; İtalyan geliştirici Gabriele Cirulli tarafından oluşturulmuş ve çok popüler olmuş bir mobil oyundur. Amaç, 4×4 karelerden oluşan oyunda kare üzerindeki sayıları kaydırarak birleştirip karelerin dolmasına engel olmak.
Her zamanki gibi HTML ile başlıyoruz. Bir wrapper sınıflı div içine grid sınıflı başka bir div ve içerisinde 16 adet cell sınıflı element ile HTML dosyamızı bitiriyoruz. Burada olmayan ama Javascript ile ekleyeceğimiz number sınıflı kayan sayılar için kullanacağımız bir elementimiz de olacak.
CSS tarafı çok kısa. Burada vmin kullanarak her ekran için uyumlu bir yapı elde ettik. .cell:nth-child(4n+1) ile aynı ebeveynli birinci ve her 5. cell sınıflı elemente sol boşluk veriyoruz.
Javascript kısmına geldik. Burada modülleri kullanarak daha toplu bir yapı oluşturacağız. Ana javascript dosyamız 2048.js, grid modülünün init metodunu kullanarak ızgaramızı ve oyunumuzu başlatıyoruz. Sonrasında keyup olayını dinleyip ok-yön tuşlarına basıldığında slide metodunu çalıştırıyoruz.
grid.js dosyamızda da gerekli değerleri oluşturuyoruz. playable adında bir değişkenle oyunun oynanabilir olduğunu kontrol ediyoruz. directionRoots dizisinde ise kaydırmanın olduğu kenardaki karelerin sıra numaralarını (index) tutuyoruz. Daha sonra kaydırma yapıldığında bu indeksleri kullanarak kaydırma yönünün tersine doğru kareleri kontrol ediyoruz.
number.js dosyamızda ise sayıları kaydırma ve varsa birleştirme işlemlerini yapıyoruz. Kaydırılan bir sayıya gideceği karenin top,left değerlerini veriyoruz, CSS ile verdiğimiz transition değeri sayesinde bu geçiş zıplama olarak değil, animasyon olarak olur.
Bir cevap yazın