Javascript ile Oyun Yapımı: Hafıza Oyunu

Bu yazımızdaki örneğimiz de bir hafıza oyunu olacak. Yukarıda kod yazım videosunu izleyebilirisiniz. Kodlara da buradan erişebilirsiniz.

Oyun 4×4 boyutunda bir ızgara üzerinde karelerden oluşuyor. Bu karelerin arka tarafında belrli semboller var ve kareye tıklayarak art arda aynı iki aynı sembol açıldığında geri kapanmıyor bu kareler. Ve hiç kapalı kare kalmadığında oyun bitiyor.

Her zamanki gibi bir index.html dosyası oluşturup klasik girişimizi yapıyoruz. Google Fonts üzerinden Open Sans font ailesini alıyoruz ve index.html dosyamıza ekliyoruz. game.css ve game.js dosyalarını oluşturup HTML içerisine ekledikten sonra son olarak game-wrapper id’li bir div ile HTML dosyamızı kapatıyoruz.

CSS dosyamıza gelince, #game-wrapper için 300px genişlik veriyoruz. Oyunumuzun genişliği bu olacak ve ızgara içindeki kareler bu genişliğe uygun boyutlanacaklar.

.grid stili için de display:flex ve flex-flow:row wrap stillerini vererek içerisine ekleyeceğimiz karelerin eşit bir şekilde dizilmesini sağlıyoruz.

.cell için ise yine display:flex ve buna uygun içeriğini dikey ve yatay ortalayacak stiller veriyoruz. Karenin arkasına denk gelecek bir element daha gerekiyor bize, bunu da .cell::after ile oluşturuyoruz. Karelerin kapalı hali için kullanılacak .hide stiline de Y ekseninde döndürme rotateY veriyoruz.

Bilgi gösterimi için kullanılacak panelin stillerini de oluşturarak CSS dosyamızı bitiriyoruz.

Javascript kodlarımızda sıra. game adında bir değişken oluşturup buna oluşturulduğunda çalışacak bir fonksiyon ataması yapıyoruz. Bu fonksiyon içerisinde gerekli değişkenleri tanımlıyoruz. symbols değişkenine ise karelerin içerisinde kullanılmak üzere semboller atıyoruz. Bunu en basit şekilde harf ve sayılardan oluşan bir string‘i bölerek bir dizi(array) oluşturarak yapıyoruz.

Oyunda bir önceki seçilen kartı karşılaştırma için tutmamız gerekiyor. Bunun için previousCellIndex değişkenini kullanıyoruz.

Izgaramızı temsil eden grid, kareleri temsil eden cell ve bilgi paneli elementlerini DOM ağacına yerleştiriyoruz. Kareleri oluştururken kullandığımız döngüyü ikişer ikişer arttırıyoruz çünkü her bir sembolden birer çift olmasını istiyoruz. Ayrıca bu döngü içinde sembollerin yanyana olmaması için bir karıştırma işlemi yapmamız gerekiyor, her kareyi rastgele bir kareyle yer değiştirip döngüyü ilerletiyoruz.

Karelerin tıklanma olayına cellClick fonksiyonunu veriyoruz. Bu fonksiyonda öncelikle canPlay değişkenini ve tıklanan karenin ters çevrili olduğunu kontrol ediyoruz.

Eğer ilk kareyse bunu kayıt edip fonksiyonu bitiriyoruz. İkinci kare ise bir eşleşme var mı ve oyun tamamlanmış mı kontrol ediyoruz. Bu kontrollerden sonra previousCellIndex değişkenini null yapıp gerekli bilgiyi ekrana yazdırıp fonksiyonu bitiriyoruz.