Tetris Oyunu Yapımı 4

Bu uygulamada Tetris Şekillerinin oluşturulması işlemini gerçekleştireceğiz. Öncelikle tetrisin çalışma mantığını anlamak amacıyla yapılan tüm kodları açıklama satırıyla işlevselliğini kaldıralım. Kare şeklinin görünürlüğünü gizleyelim. Arkaplan rengini, metin rengini ve değerleri açıklama satırı haline getirelim.
Şimdi uygulamaya kaldığımız yerden devam edelim.

Adım #1
Oyunumuzda css ve js kodları web sayfamızın okunurluğunu azaltmakta ve bir sayfada kodların çok olması kontrolü azaltmaktadır. Css kodlarını projede bir klasör içinde saklayalım. Bunun için projede css isminde bir klasör oluşturalım. Bu klasörün içine stiller.css dosyası ekleyelim. Web sayfasında style bloğu içindeki tüm kodları bu dosyanın içine alalım. Bu dosyayı head etiketi arasına ekleyelim.
Aynı şekilde web sayfasında js kodları fazlalaştığı için kontrolü ve işlevselliği azalmaktadır. Projeye js isminde bir klasör ekleyelim ve bunun içinde kodlar.js isminde bir dosya oluşturalım. Web sayfasında script bloğu içindeki tüm kodları bu dosyanın içine alalım ve dosyayı web sayfasında head etiketi arasına yerleştirelim.

Bildiğiniz gibi klasik tetris şekilleri 7 adettir ve her biri 4 kareden oluşur. O halde önce bu 4 karenin konumunu saklayan 4 değerli bir dizi, şeklin hangi durumda olduğunu saklayan integer bir değişken, şeklin rengini saklayan color tipte bir değişken ve hangi şekli seçeceğimizi belirten integer değişken tanımlamalıyız. Bu değişkenleri diğer değişkenlerin altına tanımlayalım.
Şekillerin kodlarını yazacağımız bir fonksiyon oluşturalım. Bu fonksiyon yardımıyla 7 şekilden birini rastgele oluşturacağız. Bu işlemleri gerçekleştirmek için switch() deyiminden yararlanacağız. İlk şeklimizi oluşturalım. Bu şekil 4 tane yan yana kareden oluşmaktadır. 4, 5, 6, 7 nolu kareden oluşmaktadır. Rengini kırmızı yapalım.
Şimdi ikinci şeklimizi oluşturalım. Bu şekil 15, 16, 6, 7 nolu kareden oluşmaktadır. Rengini mavi yapalım.
Üçüncü şeklimizi oluşturalım. Bu şekil 5, 16, 6, 17 nolu kareden oluşmaktadır. Rengini sarı yapalım.
Dördüncü şeklimizi oluşturalım. Bu şekil 15, 5, 16, 6 nolu kareden oluşmaktadır. Rengini yeşil yapalım.

Beşinci şeklimizi oluşturalım. Bu şekil 15, 5, 6, 7 nolu kareden oluşmaktadır. Rengini pembe yapalım.
Altıncı şeklimizi oluşturalım. Bu şekil 5, 6, 17, 7 nolu kareden oluşmaktadır. Rengini kahverengi yapalım.
Yedinci şeklimizi oluşturalım. Bu şekil 5, 16, 6, 7 nolu kareden oluşmaktadır. Rengini turkuaz yapalım.
Şimdi de seçilen şeklin görünür olmasını ve rengini tanımlayalım.
Daha önce oluşturduğumuz panoTemizle() fonksiyonu vardı. Buna test Kodu eklemiş ve sonra silmiştik. Şimdi bu yordamın içinde tüm karelerin rengini cyan yapalım ve görünmez yapalım.
sekilSec() fonksiyonunu timer metodunun başında çalıştıralım. Timer olayını temizlyelim ve fonksiyondan çıkalım.