|
Bir önceki makalede tetris için kareler, pano ve pano etrafına çizgiler oluşturmuştuk. Bu bölümde ise oyun için gerekli olan menüyü ve oyunun seviyesi ile puanları gösteren labelleri ekleyeceğiz. Yeni Oyun için "Yeni", oyunu durdurmak için "Durdur", duran oyunu devam ettirmek için "Devam", programdan çıkış için "Çıkış" butonlarını, oyunun seviyesini gösteren "Seviye : 1" ve alınan puanları göstermek için de "Puan : 0" olmak üzere 2 tane label ekleyeceğiz.
Şimdi uygulamaya kaldığımız yerden devam edelim.
Adım 1: Ö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.
<style>
html, body {
height: 100%;
}
.ekran {
margin: 0 auto;
height: 100%;
}
.icerik {
height: 100%;
}
.sahne {
height: 100%;
/*background-color: red;*/
}
.panel {
height: 100%;
/*background-color: yellow;*/
}
.pano {
border: 3px solid gray;
margin: 25px auto;
width: 267px;
height: 527px;
/*background-color: green;*/
position: relative;
}
.hucre {
position: absolute;
width: 25px;
height: 25px;
/*background-color: blue;*/
color: white;
display: none;
font-size: 10px;
}
</style>
Adım 2: 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.
<style>
html, body {
height: 100%;
}
.ekran {
margin: 0 auto;
height: 100%;
}
.icerik {
height: 100%;
}
.sahne {
height: 100%;
/*background-color: red;*/
}
.panel {
height: 100%;
/*background-color: yellow;*/
}
.pano {
border: 3px solid gray;
margin: 25px auto;
width: 267px;
height: 527px;
background-color: cyan;
position: relative;
}
.hucre {
position: absolute;
width: 25px;
height: 25px;
/*background-color: blue;*/
/*color: white;*/
display: none;
/*font-size: 10px;*/
}
</style>
<script>
var say;
$(function () {
say = 1;
for (var j = 1; j <= 20; j++) {
for (var i = 1; i <= 10; i++) {
var object = {
id: "kare" + say,
class: "hucre",
css: {
"top": 26 * j - 25,
"left": 26 * i - 25
}
};
var addition = $("<div>", object);
//addition.html(say);
$(".pano").append(addition);
say++;
}
}
});
</script>
Adım 3: 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.
#btnYeni {
margin-top: 25px;
margin-left: 5px;
}
.........................
<button id="btnYeni" class="btn btn-info btn-md btn-block">
Yeni
</button>
Adım 4: 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.
#btnDurdur {
margin-top: 25px;
margin-left: 5px;
}
............................................
<button id="btnDurdur" class="btn btn-info btn-md btn-block" disabled>
Durdur
</button>
Adım 5: 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.
#btnDevam {
margin-top: 25px;
margin-left: 5px;
}
............................................
<button id="btnDevam" class="btn btn-info btn-md btn-block" disabled>
Devam
</button>
Adım 6: 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.
#btnExit {
margin-top: 25px;
margin-left: 5px;
}
............................................
<button id="btnExit" class="btn btn-info btn-md btn-block" disabled>
Çıkış
</button>
Adım 7: 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.
#lblSeviye {
margin-top: 25px;
margin-left: 5px;
height: 35px;
font-size:18px;
}
........................................
<label id="lblSeviye" class="badge badge-pill badge-danger btn-block">Seviye : <span id="spnSeviye" class="badge badge-light">1</span></label>
Adım 8: 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.
#lblPuan {
margin-top: 25px;
margin-left: 5px;
height: 35px;
font-size:18px;
}
................................................
<label id="lblPuan" class="badge bg-warning text-dark btn-block">Puan : <span id="spnPuan" class="badge badge-secondary">0</span></label>
Adım 9: 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.
Adım 10: Ş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.
function timer() {
}
Adım 11: 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
$("#btnYeni").click(function () {
pause = true;
zaman = setInterval(timer, 1000);
$('#btnYeni').attr("disabled", true);
$('#btnDurdur').attr("disabled", false);
});
Bu kodları inceleyelim. YENİ tuşu aslında yeni bir oyun başlatır. Yeni oyuna başlarken timer nesnemizinde çalışır konuma gelmesi gerekir. zaman değişkeni timer nesnesini çalıştırır. Sonra oyun sırasında kazara YENİ tuşuna basıp oyunu sil baştan yapmamak için bu tuşun disabled özelliğini true yapıp inaktif hale getiriyoruz. Oyun sırasında acil işimiz çıktığında oyunu durdurabilmemiz için DURDUR tuşunu da aktif hale getiriyoruz. Projeyi çalıştırıp sonucu görelim.
Adım 12: Ş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
$("#btnDurdur").click(function () {
pause = false;
$('#btnDurdur').attr("disabled", true);
$('#btnDevam').attr("disabled", false);
});
Burada pause değişkeni timer olayının durdurulup durdurulmayacağını kontrol ediyor. Eğer false olursa timeline durur, true olursa devam eder. Durdur komutuna terar tıklamayı önlemek için inaktif yapıyoruz. Durmuş olan oyunu tekrar kaldığı yerden devam ettirebilmemiz için DEVAM tuşunu aktif hale getiriyoruz. Projeyi çalıştırıp sonucu görelim.
Adım 13: 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
$("#btnDevam").click(function () {
pause = true;
$('#btnDurdur').attr("disabled", false);
$('#btnDevam').attr("disabled", true);
});
Gördüğünüz gibi pause değeri true olduğu için tekrar çalışıyor ve oyun kaldığı yerden devam ediyor. Yine yukarıda anlattığımız gerekçelerle Devam tuşu inaktif edilirken bu sefer Durdur tuşu aktif hale getiriliyor. Projeyi çalıştırıp sonucu görelim.
Adım 14: 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
$("#btnExit").click(function () {
pause = false;
clearInterval(zaman);
$('#btnYeni').attr("disabled", false);
$('#btnDurdur').attr("disabled", true);
$('#btnDevam').attr("disabled", true);
$('#btnExit').attr("disabled", true);
});
Projeyi çalıştırıp sonucu görelim.
Adım 15: 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.
say = 5;
$('#kare' + say).css({
"background-color": 'red'
});
Burada sayaç değişkeni say'a 5 verip başlangıçta kare5'i seçmiş oluyoruz. Sonra onu seçtiğimizi görsel olarak göstermek için rengini kırmızı yapıyoruz. (İleride asıl programda bunu görünür - görünmez şeklinde yapacağız.) Zaman fonksiyonun ikinci parametresi olan 1000 zaman aralığını göstermektedir. Zaman aralığı arttıkça animasyon yavaşlar.
Adım 16: Ş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.
function timer() {
$('#kare' + say).css({
"background-color": 'blue'
});
say += 10;
$('#kare' + say).css({
"background-color": 'red'
});
}
Ş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.
|