Javascript

Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama5
Bir önceki derste Tetris şekillerini oluşturmuştuk. Yeni tuşunu her tıklayışta yeni bir tetris şekli panonun üst tarafında ortaya çıkıyordu. Bu dersimizde tetris şekillerinin timer yordamında aşağı inişinin kodlarını yapacağız. Timer yordamını daha önce oluşturmuş ve burada test kodu kullanmıştık. Şimdi asıl tetris şekillerinin iniş kodlarını yazacağız. Önce 3 tane değişken tanımlayacağız. Birincisi tetris şekillerinde her karenin ayrı ayrı inişe uygun olup olmadığını saklayan devam(3) şeklinde dizi değişkendir. İkincisi eğer 4 şekilde inişe uygunsa şekilin tümü için uygunluk veren devamet değişkenidir. Üçüncüsü de panonun dolu mu veya boş mu olduğunu saklayan bitir değişkenidir. Bu üç değişkende bilgileri evet yada hayır şeklinde saklayacağı için boolean tipinde tanımlamamız gerekir.

Adım 1: Bu üç değişkeni daha önceden tanımladığımız değişkenlerin altına şu şekilde tanımlayabiliriz.

var devam = [];
var devamet, bitir;
 
Adım 2: timer() olayına ait kodları yeniden düzenliyoruz. Öncelikle devamet ve devam değişkenlerinin değerlerini false olarak belirleyelim. 
    devamet = false;
    for (var i = 0; i <= 3; i++)
        devam[i] = false;
 
Adım 3: Öncelikle şeklin aşağıya inip inmediğini kontrol edelim. Elde edilen dört kareden birinin 200 sayısından büyük olması şeklin aşağıya inmesi demektir.  
 
    if (pause) {
        if (aktifSekil[0] + 10 > 200 || aktifSekil[1] + 10 > 200 || aktifSekil[2] + 10 > 200 || aktifSekil[3] + 10 > 200) {
        }
        else { }
    }
 
Adım 4: Eğer şekil en aşağıya inmediyse else bloğunu oluşturalım. Burada şekle ait 4 karenin hareketini kontrol edeceğiz. Eğer şekil görünür değilse devam değişkeninin ilgili değeri true olarak değiştirilecektir.
 
        else {
            if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false) {
                devam[0] = true;
            }
            if ((aktifSekil[1] + 10 == aktifSekil[0]) || $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false) {
                devam[1] = true;
            }
            if ((aktifSekil[2] + 10 == aktifSekil[1]) || $('#kare' + (aktifSekil[2] + 10)).is(":visible") == false) {
                devam[2] = true;
            }
            if ((aktifSekil[3] + 10 == aktifSekil[2]) || (aktifSekil[3] + 10 == aktifSekil[1]) || $('#kare' + (aktifSekil[3] + 10)).is(":visible") == false) {
                devam[3] = true;
            }
        }
 
Adım 5: Bu dört şekilden biri kontrol işleminden geçemeyip false değeri alırsa oyuna devam etmemek için devamet değişkeninin değerini değiştirelim.
 
        for (var i = 0; i < 4; i++)
        {
            if (devam[i] == true) {
                devamet = true;
            }
            else {
                devamet = false;
                break;
            }
        }
 
 
Adım 6: Bu dört şekil için kontrol işlemi true ise ilgili kareyi görünür yapalım.
 
        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);
            }
        }
 
 
Adım 7: Bu dört şekil için kontrol işlemi false ise bitir değişkeninin değerini true yapalım.
 
        else {
            for (var i = 0; i < 4; i++)
            {
                if (aktifSekil[i] >= 1 && aktifSekil[i] <= 10) {
                    bitir = true;
                    break;
                }
                else {
                    bitir = false;
                }
            }
        }
 
Adım 8: Burada bitir değişkeninin değeri true ise oyunu bitirelim. 
 
        else {
            for (var i = 0; i < 4; i++) {
                if (aktifSekil[i] >= 1 && aktifSekil[i] <= 10) {
                    bitir = true;
                    break;
                }
                else {
                    bitir = false;
                }
            }
 
            if (bitir == true) {
                clearInterval(zaman);
                alert("Oyun Bitti");
                $('#btnYeni').attr("disabled", false);
                $('#btnDurdur').attr("disabled", true);
                $('#btnExit').attr("disabled", false);
                return;
            }
        }
 
Adım 9: bitir değişkeninin değeri false oyuna devam edelim ve yeni bir şeklin seçilmesini sağlayalım. 
 
function timer() {
    devamet = false;
    for (var i = 0; i <= 3; i++)
        devam[i] = false;
 
    if (pause) {
        if (aktifSekil[0] + 10 > 200 || aktifSekil[1] + 10 > 200 || aktifSekil[2] + 10 > 200 || aktifSekil[3] + 10 > 200) {
        }
        else {
            //alert($('#kare' + (aktifSekil[0] + 10)).prop('disabled'));
            if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false) {
                devam[0] = true;
            }
            if ((aktifSekil[1] + 10 == aktifSekil[0]) || $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false) {
                devam[1] = true;
            }
            if ((aktifSekil[2] + 10 == aktifSekil[1]) || $('#kare' + (aktifSekil[2] + 10)).is(":visible") == false) {
                devam[2] = true;
            }
            if ((aktifSekil[3] + 10 == aktifSekil[2]) || (aktifSekil[3] + 10 == aktifSekil[1]) || $('#kare' + (aktifSekil[3] + 10)).is(":visible") == false) {
                devam[3] = true;
            }
        }
 
        for (var i = 0; i < 4; i++) {
            if (devam[i] == true) {
                devamet = true;
            }
            else {
                devamet = false;
                break;
            }
        }
 
        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);
            }
        }
        else {
            for (var i = 0; i < 4; i++) {
                if (aktifSekil[i] >= 1 && aktifSekil[i] <= 10) {
                    bitir = true;
                    break;
                }
                else {
                    bitir = false;
                }
            }
 
            if (bitir == true) {
                clearInterval(zaman);
                alert("Oyun Bitti");
                $('#btnYeni').attr("disabled", true);
                $('#btnDurdur').attr("disabled", false);
                $('#btnExit').attr("disabled", true);
                return;
            }
            SekilSec();
        }
    }
 
Projeyi kaydedip çalıştıralım. Oyuna başlayalım. Seçilen resmin sahnenin altına doğru hareket ettiğini görürsünüz. Bir sonraki makalede görüşmek üzere.
İlgili Makaleler
Javascript Kodlarıyla Tarayıcı Penceresinde Yön Tuşlarıyla Kutunun Hareket Ettirilmesi
Radio Button İçinden Seçilen Değeri Görüntüleyen Programı Javascript Script Dilinde Yapınız
JavaScript Kodlarıyla TextBox Nesnesine Sadece Sayıların Girilmesini Sağlama
Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Bölme İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Birinci Dereceden Bir Bilinmeyenli Bir Denkleme Ait Çözüm Kümesine Göre Grafik Oluşturan Programı Javascript Script Dilinde Yapınız
Koordinat Düzleminde Verilen Bir Noktanın Hangi Bölgeye Düştüğünü Bulan Programı Javascript Script Dilinde Yapınız
Faktöriyel Hesabı Yapan Javascript Uygulaması
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Web Sayfasında Tıklanan Resmin Gerçek Boyutunu Öğrenme
JavaScript Sınıf Bildirimleri (Class Declarations) ile Sınıf Tanımlama
Çarpma İşaretini Kullanmadan İki Sayıyı Çarpan Programı Javascript Script Dilinde Yapınız
Yayınlanan Web Service Hizmetini Terminal Tabanlı Web Sayfasında Kullanma
RadioButton Yardımıyla Web Sayfasının Arkaplan Rengini Değiştiren Uygulamayı Javascript Kodlarıyla Tasarlama
ListBox Yardımıyla Listelenen Dosya Uzantılarının Hangi Medya Dosyası Olduğunu Bulan Web Sayfasını Javascript Kodlarıyla Düzenleme
Resmin Üzerinde Click, MouseOver, MouseOut Olaylarını Uygulayan Programı Javascript Script Dilinde Yapınız
Mevcut Tarihi Takvim Yaprağı Şeklinde Gösteren Programı Javascript Script Dilinde Yapınız
Div Katmanı İçinde Gösterilen Metni Silen Programı Javascript Script Dilinde Yapınız
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama3
Web Sayfasına JavaScript Kodlarını Tanıtma

Yorum Ekle
   
Kötü İyi