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
Web Sayfasında Tıklanan Resmin Gerçek Boyutunu Öğrenme
RadioButton Yardımıyla Resim Galerisi Oluşturan Web Sayfasını Javascript Kodlarıyla Tasarlama
Javascript Kodlarıyla Tarayıcı Penceresinde Yön Tuşlarıyla Kutunun Hareket Ettirilmesi
Çarpma İşaretini Kullanmadan İki Sayıyı Çarpan Programı Javascript Script Dilinde Yapınız
2020 TYT Matematik Para Makinesiyle İlgili Sorunun Çözümünü Javascript Diliyle Kodlama
Bölme İşaretini Kullanmadan İki Sayıyı Bölen Programı Javascript Script Dilinde Yapınız
Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız
Faktöriyel Hesabı Yapan Javascript Uygulaması
Mart 2024 Yerel Seçimlerini Baklava Grafikle Gösteren Core Mvc Jquery Web Uygulaması
RadioButton Yardımıyla Web Sayfasının Arkaplan Rengini Değiştiren Uygulamayı Javascript Kodlarıyla Tasarlama
Radio Button İçinden Seçilen Değeri Görüntüleyen Programı Javascript Script Dilinde Yapınız
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan 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
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama1
Form Nesnesi İçinde Kullanılan Elemanların Dinamik Kullanılması
Yayınlanan Web Service Hizmetini Terminal Tabanlı Web Sayfasında Kullanma
JavaScript Kodlarıyla TextBox Nesnesine Sadece Sayıların Girilmesini Sağlama
Video Açıkken Yeni Sekme Açıldığında ya da Tarayıcı Simge Durumuna Getirildiğinde Javascript Kodlarıyla Videoyu Durdurma İşlemi
Html Etiketlerine Kodlarla Resim Ekleme
Tıklanan Resmi Orijinal Boyutunda Canvas Ekranına Yükleme

Yorum Ekle
   
Kötü
İyi