Öncelikle Kare205 olmaması için aşağıdaki kontrolü timer1.Tick yordamındaki test kodunun başına ekleyelim.

Projeyi kaydedip çalıştıralım. Artık alt satıra geldiğinde hata vermeyecektir. Ancak ikinci şekil geidğinide birinci şeklin üstünde durması gerekirken. yeni şekil eski şeklin yerine geçmektedir. Halbuki ilgili karenin dolu olup olmadığı kontrol edilmelidir. Aşağıdaki kodları timer1.Tick olayına ekleyelim.

Projeyi kaydedip çalıştıralım. Dikkat ettiyseniz bir alt karede şekil varsa aşağıya doğru gelen şekil onun üstünde durmaktadır. Ancak sahne şekil ile dolmasına rağmen oyun hala devam etmektedir. Halbuki oyunun bitmesi gerekir. Aşağıdaki kodları timer1.Tick olayına ekleyelim. Projeyi çalıştırıp sonucu görelim.

Projeyi kaydedip çalıştıralım. İlk koşul karenin tabana gelişini kontrol ediyor. Şekil tabana gelince say değişkenini tekrar 5 yapınca Kare5'i tekrar seçmiş oluyoruz. Kare5'in rengini kırmızı yapıyoruz. Böylece şekil tabana inince yukarıdan tekrar yeni bir şekil inmeye başlamış oluyor. İkinci koşul ise panonun dolup dolmadığını kontrol ediyor. Eğer hem Kare5 hem de Kare15 kırmızı ise pano dolmuştur. O halde oyunu bitirmeliyiz. Hemen timer1.stop yapıyoruz. Peşinden "Oyun Bitti" diye bir mesaj geliyor. Mesajın Tamam tuşuna basınca YENİ ve ÇIKIŞ tuşları aktif olurken DURDUR tuşu pasif oluyor. Üçüncü koşul ise kare inerken altta başka kare var mı onu kontrol ediyor. Eğer altında kare varsa şekil duruyor ve tekrar yukarıdan yeni şekil iniyor.
Her üç koşulda da return komutu ile yordamdan çıkıyoruz ki alttaki diğer koşul ya da komutlar çalıştırılmasın. Eğer yordamdan çıkmazsak bilgisayar daha sonraki komutları da çalıştıracağından istenmeyen sonuçlar çıkar ve bizim kontrolumuzun bir anlamı kalmaz. Bu koşulların sıralaması da çok önemlidir. Koşulların sıralaması değiştiğinde oyun istemediğimiz bir yöne gider. Denemesini yapabilirsiniz.

Şimdi programı kaydedip çalıştıralım. Kontrol kodlarımızın çalışıp çalışmadığını test edelim. Evet şekil altta duruyor, altında şekil varsa duruyor ve pano dolunca "Oyun Bitti" mesajı geliyor. Tamam butonuna bastığımızda YENİ aktif, ÇIKIŞ ve DURDUR tuşu pasif oluyor. Fakat YENİ tuşuna basınca yeni bir oyuna başlamıyor. Pano dolu olduğu için tekrar "Oyun Bitti" mesajı geliyor. O halde Yeni yordamına bir komut eklemeliyiz ki panoyu temizlesin ve oyun yeniden başlasın. Önce oyundan çıkalım. Kod yazma kısmına gelelim. Burada kendimiz panoyu temizleyecek yeni bir yordam oluşturalım. Yeni yordamı oluştururken yanlışlıkla diğer yordamların içinde oluşturmayalım. Zaten oluşturursanız hata mesajı verir. Şimdi metodumuzu oluşturalım. Bu metod 1'den 200'e tüm kareleri mavi yapıyor. Dolayısıyle ekran temizlenmiş oluyor. Asıl oyunda ise buradaki komut ekrandaki tüm şekillerin display değerini none yapıp görünmez hale getireceğinden ekran temizlenmiş olacak. Bunu yeri geldiğinde anlatacağız. Şimdi Yeni yordamının başına panoTemizle() yazdığımızda bu kod panoTemizle yordamını çağırır ve işletir. Böylece Yeni tuşuna her bastığımızda ilk önce ekran temizlenmiş olur. Şimdi programı kaydedip tekrar çalıştıralım. Test programın kusursuz çalıştığını görelim.

Sırada bu kareyi sağa sola götürecek yön tuşları kodunu ekleme işi var. Oyunumuz web ortamında çalıştığı için tüm platformlarda kullanılabilecektir. Onun için klavye yön tuşlarını referans alacak resimli butonlar kullanarak oyunun çok yönlü kullanılmasını sağlayacağız. Bu amaçla sola ve sağa hareket için iki adet png dosyası oluşturalım. Bu resim doslalarını projede kullanabilmek için öncelikle images isminde bir klasör oluşturalım. Gerekli resim dosyalarını aşağıdaki linkten indirebilirsiniz.

Tetris oyununda kullanılan resimler

Bu resimli butonları panonun altında kullanacağımız için web sayfasının tasarımını satır ekleyerek yeniden düzenleyelim. Bu amaçla pano kutusunu bir satır içine alalım. Altına bir satır daha ekleyelim. İçine tuslar isminde bir kutu ekleyelim.

Tuslar isimli kutunun içine left.png ve right.png resim dosyalarını ekleyelim. Dikkat ettiyeniz resim dosyaları biraz büyük olmuşlar. Bu iki resmin genişliklerini ve yüksekliklerini 36px yapalım. Projeyi çalıştırıp sonucu görelim.

Resimlerimizi tuslar kutusu içinde ortalayalım. left.png isimli dosyanın id değerini "imgLeft", right.png isimli dosyanın id değerini "imgRight" olarak değiştirelim.

Şimdi oyunda sol ok tuşuna basılınca gerekli kodları yazalım. Eğer sol tuşuna basılmışsa önce şekil sol kenarda ise 1 eksiltip sanki sol kenarı geçip sağ kenarda bir altta oluşmasını engelleyelim. Sonra o anki kırmızı karenin rengini mavi yapalım. Sonra sayacı bir azaltalım. Buradaki kareyi kırmızı yapalım. Böylece kare bir sola geçmiş olur. Öncelikle click olayını tanımlayalım.

Şimdi tanımladığımız bu olayın içine sol tarafa geldiğinde şeklin durmasını sağlayan koşul cümlesini, şeklin renklerini belirleyen gerekli kodları yazalım.

Şimdi oyunda sağ ok tuşuna basılınca gerekli kodları yazalım. Eğer sağ tuşuna basılmışsa önce şekil sağ kenarda ise 1 arttırıp sanki sağ kenarı geçip sol kenarda bir altta oluşmasını engelleyelim. Sonra o anki kırmızı karenin rengini mavi yapalım. Sonra sayacı bir arttıralım. Buradaki kareyi kırmızı yapalım. Böylece kare bir sağa geçmiş olur. Öncelikle click olayını tanımlayalım.

Şimdi tanımladığımız bu olayın içine sağ tarafa geldiğinde şeklin durmasını sağlayan koşul cümlesini, şeklin renklerini belirleyen gerekli kodları yazalım.

Peki web sayfasında klavyedeki yön tuşlarını kullanabilir miyiz? Tabi ki evet. Yön Tuşları web sayfasında document nesnesinde KeyDown olayı ile çalışır. Yani $(document).keydown() yordamını oluşturmalıyız. Bunun için script bloğunda en alt kısma gelelim. Metodumuzu tanımlayalım.

Web sayfasının tamamı bir document nesnesi gibi çalışır. Halbuki biz oyun başladığı an yön tuşlarını kullanacağız. Tamınladığımız pause nesnesi başlangıçta false idi. True olduğunda oyunumuz başlıyordu. Tanımladığımız keydown olayında öncelikle pause değişkeninin değerinin true olup olmadığını kontrol edeceğiz. Daha sonra basılan tuşun ascii kodunu bulmak için var key = (e.keyCode ? e.keyCode : e.which); gerekli kodları yazacağız.

Burada e.KeyCode yön tuşlarına basılıp basılmadığını kontrol eder. e.KeyCode = 37 demek sol tuşuna basıldı demektir. Tuşların kontrolü için switch() deyimini kullanacağız. Bu tuşa basılınca imgLeft.click() olayını çağıralım.

Bu sefer sağ tuşuna basılıp basılmadığını kontrol edelim. e.KeyCode = 39 demek sağ tuşuna basıldığını belirtir. Bu tuşa basılınca imgRight.click() olayını çağıralım.

Buraya eklenecek diğer bir kontrol ise şekli sağa ve sola götürürken eğer sağda veya solda şekil varsa ne olacak. Bu kontrol kodunu test kodları konusunu fazla uzatmamak için şimdilik burada anlatmıyorum. Bu kontrolü asıl kodları anlatırken bahsedeceğim. Oyunumuzu kaydedip çalıştıralım ve sağ-sol yön tuşlarını test edelim. Tetrisin çalışma mantığını iyice öğrenelim. Çünkü bundan sonra oyunun asıl kodlarını anlatmaya başlayacağım. Eğer test kodlarla yeteri kadar çalıştı iseniz önce bütün test kodlarını silelim, sonra karelerin indisini ve indis rengini gösteren 2 komut satırını silelim veya işlevsiz hale getirelim. (yani komutun önüne // koyalım.) Karelerin display değerini none yapalım.