Öncelikle web sayfasındaki tüm etiketlerin arkaplan renklerini silelim. Silme işlemi yerine ilgili satırları açıklama satırı olarak düzenleyebilirsiniz. Daha sonra bu satırlar işimize yarayabilir. Projeyi çalıştırıp sonucu görelim.

Pano kutusunun arkaplan rengini cyan yapalım. Hücrelerin görünürlüklerini none yapalım. Hücreye girilen değerler ile renk ve boyut işlemlerini açıklama satırı haline getirelim. Kod kısmında hücreye değer girme işlemini de açıklama satırı haline getirelim.

panel kutusunun içine gelelim. Bu kutunun içine 1 adet Button ekleyelim. Bu etiketin özelliklerini aşağıdaki gibi değiştirelim. Butonun Özellikleri: İsmi = "btnYeni" Arkaplan rengi = Mavi Kenar çizgisi = Tek çizgi Kenar kalınlığı = 1 Kenar rengi = Mavi İmleç = El işareti Yazı rengi = Beyaz Genişlik = 90 Yükseklik = 40 Metni = Yeni Yukarıdan = 25 Soldan = 5 Hizalama = Ortala Projeyi çalıştırıp sonucu görelim.

panel kutusunun içine 1 adet Button daha ekleyelim. Bu etiketin özelliklerini aşağıdaki gibi değiştirelim. Butonun Özellikleri: İsmi = "btnDurdur" Arkaplan rengi = Mavi Kenar çizgisi = Tek çizgi Kenar kalınlığı = 1 Kenar rengi = Mavi İmleç = El işareti Yazı rengi = Beyaz Genişlik = 90 Yükseklik = 40 Metni = Durdur Yukarıdan = 25 Soldan = 5 Hizalama = Ortala Erişim İzni = Yok Projeyi çalıştırıp sonucu görelim.

panel kutusunun içine 1 adet Button daha ekleyelim. Bu etiketin özelliklerini aşağıdaki gibi değiştirelim. Butonun Özellikleri: İsmi = "btnDevam" Arkaplan rengi = Mavi Kenar çizgisi = Tek çizgi Kenar kalınlığı = 1 Kenar rengi = Mavi İmleç = El işareti Yazı rengi = Beyaz Genişlik = 90 Yükseklik = 40 Metni = Devam Yukarıdan = 25 Soldan = 5 Hizalama = Ortala Erişim İzni = Yok Projeyi çalıştırıp sonucu görelim.

panel kutusunun içine 1 adet Button daha ekleyelim. Bu etiketin özelliklerini aşağıdaki gibi değiştirelim. Butonun Özellikleri: İsmi = "btnExit" Arkaplan rengi = Mavi Kenar çizgisi = Tek çizgi Kenar kalınlığı = 1 Kenar rengi = Mavi İmleç = El işareti Yazı rengi = Beyaz Genişlik = 90 Yükseklik = 40 Metni = Çıkış Yukarıdan = 25 Soldan = 5 Hizalama = Ortala Erişim İzni = Yok Projeyi çalıştırıp sonucu görelim.

panel kutusunda butonların altına 1 adet Label ekleyelim. Bu label içine "Seviye 1" yazısı gelecektir. Burada dikkat ettiyseniz "Seviye" kelimesi sabit, "1" sayısı ise sürekli değişecektir. Sabit olan değeri label ile dinamik olan değeri ise span ile kontrol edelim. Bu labelin özelliklerini aşağıdaki gibi değiştirelim. Label'in Özellikleri: İsmi = "lblSeviye" Arkaplan rengi = Kırmızı Kenar çizgisi = Tek çizgi Kenar kalınlığı = 1 Kenar rengi = Kırmızı Yazı rengi = Beyaz Genişlik = 90 Yükseklik = 35 Metni = Seviye Yukarıdan = 25 Soldan = 5 Labek içindeki spanın özelliklerini verelim. İsmi = "spnSeviye" Arkaplan rengi = Beyaz Yazı rengi = Siyah Metni = 1 Projeyi çalıştırıp sonucu görelim.

panel kutusunda labelin altına 1 adet Label ekleyelim. Bu label içine "Puan : 0" yazısı gelecektir. Burada dikkat ettiyseniz "Puan" kelimesi sabit, "0" sayısı ise sürekli değişecektir. Sabit olan değeri label ile dinamik olan değeri ise span ile kontrol edelim. Bu labelin özelliklerini aşağıdaki gibi değiştirelim. Label'in Özellikleri: İsmi = "lblPuan" Arkaplan rengi = Kavun rengi Kenar çizgisi = Tek çizgi Kenar kalınlığı = 1 Kenar rengi = Kavun rengi Yazı rengi = Siyah Genişlik = 90 Yükseklik = 35 Metni = Puan : Yukarıdan = 25 Soldan = 5 Labek içindeki spanın özelliklerini verelim. İsmi = "spnSeviye" Arkaplan rengi = Beyaz Yazı rengi = Siyah Metni = 1 Projeyi çalıştırıp sonucu görelim.

Burada mouse buton üzerine gelince mouse işareti ele dönüşüyor. Tabii butonun erişilebilir olması gerekir. Şimdi programı kaydedelim ve yeni eklediğimiz nesneleri web sayfası üzerinde görelim. Mouse; arka plan renkleri mavi olan(butonun aktif olduğunu göstermek için) Yeni ve Çıkış üzerine gelince el şeklini alıyor. Arka plan renkleri soluk mavi olan(butonun pasif olduğunu göstermek için) Durdur ve Devam butonları üzerine gelince herhangi bir değişiklik olmuyor. Bu da bize hangi tuşların aktif ya da pasif olduğunu diğer bir deyişle hangi tuşları tıklayıp tıklayamayacağımızda bize görsel olarak yardımcı olmaktadır. Butonların bu aktiflik yada pasiflik halleri ileride oyunun aşamaları sürecinde zaman zaman yer değiştirecektir. Bunu ileride göreceğiz.

Şu ana kadar hiç kod yazmadık. Şimdi timeline olayının kontrolü için timer() isminde bir metod yazalım. Bu fonksiyon oyun programlarının vazgeçilmez nesnesidir. Timer nesnesi; belli bir program kod bloğunun süresi bizce ayarlanan belli aralıklarla tekrar etmesini ve animasyon dediğimiz hareketin ya da canlandırma efektinin oluşmasını sağlar.

Oluşturduğumuz tuşlara yavaştan yavaştan program kodları eklemeye başlayalım. Web sayfasında btnYeni isimli tuşun click olayını tanımlayalım. Bu fonksiyon ile şunları yapacağız. Timeline çalıştırılacak Yeni butonu pasif olacak Durdur butonu aktif olacak

Şimdi de DURDUR tuşunun kodlarını yazalım. btnDurdur fonksiyonunun click olayını yazalım. Bu metodla şu işlemleri gerçekleştireceğiz. Timeline zaman aralığını durdurma Devam butonunu aktif yapma Durdur butonunu pasif yapma

Aynı şekilde DEVAM tuşuna ait click olayını düzenleyelim. Bu metod ile şunları yapacağız. Timeline zaman aralığını devam ettirme Devam butonunu pasif yapma Durdur butonunu aktif yapma

Son olarak ÇIKIŞ tuşunun yordamını yazalım. Bu tuş yardımıyla oyunu yeniden başlatabilirsiniz. Click olayıyla şu işlemleri gerçekleştirmeliyiz. Timeline sıfırlama Yeni tuşunu aktif etme Devam tuşunu pasif etme Durdur tuşunu pasip etme Çıkış tuşunu pasif etme

Asıl Tetris kodlarına geçmeden önce tetris oyununun çalışma mantığını anlatabilmek için küçük bir test kodu hazırlayıp bunun üzerinden bu mantığı anlatacağız. Daha sonra bu test kodlarını silip asıl programımızın kodlarını yazmaya geçeceğiz. Birinci makalemizde tetris karelerinin içinde kare indislerini fikir edinmeniz için gösteren addition.html(say); kodunu, yazının rengini belirleyen color: white; kodunu ve karelerin arkaplan rengini belirleyen background-color: blue; kodunu daha sonra silebilirsiniz demiştim. Testte bunlara ihtiyaç var. Silmemişseniz sorun yok. Silmişseniz onları tekrar eski yerlerine ekleyebilirsiniz. Aslında bu tip deneme kodlarını silmek yerine kodun önüne "//" koyarsak javascript o satırda o işaretten sonraki yazılanları dikkate almıyor. Onları açıklama yazısı olarak algılıyor. Yine kare labellerinin oluşturulduğu o kodda karelerin görülmesini engeleyen kod display: none; idi. None değerini block yapalım ve tüm kareleri indisleri ile görünür hale getirelim. Programı çalıştırıp tetris panosunu inceleyelim. Örneğin Kare5'e bakalım. Kare5 bir alta indiğinde Kare15 oluyor. O da bir alta inerse Kare25 oluyor. Yani inişte indisler 10'ar artıyor. Yine kare5 bir sola gittiğinde Kare4 oluyor sağa gittiğinde Kare6 oluyor. Yani indisler sola giderken 1'er azalıyor sağa giderken 1'er artıyor. Kare5'in aşağı inme animasyonunu sağlamak için onu önce görünmez yapacağız. Sonra indisini 10 artırıp görünür hale getireceğiz. Böylece Kare5 bir aşağı inmiş olacak ve bu böyle devam edecek. Sağ veya sola gitmesi için de indisini 1 artırcağız yada 1 azaltacağız. Şimdi Kare5'in iniş animasyonunu yapalım. Bu karenin arkaplan rengini kırmızı yapalım. Gerekli test kodlarını btnYeni butonunun click olayının en üstüne yazalım.

Şimdi de timer yordamına şunları yazalım. Bu koda biraz bakalım. Kod 1000 milisaniye sonra kare5'in kırmızı rengini mavi yapıyor. Hemen peşinden indisi 10 artırıyor ve Kare15'in rengi kırmızı oluyor. 1000 milisaniye sonra bu iş Kare15'in başına geliyor. Böylece iniş animasyonumuzu oluşturmuş oluyoruz.

Şimdi çayınızı yudumlayın. Arkanıza yaslanın. Elinizi mouse uzatıp programı kaydedin ve çalıştırın. Bu anlatılanları görsel olarak izleyin. Bakalım neler göreceksiniz. Bir dahaki yazımızda görüşmek üzere hoşçakalın.

Verilen adımlara göre oluşturulan web sayfasının görünümü:

Tetris Oyumu Yapımı 2