|
Tetris oyunumuza ait temel tüm işlemleri daha önceki makalelerde ayrıntılı bir şekilde anlattık. Şimdi oyunumuza değişik özellikler ekleyelim. Oyunumuza neler eklenebilir.
1. Alınan puanların kişi adıyla kaydedildiği bir en iyi 10 gibi bir skor tablosu eklenebilir.
2. Hakkında diye bir tuş eklenerek programı hazırlayan hakkında bilgi verilebilir.
3. Yardım diye bir tuş eklenerek oyunun nasıl oynandığına ait bilgi verilebilir.
4. Ses dosyaları eklenebilir.
5. Tetris şekillerine daha değişik görünümler verilebilir. Tetris panosu resimli veya desenli olabilir.
Bunları sondan başlayarak oyunumuza eklemeye çalışalım.
Adım 1: Bilgisayarınızda yüklü herhangi bir resim editörü aracılığıyla 25x25 ebadında 7 adet jpeg uzantılı resim dosyası oluşturalım. Bunun için en basit paint programını kullanabilirsiniz. Resim dosyalarının isimlerini tet1.jpeg, tet2.jpeg,...,tet7.jpeg olarak belirleyelim. Ben sizler için resim dosyaları hazırladım. Bunları kullanabilirsiniz.
Adım 2: Kendiniz hazırlayamıyorsanız internette güzel tetris şekilleri bulup bunu yine paint programında 25*25 piksellik yapıp jpeg formatında kayıt edin.
Adım 3: Projeye images isminde bir klasör ekleyelim. Hazırladığımız resim dosyalarını bu klasörün içine kopyalayalım.
Adım 4: Sonra 12 tane güzel manzara resimleri bulup (internetten veya başka yerden) bunları da yine paint programında 263 * 523 piksel olacak şekilde yine jpeg uzantılı olarak aynı klasörde saklayalım. Resimlerin bu piksellerde olması panoyu tam doldurması içindir. Bu resimleri de resim1.jpeg, resim2.jpeg, ..., resim12.jpegşeklinde adlandıralım.
Adım 5: Projeye SekilGoster() isminde bir metot ekleyelim. Bu metot yardımıyla eklediğimiz tetris şekillerini burada göstereceğiz.
function SekilGoter() {
yol = "image/tet" + sekilNo + ".jpeg";
for (var i = 0; i < 4; i++) {
$('#kare' + aktifSekil[i]).css('display', 'block');
$('#kare' + aktifSekil[i]).css('background-color', renk);
$('#kare' + aktifSekil[i]).html(`<img src='${yol}'>`);
}
}
Adım 6: SekilGoster metodu tanımlama işlemini bitirdik. Şimdi bu metodu programda nerede çağıracağımızı belirleyelim.
1. timer olayında
if (devamet == true) {
for (var i = 0; i < 4; i++) {
$('#kare' + aktifSekil[i]).css('display', 'none');
aktifSekil[i] = aktifSekil[i] + 10;
//$('#kare' + aktifSekil[i]).css('display', 'block');
//$('#kare' + aktifSekil[i]).css("background-color", renk);
}
SekilGoter();
}
else {
Burada for döngüsü içindeki 3 ve dördüncü satırları açıklama satırı yapıyoruz. else komutundan önce SekilGoster metodunu yazıyoruz. Böylece for döngüsü içinde önce eski şekil silinirken yeni şeklin indis değerleri (aktifŞkil(i)) atanır. Döngüden çıkılınca da yeni şeklimizi SekilGoster() metodunu çağırarak oluşturmuş oluruz.
2. SekilSec metodunda en altta yer alan for döngüsünü açıklama satırı haline getirip altına SekilGoster metodunu yazıyoruz.
//for (var i = 0; i < 4; i++) {
// $("#kare" + aktifSekil[i]).css({
// "display": "block",
// "background-color": renk
// });
//}
SekilGoter();
3. Sağa, sola ok tuşları için tanımlı olayların en alt tarafındaki for döngüsünde son iki satırı açıklama satırı haline getirip yerine SekilGoster metodunu yazıyoruz.
for (var i = 0; i < 4; i++) {
$('#kare' + aktifSekil[i]).css('display', 'none');
aktifSekil[i] = aktifSekil[i] + 10;
//$('#kare' + aktifSekil[i]).css('display', 'block');
//$('#kare' + aktifSekil[i]).css("background-color", renk);
}
SekilGoter();
Adım 7: Şimdi panoya resimleri ekleyelim.
1. TetrisKontrol yordamındaki switch case döngüsünün altındaki
seviye = Math.floor(puan / 2500);
$("#spnPuan").html(puan);
$("#spnSeviye").html(seviye + 1);
var yol = "images/resim" + (seviye + 1) + ".jpeg";
$('.pano').css("background-image", 'url(' + yol + ')');
2.panoTemizle metodunu da şu şekilde değiştirelim;
function panoTemizle() {
var yol = "images/resim1.jpeg";
$('.pano').css("background-image", 'url(' + yol + ')');
for (var i = 1; i < 201; i++) {
$('#kare' + i).css({
"background-color": 'cyan',
"display": "none"
});
}
puan = 0;
seviye = 1;
speed = 1000;
$("#spnSeviye").html(seviye);
$("#spnPuan").html(puan);
}
Hepsi bu kadar arkadaşlar. Şimdi programı kaydedin ve çalıştırın. Bu kadar uğraştan sonra bu görselliğin tadını çıkarın. Bir sonraki makalede görüşmek üzere.
|