TypeScript ve React ile Hafıza Oyunu

Bu videoda Fonksiyonel tipte bir React Bileşeni nasıl oluşturulur, props objesinde olacak alanlar nasıl belirtilir öğrenmiş olacağız.

Bu videoda Sınıf tipinde bir React bileşeni nasıl oluşturulur, State ve props objelerinin alanları nasıl belirtilir bunu öğrenmiş olağız bir yandan da kartlarımızı listeleyecek ve oyunun temel mekaniklerinin gerçekleştirileceği bileşenimizi geliştirmeye başlamış olacağız.

Bu bölümde bir Kart nesnesinde hangi alanların ve bu alanların değerlerinin ne olacağını belirleyecek ve temel kart bileşenimizi fonksiyonel tipte bileşen olarak oluşturacağız.

Bu videoda bir kart tıklandığı zaman içerik gösterme işlemini nasıl yapacağımızı göreceğiz ve aynı anda sadece iki kartın tıklanmış olmasını sağlayacağız.

Tıklanan iki kartın içeriklerinin aynı olup olmadığının kontrolünü gerçekleştireceğiz. Bu kontrol sonunda içerikler aynı ise kartların durumlarını "matched" yapacağız ya da eşleşmedi ise "unmatched" olarak güncelleyeceğiz.

Bu videoda sınıf tipi bileşenlerde state güncelleme ile ilgili sıkça yapılan hatalardan olan peşpeşe state güncelleme işlemi ve sebep olduğu karmaşaların anlaşılması adına detaylı bir inceleme yapacağız, bu hatalardan nasıl kaçınabileceğimizi göreceğiz.

Bu videoda kart eşleşme kontrolündeki hatayı düzeltip oyuncuya dilediği zaman desteyi sıfırlayıp yeni bir kart destesi oluşturma seçeneği ekleyeceğiz. Tabi burada karşılaşacağımız "Referans yoluyla kopyalama"(copy by reference) hatası ile karşılaşıp nasıl çözeceğimizi de göreceğiz.

Bu "Referans yoluyla kopyalama"(copy by reference) hatası pek çok kez geliştiricilerin karşılaştığı ve gerek bilgi eksikliği gerek dikkatsizlik nedeni ile üzerinde epey vakit kaybettiği bir hata olduğu için hatanın sebebinin ve çözüm yönteminin anlaşıldığından emin olun bir sonraki videoya geçmeden

Bu videoda ise bir diğer hatamız olan tıklanan iki kartın kontrolü esnasında tıklanan kartların kontrol bittikten sonra içeriklerinin gösterilmesi hatasının nedenini inceleyip çözüme kavuşturacağız.

Bu videoda oyunumuzun oynanabilirliğini artırmak için en gerekli özelliğini ekleyeceğiz; "Her seferinde rastgele bir kart destesi oluşturma". Bu sayede oyuncuya her seferinde bir öncekinden farklı bir kart destesi verebileceğiz. Tabi bununla birlikte oyuncuya bir de zorluk seviyesi seçme imkanı vereceğiz. Böylece oynamak istediği kart sayısını bir ölçüde kendisinin belirlemesine imkan sağlayacağız.

Bu videoda zorluk sistemini geliştirmeyi sürdürürken bir yandan da oyuncunun bu zorluk seviyelerinde yaptığı en iyi(en az) hamle sayılarını da "En iyi skor" bilgisi altında hafızada tutacağız.

Bu videoda oyuncu tüm kartları eşleştirdikten sonra oyunu bitti durumuna getirip, oyuncunun yaptığı hamle sayısını ekrana yazdırma işlemini yapacağız. Tabi bu yeni yapılan hamle sayısı en iyi skor bilgisinde tutulan değerden daha küçük ise yeni en iyi skor bilgisinin güncellenmesi işlemini de gerçekleştireceğiz.

Bu videonun ilk kısmında kart içeriklerinin daha hoş görünmesi için FontAwesome ikon kütüphanesinden faydalanarak kart içeriklerini hayvan ya da onları temsil eden çizimler ile değiştireceğiz.