MVC Jquery ve Css ile Papaz Nerede Oyunu

Küçük bir kağıt oyunu yapmak istedi canım. Bende kendi kendime bir oyun ürettim ve onu yazayım dedim. Adı Papaz Nerede. Oldukça basit bir oyun. Sadece sineklerden oluşan 13 kağıt var elimizde. Astan papaza kadar bütün seri masaya karışık bir şekilde geliyor ve bizde bu seriden papazı 3 hakta bulmaya çalışıyoruz.


Bu oyun için kağıtları ben internetten buldum. Siteden dosya paylaşamadığım için buraya ekleyemiyorum ama hem kağıtları hemde uygulamayı isterseniz bana mail adresimden ulaşabilirsiniz.


Şimdi uygulamamıza başlayalım.
İlk olarak bir kart sınıfı oluşturuyoruz. İçinde kağıtların adı ve numaraları bulunacak.





Class'ımızın içine bir de bütün kartları getiren metot yazdık. Bunu ileriki aşamalarda kullanacağız.

İkinci işlemimiz kartları masaya karışık bir şekilde getirme işlemi olsun. Eğer kartları sürekli aynı sıralama ile masaya aktarırsak aşırı kolay olur. Bunun için bir metot yazalım. Metodumuz 1 den 13 e kadar sayıları karışık bir şekilde tutacak bir listeye verileri eklesin.

Kodu biraz incelersek Random sınıfını kullandığımızı görürüz. Buradaki Thread.Sleep metodunu neden kullandığımız soracak olan arkadaşlar için kısa bir açıklama yapayım. Random metodu anlık olarak bir sayı üretir ve işleme devam eder ama bilgisayarlar çok hızlı çalışan makineler olduğu için zaman bazlı yani aynı anda birçok sayı üretir. Bu sayılarda aynı anda üretildiği için malum aynı sayılar olacaktır. Bunu engellemek için araya kısa süreli bir Thread.Sleep koymakta fayda var. Tabi benim burada 1 den 13 e kadar sayıları üreteceğime göre bu sayıların farklı olması lazım. Sürekli aynı sayılar gelirse kodumuz if e hiç bir zaman giremeyecek ve  stackoverflow hatası verecektir.

MVC kullandığım için kartları görüntüleme işlemini genelde kullandığım Index ActionResult'ı içinde göstereceğim.

Codebehind kısmını burada sonlandırdık. Sıra jquery ve css kısımlarına geldi. Artık View'ime gidiyorum.


Küçük bir tasarım yapalım.

Kısaca kodlara baktığımızda genel tasarım içinde birde foreach içinde back ve front olarak iki div görüyoruz. Bunlardan back kartın arka yüzü yani değerinin göründüğü kısım front ise kartın ters yüzünü göstermek için kullandığım alan. Card sınıfındaki Name property'si ile resimleri ilişkilendirip böylece ekranda göstermeyi sağlıyorum.


"card" sınıfının bulunduğu kısımda ise id'ye kartın numarasını veriyorum. Bu veriyi daha sonra seçilen kartı ters yüz etmek için kullanacağım.


Sıra geldi CSS kısmına.

.card-container sınıfının cssinde kartları yan yana göstermek için display flex ve direction'ı row olarak veriyoruz. Perspective özelliği ile kartın dönüş animasyonunu belirledik.


.card sınıfında ise kartların boyutlarını verdik. Transition ise kartın dönüş animasyonunu ne kadar sürede yapacağının değerini verdik.


.front ve .back sınıflarında önemli olan nokta ise backface-visibility özelliği. Bu özelliği hidden yapmazsak kart ters döndüğünde arka yüzü görünecektir.


Artık son kısım olan Jquery bölümüne gelelim.

Kodumuzun ilk bölümünde yarışmacıya 3 hak verdik. Daha sonra tıklanan kartın id'sinden kartın numarasını aldık. Animate fonksiyonu ile tıklanan kartı ilk olarak 90 derece yan çevirdik. Sonrasında kartın front kısmını display:none yaparak görünmez hale getirdik. Back tarafını da 0 dereceye çekerek kartın açılması işlemini gerçekleştirdik.


Eğer kullanıcı papazı bulamadıysa hakkında bir eksiltiyoruz. 3 hakkında da bilemezse oyunu sonlandırıyor ve yeni oyun başlatıyoruz. Güzel ve basit bir oyun oldu bence.

Tabi ekran görüntüsü aldığım için animasyonu göremiyorsunuz ama kodu alır çalıştırırsanız güzel bir animasyon olduğunu göreceksiniz.


Bir dahaki yazıya kadar kendinize iyi bakın.