Istanbul Üniversitesi Bilfest 18
Selamlar,
28 Şubat 2018’de İstanbul Üniveristesinde Bilfest18 etkinliği kapsamında, yazdığım bir oyun projesini hep beraber Code Review ettik. Kullanılan teknolojiler Angular 5, SignalR 2.0 , Azure, Asp.Net Core, Html 5 ve Jquery idi.
Çok keyifli geçen bu inceleme esnasında, yaşadığım zorlukları adım adım inceledik. Öncelikle .Net Core üzerinde DBContext’imizi ve WebApi servislerimizi inceledik. Daha sonra Angular5 bir web uygalaması üzerinden, oynayacağımız oyunların kodlarını hep beraber inceledik. Angular üzerinde signalR kurulumu, bizi karşılayan menu, mobil sayfa ile web sayfası üzerindeki iletişim ve SignalR ile olan belli bir client’a göre iletişim, en başta baktığımız konular arasındadır.
Örnek SignalR ile bir client’a QrBarcode’u gönderme:
|
1 |
return Clients.Client(Context.ConnectionId).InvokeAsync("GetConnectionId", Context.ConnectionId, imgName); |
Mobile cihaz ile web application’ın birbiri ile iletişimi için bu proje kapsamında bir QrBarcode oluşturulmuştur. .Net Core üzerinde bu konu, detaylıca incelenmiştir. Ne zaman silinmesi gerektiği, nasıl bir servis ile çekilmesi gerektiği ve dönen stream bir sonuçtan nasıl image’in oluşturulacağı yine bu konular arasındandır. .Net Core üzerinde image işlemleri, yine bu esnada detaylıca incelenmiştir.
Oyunun içinde kullanılan kartların, var olan bir DB’den random olarak seçilmesi, eşleniğin oluşturulması ve performans amaçlı memory’de saklanış şekli, karşılaşılan bir diğer zorluklardır.
Örnek Deep Copy:
|
1 2 3 4 5 6 7 8 |
public static List<T> CloneList<T>(List<T> oldList) { BinaryFormatter formatter = new BinaryFormatter(); MemoryStream stream = new MemoryStream(); formatter.Serialize(stream, oldList); stream.Position = 0; return (List<T>)formatter.Deserialize(stream); } |
Daha sonra kartların ve oyun datalarının çekildiği .Net Core WebApi servisleri incelenmiştir.
Örnek WebApi ile tüm kategorilerin dönüldüğü kod örneği:
|
1 2 3 4 5 6 7 8 9 10 11 |
public class PuzzlesController : Controller { private static Dictionary<string, List<Ipuzzle>> cache = new Dictionary<string, List<Ipuzzle>>(); public List<PuzzleCategory> Get() { using (PuzzleDataContext dbContext = new PuzzleDataContext()) { return dbContext.PuzzleCategory.ToList(); } } } |
Angular 5 üzerinde CustomFilter ile kartların belli bir düzende sıralanması, CustomDirective ile de bir web sayfasının arka temasının seçilen oyuna göre dinamik değişmesi, Angular 5 tarafında incelenen birkaç konudan biridir.
Hafıza oyununda seçilen 2 kartın aynı olup olmadığının anlaşılması ve eşleşme sonucunun, mobile uygulamaya bildirilmesi, C# .Net Core tarafında incelenen konulardan birkaçıdır.
|
1 2 3 4 |
if (this.cardList.filter(c => c.isShow == true && c.isDone == false).length > 1) { //1-) Açılan Kartın Diğer Eşi var pairID = this.CloneID(id); var IsPairCardOpen = this.cardList.filter(crd => crd.id == pairID && crd.isShow).length > 0 ? true : false; |
Mobile sayfaya bildirme: Bildirme sonucu olarak aşağıdaki sonuçlar geri dönülmektedir :
- Başarılı yani kartlar eşleşdi.
- Başarısız yani kartlar eşleşmedi.
- Kartların hepsi açıldı. Oyunun yeniden başlaması gerekmektedir.(isReset=true)
Şeklinde bildirimler yapılmaktadır.
|
1 |
this.NotifyControlPage(id, true, isReset); |
Oyunda performansı sağlamak için, aynı seçim ve dizileme sahip Random seçilen kart listesi, hem web hem mobile için ayrı ayrı çekilmez. Static dictionary bir List’de tutulurlar. İlgili liste 2 sayfa için de çekilince, temizlenir. Key olarak, tekil olan client’ın signalR connectionID’si kullanılmaktadır.
|
1 |
private static Dictionary<string, List<Ipuzzle>> cache = new Dictionary<string, List<Ipuzzle>>(); |
Son olarak oyunlardan biri olan savaş uçağı oyununda, tanklardan kaçıp, ateş eden hareket dinamikleri ve oyun motoru yüzeysel olarak incelenmiştir. Ortaya çıkan onca formül ile, programlamada matematiğin yeri bir kere daha vurgulanmıştır.
Örnek kod:
|
1 2 3 4 5 6 7 8 9 |
//Bombo uçağı vurursa if (pos.top <= $('#fightPlane').position().top + $('#fightPlane').height() && pos.top >= $('#fightPlane').position().top && pos.left >= $('#fightPlane').position().left && pos.left <= ($('#fightPlane').position().left + $('#fightPlane').width()) && ths.isHit == false) { ths.isHit = true; // animate sırasında aynı yere tekrardan girmesin diye. (Lock) object. $('#fightPlane').stop(); // Hareketli ise dursun $('#fightPlane').attr('src', ths.bgPath + "/explosion.png"); ths.playSucess("bomb.mp3", 0.6); } |
1 saat planlanan ancak 3 saat süren, ister sorulan sorular, ister ise seminere olan muhteşem katkılarından dolayı tüm katılımcıları kutlar, teker teker teşekkür ederim.
Geldik bir seminerin daha sonuna, yeni bir seminerde görüşmek üzere hoşçakalın.
güzel yazı
Teşekkürler.