Selam uzun bir yazı olacağını sandığım yeni bir yazı dizisiyle karşınızdayım. Japonların Hashiwokakero adını verdikleri bir mantık oyunu var. Çok severim. Ben bunu yaparım dedim. Önce C# ile yaptım ama çok uzun sürdü. Python ile yaparım dedim. Çok daha az kodla biteceğini tahmin ettim ve aynen öyle oldu. Bu yazı dizisinde oyunu yazarken gittiğim adımları sizinle paylaşmak istedim. Emin olduğum bir şey var, bir programlama dilini etkili kullanmak istiyorsan, o dil ile iş gören bir şey yapacaksın.
Bütün yaygın kullanılan Python desktop GUI kütüphaneleri ile denemeler yapmaya başladım ve Python'un default GUI kütüphanesi olan Tkinter kütüphanesini kullanmaya karar verdim.
Python Oyun Penceresi Taslağı
Öncelikle oyun penceresini görsel olarak bir hazırlayayım dedim. İlk önce bir klasör ve içinde hashiwokakero.py adında bir Python dosyası ile başladım. Tkinter standart yapısında bir pencere ile başlayalım.
Standart Tkinter penceresi kodu. İlk satırda tkinter kütüphanesini programımıza tk adıyla dahil ediyoruz. Sonra window adını verdiğimiz uygulama penceresini tanımlıyoruz. window.title("HASHIWOKAKERO") satırı penceremizin üst bandında yazan etiketi belirliyor. Penceremize verdiğimiz "800x650+200+10" geometri değeri pencerenin 800'e 650 piksel (genişlik 800, yükseklik 650 piksel) boyutlarında olacağını, ekrana yerleştirilirken soldan 200 piksel ve yukarıdan 10 piksel içeriye sol üst köşesi gelecek şekilde yerleştirileceğini belirtiyor.
Sonrasında pencereye yerleştireceğimiz elemanlar için (kontroller) frame adını verdiğimiz bir tkinter.Frame nesnesi tanımlıyoruz. Bu boş bir panel ve arka plan rengini gri yapıyoruz (bg="gray" opsiyonu). master=window opsiyonu ise frame nesnemizin window penceresi içine yerleştirileceğini belirtiyor. width=800 opsiyonu frame genişliğini, height=650 opsiyonu frame yüksekliğini piksel olarak belirliyor. master değerini window vermekle frame nesnemiz pencere içine yerleştirilmez, nasıl yerleşeceğine dair değişik komutlar var. Burada frame.pack() komutu ile frame nesnemizi window içine yerleştiriyoruz. Bu durumda window içine tek yerleştirilen frame olduğu için pencere frame'i tamamen saracaktır.
Son satır ise tkinter penceresinin gösterilmesi ve kullanıcı etkileşimlerini (mouse tıklama , tuş basma vs) takip etmesi için sürekli dönmesini sağlayan window.mainloop() komutu (yani ana döngü başlasın).
Bu kodu çalıştırdığımızda şöyle bir pencere açılır,
Pencereyi boyutlandırmaya kalkarsak frame nesnemizin pencere içine yerleştirilmiş ayrı bir nesne olduğunu görürüz.
Görselimize 4 tane buton ekleyip çeşitli oyun zorluklarından birinde oyunu başlatması için kullanıcıya imkan verelim. Buton yazılarında kullanılacak font'u değiştireceğimiz için ilk önce tkinter.font kütüphanesini de programa eklemek zorundayız. En üste ekleyelim
tkinter.font kütüphanesini kısaca font adıyla programa dahil ettik. Şimdi butonları ekleyebiliriz.
Butonlar master opsiyonu ile frame nesnesi içinde yerleşeceği belirtiliyor. En üstte bFont nesnesi ile butonlarda kullanılacak büyük ve koyu bir yazı belirliyoruz. size opsiyonu boyutunu , weight opsiyonu ise yazının koyuluk derecesini belirtiyor. Daha sonra butonları tanımlarken bu bFont nesnesini font opsiyonlarına değer olarak veriyoruz. Butonların text opsiyonu üzerlerinde yazmasını istediğimiz yazıyı belirtiyor. bg opsiyonu ise arka plan rengi (back ground).
Butonların boyutlandırmasını ise yerleştirirken yapıyoruz. Bu sefer pack() metodu değil place() metodu kullanarak butonları frame üzerinde istediğimiz koordinatlara yerleştiriyoruz. Aynı pencereyi ekrana yerleştirirken olduğu gibi eleman yerleştirirken de sol üst köşesinin nerede olacağını belirtiyoruz. x opsiyonu butonumuzun frame sol kenarından kaç piksel içeride olacağını , y opsiyonu da frame üst kenarından ne kadar aşağıda olacağını belirliyor. width opsiyonu butonun kaç piksel genişlik olarak yerleştirileceğini, height opsiyonu da kaç piksel yüksekliğe sahip olarak yerleştirileceğini belirliyor.
Programı çalıştırıp görelim
Pencere üst tarafına yakışıklı 4 buton geldi. Butonlar şimdilik bir iş yapmıyor, birazdan iş yapmaya başlarlar. Ama önce bir tane de oyunumuzu oynayacağımız panel yerleştirelim pencereye.
Genişliği ve yüksekliği verirken 32x10 şeklinde matematik işlem yapmamın sebebi var. 10'a 10 ya da 15'e 15 oyun panellerimiz olacak. Panelde düşündüğüm her hücre 32 x 32 piksel olursa panel nasıl görünür diye kontrol ettim. 10'a 10 panelle pencere şöyle görünüyor,
Tkinter.Button Tıklama Olayının İşlenmesi
Öncelikle buraya kadar görseli yaptık ve bundan sonra çalışma mantığına geçeceğiz. Bu noktada kodu iki parçaya ayırmak istedim. Oyunun çalışması için yazacağım metodları Funcs.py adında ayrı bir dosyada toplamaya karar verdim. İlk başta bu dosyayı ana programda import etmem gerekiyor. En başa,
Şimdi Funcs.py dosyamızı ekleyelim ve içine butonlarımız tıklanınca çalışmasını beklediğimiz metodları yazalım.
Şimdilik sadece metodların çağrıldığını görelim yeter. Ana programda buton kodlarına bu metodları çağıran opsiyonları ekleyelim
command= opsiyonu ile kısa yoldan buton tıklanması karşılığı çağrılmak istenen metodun adını yazıyoruz. Metod ismini verirken parantezler konmuyor ona dikkat edelim sadece ismini veriyoruz. Eğer parantezleri koyarsak metod çağrılır ve metoddan dönen değer command opsiyonuna değer olarak verilir. Ki bu da işe yaramaz. Şimdi çalıştırıp butonlara tıklarsak konsolda mesajları göreceğiz.
Ekşın başladı. Şimdi kafayı kaldırıp ne yapacağımızı hayal etme zamanı. Programı tasarlarken bu noktada yanlış yola bir girerseniz, çok başınız ağrır. Düşündüm taşındım, oyuna başlarken çözülecek oyunun bilgilerini dosyalardan okuyarak tahtayı çizeyim diye karar verdim. Mesela şöyle bir tahta için
Bir text dosya hazırlayayım içinde her noktanın satır , sütun numaraları ve içindeki sayı değerini her biri bir satırda virgülle ayrılmış olarak yazayım.
Satır=0 sütun=0 da içinde 2 yazan bir nokta. satır=6, sütun=7 de içinde 2 yazan bir nokta vs. Bu amaçla her zorluktan dosyalar hazırladım. Siz de dosyaları buradan indirebilirsiniz. Dosyaların hepsini maps klasörü içinde yerleştirirseniz benimle aynı yoldan gidersiniz.
İlk butonun çalışması ile başlayalım. Öncelikle map dosyası içinden bilgileri okuyup hafızada global bir array değişken içine saklayalım. Bu amaçla ReadMap() adında yeni bir metod tanımlamaya karar verdim. Nasılsa tüm butonlar aynı metodu çağıracak. Bilgileri saklamak için Map adında bir global array değişkeni tanımlayalım.
Ve şimdi verilen dosya ismindeki dosyayı açıp Map global değişkenine yazan ReadMap() metodu,
İlk satırda global Map değişkenini kullanacağımızı deklare ediyoruz. Sonra Map array içinde herhangi bir eleman varsa hepsini siliyoruz. f = open(fname, "r") satırı ile map dosyası okuma amaçlı açılıyor. Dosyanın her satırı line değişkenine tek tek okunarak döngü yapıyoruz. Satırdaki yazıyı virgülleri kullanarak split() metodu ile ayırarak her bir sayıyı sayılar array içine alıyoruz. Mesela satırda "0,2,5" yazıyorsa sayılar[0] = "0" , sayılar[1] = "2" ve sayılar[3] = "5" olacaktır.
Tabi bu değerler string değerler. Ben bu değerleri programımda hep integer sayılar olarak kullanacağım için son satırda değerleri Map değişkenine eklerken string'den integer'a çeviriyorum.
Şimdi buton metodumuzda bir örnekle çalıştıralım bunu ve görelim.
Çalıştırırsak,
İstediğimiz oldu. Global Map değişkeninde bilgilerimiz yaşıyor. Sırada oyun tablasına bu noktaları çizmek var. Tüm çizim işlerini falan Funcs.py içindeki metodlarda yapmayı düşündüğüm için buraya da tkinter kütüphanesini import etmeliyim. Dosyanın en başına şunları ekleyelim.
Bu arada oyun tablası olarak kullandığım gameFrame panelini de buton metodlarına gönderip Funcs.py içine almam gerekiyor. Bu amaçla metodları parametre ile çağırmam gerekiyor. Önce buton metodu,
Ana programdan gönderilen frame nesnesini Frame adında bir global değişkene atıyorum. Ancak hatırlarsak ana programda buton metodlarını çağırırken parantezleri kullanmamak gerekiyordu. Parametreli metod çağırabilmek için orada lambda yapısını kullanmak gerekir.
Aslında bu lambda yapısını anlatmak için olayı önce şöyle hayal edelim,
Önce parametresiz olan ama içinde parametreli olan buton metodumuzu çağıran geçici bir metod tanımlıyoruz ve sonra bu metodu butonun command= opsiyonuna rahatça yazabiliyoruz. lambda yapısı da arka planda aynen böyle bir şey yapıyor.
Sırada verilen verilerle oyun tablasını çizen DrawGrid() metodunun tanımlaması var.
Globale bir de Size değişkeni ekledik, burada da tablanın boyutunu saklayacağız. Metoda gelen frame ve size değerlerini sırayla Frame ve Size global değişkenlerine atarak başlıyoruz, lazım olacaklar ileride. Sonra frame.winfo_children() ile oyun tablası içindeki tüm kontrollerin listesini alıp hepsini yok ediyoruz. Bu metod her çağrıldığında o anki verilere göre oyun tablasını baştan çizecek.
Sırada çizmeye başlamak var ilk önce frame içini tamamen kaplayacak bir Canvas nesnesi yerleştiriyoruz. Şimdi gelelim Map değişkeni içinde bulunan verilerle tabladaki noktaları çizmeye,
Çizeceğimiz kutunun sol üst köşesini buluyoruz önce. el[1] içinde bildiğimiz gibi sütun değeri var, bunu 32 ile çarparsak frame sol kenarından kaç piksel içeride olacağımızı buluruz. el[0] içinde de satır değeri var, bunu da 32 ile çarparsak frame üst kenarından kaç piksel aşağıda olacağımızı buluruz. Tüm çalışmam boyunca x ile anılan değerlerin sütunlara y ile anılan değerlerin satırlara karşı gelmesi yüzünden sürekli kafam karıştı.
Neyse , kutu içine önce bir yuvarlak çiziyoruz. 32'ye 32 piksel bir kutu içindeyiz ve her yandan 3 piksel boşluk kalan bir daire çiziyoruz. outline= opsiyonu ile daire dış çizgisini mavi yapıyoruz. fill= opsiyonu ile daire içinin rengini beyaz olarak belirliyoruz. width= opsiyonu ile de daire dış çizgi genişliğini 3 piksel yapıyoruz.
Sonrasında create_text() metodu ile daire ortasına gelecek şekilde sayıyı yazıyoruz. Burada yeni olan şey font= opsiyonuna nasıl değer verildiği. Buton yazılarında boşuna mı font nesnesi ürettik acaba? Bu şekil de yazılabiliyormuş.
Şimdi buton metodundan DrawGrid() metodumuzu çağıralım da çizdiğini görelim.
Çalıştıralım
Yaşasın, mutlu son. Şimdi diğer butonlar için de aynısını yapalım. Önce ana programdan command= opsiyonları,
Şimdi de buton metodları, tabi hepsi kendi dosyalarına göre.
Bütün butonları test edip oyun tablalarının çizildiğini görelim.
Sırada noktalar arasındaki köprü çizgilerinin çizilmesi var. Yine plan zamanı.
Tkinter.Canvas Üzerine Çizgilerin Çizilmesi
Oyun oynama şekli olarak bir yerde gördüğümü yapacağım. Noktalardan biri üzerinde mouse basar ve nokta dışına sürüklerseniz o yönde bir çizgi çiziyordu. Çok hızlı çalışan bir etkileşim olduğu için beğendim ve bunu uygulamaya karar verdim. Peki bu şekilde üreteceğim çizgileri veri olarak nasıl saklamalıyım. Her bir çizgiyi 5 elemandan oluşan bir array içine koymaya karar verdim. Elemanlar şu bilgileri saklayacak:
- line[0] : Çizginin başladığı satır
- line[1] : Çizginin başladığı sütun
- line[2] : Çizginin hangi yöne çizileceği, 0: Kuzey, 1:Doğu, 2: Güney, 3: Batı
- line[3] : Çizginin uzunluğu (satır ya da sütun olarak)
- line[4] : Kaç çizgi var. Bildiğimiz üzere Hashiwokakero köprülerinde 1 ya da 2 çizgi olabilir sadece.
Örnek olarak 10 x 10 Kolay tablamıza bakalım ve burada çizgiler hayal edelim.
- 1 nolu çizgi satır 2 , sütun 1 den başlıyor. Satır ve sütun sayıları sıfırdan başlıyor unutmayalım. Sağa yani Doğu'ya gidiyor, 7 sütun uzunlukta ve tek çizgi. Bunun için saklanan veri [2, 1, 1, 7, 1] olacaktır.
- 2 nolu çizgi satır 4 , sütun 3'ten başlıyor , Batı'ya doğru , 2 sütun uzunlukta ve 2 çizgili. Bunun veri olarak ifadesi de [4, 3, 3, 2, 2] olacaktır.
- 3 nolu çizgi satır 7, sütun 7'den başlıyor, Güney'e doğru , 2 satır uzunlukta ve 2 çizgili. Bu da veri olarak [7, 7, 2, 2, 2] olacaktır.
- 4 nolu çizgi satır 7, sütun 9'dan başlıyor , Kuzey'e doğru , 3 satır uzunlukta ve tek çizgili. Veri olarak karşılığı [7, 9, 0, 3, 1] olacaktır.
Bu bilgileri Lines adında global bir değişken içinde test verisi olarak saklayalım. Bu işi ReadMap metodu içinde yapalım.
Önce eskiden kalan bir veri olmasın diye clear() metodu ile array içindeki bilgileri sıfırlıyoruz. Daha sonra örnek çizgi bilgilerimizi append() metodu ile ekliyoruz. Sırada ReadMap() metodumuzdan sonra çağrılan DrawGrid() metodunda bu bilgilere göre çizgileri Canvas nesnesine ekleyecek kodlar var.
Önce en başta global Lines değişkenini kullanacağımızı ekliyoruz. Noktaların çizimi bittiği yerden bir döngü ile çizgilerin çizimini ekleyeceğiz. Çizginin başladığı koordinatlar soldan x1 kadar içerde ve yukarıdan y1 kadar içeride olacak. Benzer şekilde çizginin bittiği noktanın koordinatlarını da x2 ve y2 değişkenleri ile ifade edeceğiz. Karşılaştırmalarda ise yön bilgisine göre x1, x2, y1, y2 değerleri hesaplanıyor.
Örneğin Kuzeye giden çizgi için [7, 9, 0, 3, 1]9 verisi var.. Sütun sayısı çarpı 32 kutunun sol kenarı çizgi dikey olacağından kutunun ortasında olması için üstüne 16 ekliyoruz. x1 ve x2 değerleri dikey çizgi olacağından aynı olacaktır. Çizgi yukarı kenardan satır sayısı çarpı 32 aşağıdaki kutuda olacak ama bu değer kutunun üst kenarı, alt kenarından başlamak için bu değere bir 32 daha eklemek gerekir. Kodda 34 ekleniyor çünkü yuvarlağın kenarından başlaması için çizgiyi 2 piksel daha aşağıdan başlatmak lazım bu değer y1. Uzunluk 3 kutu olduğuna göre ve yukarı doğru gidileceği için y1 değerinden 3 çarpı 32 yukarı gideceğiz. Yine tam daire kenarından başlasın diye çizgiyi 3 piksel daha yukarıda bitiriyoruz.
En altta sadece tek çizgi olanlar için kod yazdım çünkü 2 çizgi olunca bir takla daha atmak ve çizgileri tam ortadan değil aralarında açıklık bırakarak çizmek gerekiyor.
İkinci tek çizgilik değer [2, 1, 1, 7, 1] değeri.. Doğuya giden bir çizgi. Çizginin başı sol taraftan sütun sayısı çarpı 32 kadar içerde olacak. Yine daire kenarına yapışsın diye değerden 1 çıkardım bu değer x1. Bu çıkarma ve eklemeler tabiki kodu çalıştırınca gördüğüm boşlukları yok etmek için sonradan kondu. x2 değeri ise x1 değerinden uzunluk çarpı 32 kadar sonra, çizginin bitiş noktası olacak. Ona da 3 ekleyerek daire kenarına yapışmasını sağladım. Yatay çizgi olduğu için y değerleri aynı olacak. Üst kenardan satır sayısı çarpı 32 aşağıda kutunun üstü var ortasına gelmek için 16 daha eklemeliyiz.
Sadece tek çizgileri çizeceği iin programı bu haliyle çalıştırırsak 10 x 10 Kolay butonu tıklayınca şöyle görünecektir.
Sıra geldi çift çizgilere. Bu amaçla yazdığım kodu vereyim önce.
xDelta yatay olarak sağa-sola kayma miktarı ve yDelta dikey olarak yukarı-aşağı kayma miktarı. Çizgi dikeyse yatay olarak kaymalar olacak, yataysa dikey olarak kaymalar olacak. Kodda görüldüğü üzere ortadan 4 piksel kaydırma yaptım. En son 2 satırda ise bu kayma değerlerini artı ve eksi alarak 2 çizgiyi tablaya ekledim. Şimdi çalıştırırsak çift çizgili olan köprüler de görünecektir.
Al sana bir mutlu son daha. Bir şeyler çıkmaya başladı.
Tkinter.Canvas Üzerinde Mouse Hareketi Algılama
Şunu düşündüğümü söylemiştim: Diyelim bir noktadan sağa doğru çizgi çizmesini istiyorum. Noktanın üzerinde mousa basarım, basılı şekilde sürükler sağa doğru nokta dışında bir yerde bırakırım. Program sağa doğru bir çizgi çizmek istediğimi anlar.
Bu eylemleri yaptığını nasıl anlarım? Mouse düğmesine basıldığı andaki koordinatları alırım, sonra da bıraktığı andaki koordinatları alırım. Bunları analiz ederek hareket edilmiş mi, edildiyse ne yöne gidilmiş hesaplayabilirim. Burada bizim için önemli 2 an var. Düğmeye basıldığı an ve düğmenin bırakıldığı an. Sol mouse düğmesine basılan an Tkinter olaylarında <Button-1> olayı olarak isimlendirilir, Düğmenin bırakıldığı an ise <ButtonRelease-1> olayıdır. Tüm Canvas çizimi üzerinde algılamayı yapacağımız için bu olayları Canvas nesnemize tanımlamamız gerekiyor.
bind() metodu kontrollerimizi olay metodlarına bağlamak için kullanılır. pPressed() ve pReleased() metodlarımızı henüz tanımlamadık. Onlara da şimdilik sadece çalışmayı görmek için bir şeyler yazalım.
bind() metodu ile bağlanan olay metodlarının bir parametre alması gerekiyor. Bu parametreye biz olay adını verdik çünkü bu parametre üzerinden bize gerçekleşen olay ile ilgili bilgiler geliyor. Bu kadarıyla test edersek , oyun tablası üzerinde mouse sol butonu tıkladığımızda "Basıldı", buton bırakılınca da "Bırakıldı" mesajları konsola yazılacaktır. Tabla dışında metodlar çalışmaz çünkü Canvas nesnesine bağlandılar.
İlk işimiz butona basılan ve butonun bırakıldığı koordinatları kaydetmek.
Global StartX, StartY, EndX, EndY değişkenlerine olayların gerçekleştiği anlardaki mouse koordinatlarını kaydediyoruz.Aslında End'lere gerek yoktu global olsun. Çünkü büyük ihtimal pReleased() metodu içinde işimiz bitecek ve dışarıda lazım olmayacak. Neyse devam edelim. olay parametresi ile sistemin bize gönderdiği bilgi işimize yarıyor. olay nesnesi x özelliği o anda mouse pointerin x koordinatını y özelliği de y kordinatını saklıyor. Çalıştırırsak konsola şuna benzer bir şeyler yazacak,
Gelen bilgiler piksel olarak değerler. Bizim pek işimize yaramaz , bunlara karşı gelen satır-sütun bilgileri bizim Map tablosu verileriyle çalışırken kullanabileceğimiz veriler. pReleased() metodumuza devam etmeden önce bize verilen piksel değerleri satır-sütun değerlere dönüştüren bir getRowCol() metodu tanımlayalım.
Tamsayı olarak verilen piksel değerleri 32'ye bölerek elde ettiğimiz satır ve sütun değerlerini bir veri çifti olarak metoddan geri döndürüyoruz.
Şimdi bir daha toplayalım. Olay noktalarını satır sütuna dönüştürüp, ilk önce başlangıç noktası oyun tablası üzerinde içinde sayı olan noktalardan biri mi? onu bileceğiz. Sonra da hareketin yönüne göre çizgi çizilmesi taleplerinde bulunacağız. Çizgi talep edilmesi yeterli değil, acaba başka bir çizgi ile kesişiyor mu? ya da çizeceğimiz yönde gidebileceğimiz başka bir nokta var mı?
Biz pReleased() metodundan sadece çizgi çizilmesi taleplerini çıkaralım, ötesini başka metodlar içinde yaparız.
deltaX içinde eylemin bittiği andaki sütun değerinden başladığı andaki sütun değerini çıkararak yatay olarak oyun tablasında kaç kutu hareket yapıldığını buluyoruz. Bu değer artı ise sağa doğru, eksi ise sola doğru gidilmiştir. deltaY içinde de dikey olarak kaç kutu hareket edildiğini buluyoruz. Bu değerde artı ise aşağıya , eksi ise yukarıya gidilmiştir.
m for m in Map if ... satırı Python ile böyle kısacık ama başka dillerde aynı şey için baya bir takla atmak gerekiyor. Şunu demek oluyor, m değişkeni olsun ve bu m içine Map içindeki tüm nokta bilgileri teker teker alınsın ve eğer m[1] yani noktanın sütun değeri start kutusu sütun değeri ile aynıysa ve m[0] yani noktanın satır değeri start kutusu satır değeri ile aynıysa o nokta bilgisini dışarı ver. if sonrası verilen kritere uyan tüm noktalar bir array içinde p değişkenine yazılacaktır. Tabi ki tam bir eşitlik istediğimiz için eğer başlangıç noktasında Map içinde bir nokta varsa o noktayı içeren tek bir değer olan array dönecektir. if p: ise eğer sonuçta bir şey gelmişse yani başlangıç kutusunda bir nokta tanımlıysa altındaki bloğu çalıştıracaktır.
Şimdi çalıştıralım ve görelim
Sadece mouse butonu tıkladığımızda altında bir nokta varsa değer gelecek, başka boş bir yerde tıklarsak değer gelmeyecektir. Şimdi hareketin ne yönde yapıldığına bakalım.
Eğer büyüklük olarak (mutlak değer) deltaX değeri deltaY değerinden büyükse yatay bir hareket yapılmış demektir. Eğer deltaY mutlak değeri deltaX mutlak değerinden büyükse dikey olarak hareket yapılmış demektir. Yatay ve deltaX sıfırdan büyükse sağa doğru hareket edilmiştir, küçükse sola doğru hareket edilmiştir. Dikey ve deltaY değeri sıfırdan büyükse aşağıya doğru hareket edilmiştir küçükse yukarıya doğru hareket edilmiştir. Çalıştırıp her yönü bir test edelim.
Buraya kadar geldiyseniz sizin de baya bu programı yapmaya niyetiniz var demektir, hem tebrik hem teşekkür ederim.
Mouse Hareketlerine Göre Çizgi Eklenmesi
Çizgileri çizen rutinler bu uygulamanın en karmaşık rutinleri. Bu rutinler aslında çizgi çizmeyecek Lines array üzerindeki verilerle oynayacak, çizgileri zaten DrawGrid() metodu çiziyor. Verilerde gereken oynamaları yapıp DrawGrid() metodunu çağırırız olur biter. Dört yöne çizgi çizmek için 4 metod hazırlıyoruz
İsimlerin harf sırasına göre sıraladım. Metodlar çizginin başlangıç noktası olan kutunun satır ve sütun numaralarını parametre olarak alıyor (sırasıyla row ve col). Dikkat edilmesi gereken nokta çizginin başladığı kutunun satır ve sütun değerleri, başlangıcın dayandığı Map noktasının değil. Şimdi istekleri bu metodlara yönlendirelim.
Sağa çizgi için row değeri Map noktasının satır değeri ama col değeri Map noktası sütun değerinden bir fazlası çünkü çizgi sağ tarafından başlayacak. Sola çizerken de sütun değerinin bir eksiği veriliyor çünkü çizgi soldaki kutudan başlayacak. Benzer şekilde aşağı çizerken Map noktası satır değerinin bir fazlası, yukarı çizerken bir eksiği veriliyor.
En üstteki metoddan başlayalım, LineToDown(). Olasılıkların kolay olanından başlayalım. Eğer aynı yerde zaten bir çizgi varsa. Bunu deneyebilmek için Lines array test değerlerini şöyle değiştirelim.
Çizgilerin ikisi de dikey ama biri aşağıya doğru diğeri yukarıya doğru çizilmiş. Bunların her ikisi de bizim için aynı şeyi ifade edecek. Orada bir çizgi var!. Çalıştırırsak tablamız şöyle görünecek,
Bir çizgi varsa ve tek çizgiyse çift çizgi olacak ama çift çizgiyse de oradan silinecek. LineToDown() metodumuzu şöyle düzenleyelim.
Yine yakışıklı bir i for i in Lines if... sorgu satırı. Çizgilerin içinden aynı row ve col değerlerinde başlangıç noktası olan ve aşağı doğru yönü olanları yani tam çizmek istenilen çizgi ile aynı veriye sahip olanları buluyor. Bir de yukarıya doğru olan ama bittiği nokta bizim başlangıç noktanız olan çizgileri buluyor. Bu tersine olan çizgileri nasıl buluyor, çizgi aynı sütunda olacak ve yönü yukarı olacak ama başlangıç noktası çizgi boyu kadar aşağıda olacak. Niye -1 var? Sağdaki çizgiye bakalım, row değerimiz 1 ve baktığımız çizginin uzunluğu 3 kutu. row ve uzunluğu toplarsak 4 ediyor ama bizim çizgi 3 değerli satırdan başlıyor. Şimdi programı çalıştırırsak örnekte soldaki ve sağdaki çizgiler için şu şekilde line değerleri oluşacaktır:
Aynı daha önce Map değerlerinde sorgularken olduğu gibi array içinde array olarak geliyor değerler. Bu yüzden çizgimizin değerleri line[0] elemanı içinde array olarak duruyor. Bu yüzden if line[0][4] == 1: şeklinde sorguluyoruz. Eğer 1 çizgi varsa onu 2 çizgi yapıyoruz , yok 2 çizgi varsa onu da Lines array içinden siliyoruz. Programı bu haliyle çalıştırırsak çizgilerin üstündeki noktalardan aşağı doğru mouse'u sürükleyip bıraktığımızda , ilkinde tek olan çizgi çift olacak ikinciye yaparsak çizgi yok olacaktır. Tabi ki biz burada Lines içinde çizgi değerleri ile oynuyoruz. Çizgilerin çizilmesi ya da silinmesi için DrawGrid() metodunu çağırmamız gerekir. Bu metodu çağırırken de daha önce globale attığımız değerleriyle Frame ve Size değişkenlerini kullanıyoruz.
Sırada yeni çizgi eklenmesi var. Eğer gitmek istediğimiz yönde çizgi yoksa yeni çizgi ekleyeceğiz. Ama bazı koşullar var. Öncelikle gitmek istediğimiz yönde gidilebilecek bir nokta var mı kontrol edip çizgiyi o noktaya kadar çizeceğiz. Ama bunu yaparken de yolumuz üzerinde başka çizgi ile kesişme olup olmadığını kontrol etmemiz gerekiyor. Bu işler baya bir sancılı olacak. Bir yerden başlamak lazım, sanki kesişme yokmuş gibi sadece karşıda bir nokta varsa oraya çizgi çizelim.
Sütun değeri col değeri ile aynı olan ve satır değeri row değerinden büyük olan yani aşağıda aynı sütunda olan tüm noktaları m for m in Map if... satırı ile topluyoruz. sorted(p, key= lambda x: x[0]) komutu ile elde ettiğimiz array içinde array değerleri sıfırıncı eleman değerine göre sıralanır yani satır değerine göre. Böylece en başta bize en yakın nokta değerleri olacaktır, şimdi o noktaya çizgi ekleyeceğiz. row ve col zaten çizgimizin başlama koordinatları. Aşağı doğru gideceğimiz için yön değerini 2 giriyoruz. Çizgimizin uzunluğu karşı noktanın satır değerinden row değerini çıkarınca bulunuyor. En son da çizgi yeni eklendiği için çizgi adeti olarak 1 giriyoruz.
Şimdi bunu çalıştırıp değişik noktalarda test edip deneyelim.
Gördüğümüz üzere çizgi tek olarak ekleniyor, bir daha istersek çift oluyor ve bir daha istersek siliniyor.
Sıra geldi kesişen çizgi var mı kontrol etmeye. Lines içinde bizim çizgimizi kesecek koordinatlarda başka çizgi var mı bakalım. Öncelikle test için bir yatay çizgi ekleyelim.
Bu çizgiyle kesişen bir dikey çizgi çizmeye kalkarsak üstüne çizecektir.
Aşağıya doğru çizilecek bir çizgiyle kesişme ihtimali olan mevcut çizgileri şu sorgu ile buluruz.
Yatay kesişen çizgi sağdan sola olabilir ya da soldan sağa olabilir. Sorgu ifadesinin son satırı her iki durum için ortak:
i[0] >= row and i[0] < p[0][0]
Yani Kesişecek olan bir çizginin bulunduğu satır (i[0]) çizginin başladığı yukarıdaki kutunun satır değerinden (row) büyük ya da eşit olur. Ayrıca yine kesişecek çizginin bulunduğu satır, aşağıya doğru çizeceğimiz çizginin hedefindeki noktanın satır değerinden (p[0][0]) daha yukarıda olmalıdır, yani küçük olmalıdır. Böylece mevcut kesişecek çizgilerin satır değerlerine ait kriterimizi belirledik.
Sırada çizmek istediğimiz çizginin sütun değeri, kesişecek çizgilerin başlama ve bitiş sütun değerleri arasında olur ifadesi var. İlk karşılaştırma
Kesişecek çizginin yönü (i[2]) sağa doğru, yani 1 ise ve çizginin başladığı sütun (i[1]) çizeceğimiz çizginin sütunu olan col'dan küçük ya da en fazla eşit olmalı ve kesişen çizginin bittiği sütun (i[1]+i[3]-1) da col değerinden büyük olmalı ya da en azından eşit olmalı.
İkinci karşılaştırma da sola doğru çizilmiş çizgiler içinde arıyor.
Kesişecek çizgi yönü (i[2]) sola doğru yani 3 olmalı ve kesişecek çizginin başladığı nokta sütun değeri (i[1]) çizeceğimiz çizgi sütun değeri olan col'dan büyük olmalı ya da en azından eşit olmalı ve çizginin bittiği sütun (i[1]-i[3]+1) değeri de col değerinden küçük ya da en fazla eşit olmalı.
En sonda da eğer kesişen çizgi sorgusundan hiç bir çizgi verisi gelmemişse yeni çizgiyi ekliyoruz.
Aşağıya doğru çizgi isteğini işleyen metod burada bitiyor. Şimdi diğer 3 yön için de benzer mantıklarla çalışan kodları veriyorum. Her birini tek tek inceleyin ve bir hata varsa bana bildirin lütfen.
Bu sola çizme metodu, sadece aşağı ve sola çizerek de oyunu oynayabilirsiniz. Baya bir ortaya çıkmaya başladı.
Sağa doğru çizgi talebini işleyen metod ve son olarak
Yukarıya doğru çizgi talebini işleyen metod. Hadi şu test verisini de silip oyunumuzu bir oynayalım.
10 x 10 Kolay butonu ile açtığımız tablanın çözülmüş hali şöyle
İyi de ben oyunun bittiğini tek tek kontrol mü edeceğim?
Hashiwokakero Oyunun Bittiğini Görmek
Oyun tablasında her bir noktayı çizerken o noktaya bağlı çizgi sayısını bulalım ve bağlı çizgi sayısı o nokta içinde yazan sayıya eşitse nokta içini yeşil renk yapalım. Bunu yapacağımız yer DrawGrid() metodu da , ben bu metod içinde verilen verilerle çizim yapılsın istiyorum bu kontroller falan dışında kalsın istiyorum. Bu durumda Map verilerine her nokta için bir de renk değeri eklemem gerekiyor.
Başlangıçta bunları dosyadan okumama gerek yok en başta hepsi beyaz olacak. Bu yüzden her nokta için beyaz renk olacağını ReadMap() metodundaki döngü içinde yapsam olur.
Bu yeni veri bilgisine göre DrawGrid() metoduna da arka plan rengini değişken yapan modifikasyonun yapalım.
Şimdi mesela ReadMap() içinde
Yazarsak ilk başta tüm noktalar yeşil olarak çizilir. Neyse biz şimdi bir noktanın bağlı çizgilerinin sayısına göre yeşil mi beyaz mı olacağını belirleyen bir metod yazalım.
Noktaya bağlı olabilecek 4 tane noktadan giden ve 4 tane de noktaya gelen olmak üzere 8 kriterde çizgi olabilir. Bunların hepsinin verilerini clines adında bir değişkende topluyoruz. Sonra da bu çizgilerde verilen çizgi sayısı bilgilerini toplayarak totallines değerini buluyoruz. Eğer toplam bağlı çizgi sayısı metoda gönderilen num sayısına eşitse metod True değer dönüyor, eşit değilse False değer dönüyor.
Bu metodu DrawGrid() metodu içinde noktaları çizerken her noktanın rengini belirlemekte kullanabiliriz.
Artık oyunu deneyebiliriz. Aşağıda bitime çeyrek kala bir oyun tablası görünüyor.
Python PyGame ile Oyunu Seslendirmek
Bu oyunun biraz sese ihtiyacı var çok sessiz. Çizgi çizerken ya da silerken , oyuna başlarken veya bittiğinde sesler çıkarsın. Bu amaçla bazı sesleri kaydedip sounds adında bir klasör içine koydum. Bu ses dosyalarını şu bağlantıyı kullanarak indirebilirsiniz.
Python ile mp3 dosyası oynatmak için bir sürü kütüphane var ama ben en kolay ve sağlıklı olarak pygame.mixer kullanmaya karar verdim. Bu arada içimden bir ses "yahu madem pygame kullanacaktın niye oyunu pygame ile yazmadın" deyip duruyor.
İlk önce Funcs.py dosyamızın en başında pygame kütüphanesini import edelim.
Funcs.py ilk yüklendiğinde de pygame.mixer'i başlatıyoruz
İlk sesimiz oyun tablosunu yüklediğimizde olsun. ReadMap() metoduna ilave yapalım.
Yeni çizgi eklenirken ya da tek çizgi yerine çift çizgi yapılırken addline.mp3 dosyasını oynatacağız. 4 yönden sadece birinde eklenmesini burada göstereceğim. Diğer yönleri de siz toparlarsınız.
Çizgi silinirken boom.mp3 dosyasını oynatalım patlasın gitsin.
Geriye bir tek victory.mp3 dosyası kaldı. Tüm noktalar yeşil olduğunda da onu oynatacağız.
DrawGrid() metodu başında finished adında bir değişkene önce True değeri veriyoruz. Ama sonra noktaları çizerken bir tane bile nokta yeşil değilse finished değeri False yapılıyor. Metodun en sonunda da bu değer hala True ise tüm noktalar yeşil olmuş demektir, sesi çalabiliriz.
Seslerimiz de tamam. Oyunumuzu sesli oynayabiliriz.
Oyun Tablasını Kullanıcıya Seçtirmek
Şimdiye kadar hep sabit dosya ismi verdik. Orada bir sürü tabla bilgisi var Butona basınca ilgili sınıfa ait dosyalardan kullanıcı istediğini seçerek başlasın dersek,
İlk önce Tkinter'in filedialog modülünü de programa dahil etmeliyiz. Fıncs.py dosyası en başa import satırımızı ekleyelim.
Butona tıklanınca dosya açma penceresi aktif etmek için buton koduna şöyle ilave yapmalıyız.
Bana bu kadarı yetti. Şimdi internetten oyunuma uygun haritaları bulup bilgilerini .map dosyalara yazıyorum sonra da oynuyorum.
Daha çok şey yapılabilir, süreler tutulabilir, rekor tabloları oluşturulabilir, kullanıcının tabloları veri olarak değil de görsel olarak girmesi sağlanabilir vs. Tüm bunlar sizin ufkunuza kalmış artık.
Bu yazı da şükürler olsun bitti. Birazcık bilgilerinize ekleme yapabildiysem ne mutlu bana. Sonraki yazılarda görüşmek üzere , kalın sağlıcakla..
Hiç yorum yok:
Yorum Gönder