Jquery

Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama6

Artık yön tuşlarının kodlarını yazmaya sıra geldi. Daha önce yön tuşlarının çalıştırıldığı $(document).keydown(...) yordamını oluşturmuş ve test kodları yazıp çalıştırmıştık. İşimiz bitince bu kodları sildik. Şimdi tetris şekillerini sağa - sola kaydıran sağ ve sol tuşları, döndüren yukarı tuşu ve onları hızla aşağı indiren aşağı tuşu ile ilgili kodları yazacağız. Ayrıca bunlarla ilgili butonları kullanarak aynı işlemi gerçekelştireceğiz.

Adım 1: Tetris şekilleri 4 kareden oluştuğu için sağ yada sol kontrolu yaparken her karenin tek tek sağ veya sola gitme durumunu saklayan 4 değerli iki dizi değişkene, ayrıca da şekillerin bütün olarak sağa ya da sola gitme durumlarını saklayan iki değişkene gerek vardır. Aynı şekilde aşağı inme olayında da devam(3) ve devamet değişkenleri tanımlamıştık. Buradaki değişkenlerimiz de evet yada hayır durumunu saklayacağı için boolean tipinde olmalıdır. Bu değişkenlerimizi de daha önceden yazdığımız değişkenlerin altına şu şekilde tanımlayalım. 

var sola = [];
var saga = [];
var solaGit, sagaGit;
 
Adım 2: Daha önce $(document).keydown(...) metotu altında tanımladığımız deneme kodlarını açıklama satırı haline getirelim. Şimdi KeyDown() metodunu yazalım. Burada pause değişkeninin değerini kontrol edelim. 
    if (pause) {
    }
 
Adım 3: Klavyedeki sol yön tuşuna basılıp basılmadığını kontrol edelim.
    if (pause) {
            var key = (event.keyCode ? event.keyCode : event.which);
 
            switch (key) {
                case 37:
                    $("#imgLeft").click();
                    break;
            }
    }
Adım 4: Sol yön tuşu ile imgLeft tuşu aynı işlemi yapacağından kodları orada yazacağız. Öncelikle birinci şeklin sol tarafa yaslanıp yaslanmadığını kontrol edelim.
        if (!(aktifSekil[0] % 10 == 1)) {
 
        }
Adım 5: İlk şeklin solundaki şekli kontrol etmesini sağlayalım. Eğer solundaki resim gizli ise sola dizisinin ilk elemanını true yapalım. Aksi takdirde false olacaktır.
        if (!(aktifSekil[0] % 10 == 1)) {
            if ($('#kare' + (aktifSekil[0] - 1)).is(":visible") == false) {
                sola[0] = true;
            }
            else {
                sola[0] = false;
            }
        }
Adım 6: İkinci şeklin solundaki şekli kontrol etmesini sağlayalım. Eğer solundaki resim gizli ise sola dizisinin ilk elemanını true yapalım. Aksi takdirde false olacaktır. Burada ikinci şeklin birinci şeklin devamı olup olmadığını da kontrol etmemiz gerekir.
        if (!(aktifSekil[0] % 10 == 1)) {
            if ($('#kare' + (aktifSekil[0] - 1)).is(":visible") == false) {
                sola[0] = true;
            }
            else {
                sola[0] = false;
            }
 
            if (aktifSekil[1] - 1 == aktifSekil[0]) {
                sola[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] - 1)).is(":visible") == false) {
                    sola[1] = true;
                }
                else {
                    sola[1] = false;
                }
            }
 
        }
Adım 7: Üçüncü şeklin solundaki şekli kontrol etmesini sağlayalım. Eğer solundaki resim gizli ise sola dizisinin ilk elemanını true yapalım. Aksi takdirde false olacaktır. Burada üçüncü şeklin hem birinci hem de ikinci şeklin devamı olup olmadığını da kontrol etmemiz gerekir.
        if (!(aktifSekil[0] % 10 == 1)) {
            if ($('#kare' + (aktifSekil[0] - 1)).is(":visible") == false) {
                sola[0] = true;
            }
            else {
                sola[0] = false;
            }
 
            if (aktifSekil[1] - 1 == aktifSekil[0]) {
                sola[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] - 1)).is(":visible") == false) {
                    sola[1] = true;
                }
                else {
                    sola[1] = false;
                }
            }
 
            if (((aktifSekil[2] - 1 == aktifSekil[0]) || (aktifSekil[2] - 1 == aktifSekil[1]))) {
                sola[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false) {
                    sola[2] = true;
                }
                else {
                    sola[2] = false;
                }
            }
        }
Adım 8: Dördüncü şeklin solundaki şekli kontrol etmesini sağlayalım. Eğer solundaki resim gizli ise sola dizisinin ilk elemanını true yapalım. Aksi takdirde false olacaktır. Burada dördüncü şeklin hem birinci hem ikinci hem de üçüncü şeklin devamı olup olmadığını da kontrol etmemiz gerekir.
        if (!(aktifSekil[0] % 10 == 1)) {
            if ($('#kare' + (aktifSekil[0] - 1)).is(":visible") == false) {
                sola[0] = true;
            }
            else {
                sola[0] = false;
            }
 
            if (aktifSekil[1] - 1 == aktifSekil[0]) {
                sola[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] - 1)).is(":visible") == false) {
                    sola[1] = true;
                }
                else {
                    sola[1] = false;
                }
            }
 
            if (((aktifSekil[2] - 1 == aktifSekil[0]) || (aktifSekil[2] - 1 == aktifSekil[1]))) {
                sola[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false) {
                    sola[2] = true;
                }
                else {
                    sola[2] = false;
                }
            }
 
            if (((aktifSekil[3] - 1 == aktifSekil[0]) || (aktifSekil[3] - 1 == aktifSekil[1]) || (aktifSekil[3] - 1 == aktifSekil[2]))) {
                sola[3] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[3] - 1)).is(":visible") == false) {
                    sola[3] = true;
                }
                else {
                    sola[3] = true;
                }
            }
       }
Adım 9: sola dizi elemanının içeriğine göre solagit değişkeninin değerini true ya da false yapalım.
        if (!(aktifSekil[0] % 10 == 1)) {
            if ($('#kare' + (aktifSekil[0] - 1)).is(":visible") == false) {
                sola[0] = true;
            }
            else {
                sola[0] = false;
            }
 
            if (aktifSekil[1] - 1 == aktifSekil[0]) {
                sola[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] - 1)).is(":visible") == false) {
                    sola[1] = true;
                }
                else {
                    sola[1] = false;
                }
            }
 
            if (((aktifSekil[2] - 1 == aktifSekil[0]) || (aktifSekil[2] - 1 == aktifSekil[1]))) {
                sola[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false) {
                    sola[2] = true;
                }
                else {
                    sola[2] = false;
                }
            }
 
            if (((aktifSekil[3] - 1 == aktifSekil[0]) || (aktifSekil[3] - 1 == aktifSekil[1]) || (aktifSekil[3] - 1 == aktifSekil[2]))) {
                sola[3] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[3] - 1)).is(":visible") == false) {
                    sola[3] = true;
                }
                else {
                    sola[3] = true;
                }
            }
 
            for (var i = 0; i < 4; i++) {
                if (sola[i] == true) {
                    solaGit = true;
                }
                else {
                    solaGit = false;
                    break;
                }
            }
        }
Adım 10: sola dizi elemanının içeriğine göre solagit değişkeninin değerini true ya da false yapalım.
        if (!(aktifSekil[0] % 10 == 1)) {
            if ($('#kare' + (aktifSekil[0] - 1)).is(":visible") == false) {
                sola[0] = true;
            }
            else {
                sola[0] = false;
            }
 
            if (aktifSekil[1] - 1 == aktifSekil[0]) {
                sola[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] - 1)).is(":visible") == false) {
                    sola[1] = true;
                }
                else {
                    sola[1] = false;
                }
            }
 
            if (((aktifSekil[2] - 1 == aktifSekil[0]) || (aktifSekil[2] - 1 == aktifSekil[1]))) {
                sola[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false) {
                    sola[2] = true;
                }
                else {
                    sola[2] = false;
                }
            }
 
            if (((aktifSekil[3] - 1 == aktifSekil[0]) || (aktifSekil[3] - 1 == aktifSekil[1]) || (aktifSekil[3] - 1 == aktifSekil[2]))) {
                sola[3] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[3] - 1)).is(":visible") == false) {
                    sola[3] = true;
                }
                else {
                    sola[3] = true;
                }
            }
 
            for (var i = 0; i < 4; i++) {
                if (sola[i] == true) {
                    solaGit = true;
                }
                else {
                    solaGit = false;
                    break;
                }
            }
 
            if (solaGit == true) {
                for (var i = 0; i < 4; i++) {
                    $('#kare' + aktifSekil[i]).css('display', 'none');
                    aktifSekil[i] = aktifSekil[i] - 1;
                    $('#kare' + aktifSekil[i]).css('display', 'block');
                    $('#kare' + aktifSekil[i]).css("background-color", renk);
                }
            }
        }
Uygulamayı kaydedip çalıştıralım. Sol ok tuşuna ya da imgLeft tuşuna bastığınızda şeklin sola doğru gittiğini görürsünüz. Şimdi sağa ok tuşuna basıldığında gerekli işlemleri yapalım.
Adım 11: Klavyeden sağ ok tuşuna basılıp basılmadığını kontrol edelim.
$(document).keydown(function (event) {
    if (pause) {
        var key = (event.keyCode ? event.keyCode : event.which);
 
        switch (key) {
            case 37:
                $("#imgLeft").click();
                break;
            case 39:
                $("#imgRight").click();
                break;
        }
    }
});
Adım 12: Öncelikle son şeklin sağ tarafa yaslanıp yaslanmadığını kontrol edelim.
        if (!(aktifSekil[3] % 10 == 0)) {
 
        }
Adım 13: Şekil sol tarafa giderken şeklilleri 0, 1 ,2  3 diyerek kontrol etmiştik. Burada ise 3, 2, 1, 0 diyerek kontrol edeceğiz. Üçüncü şekilden önceki şeklin gizli olup olmadığını kontrol edelim. Buna göre saga dizisinin son elemanının değerini true yapalım.
        if (!(aktifSekil[3] % 10 == 0)) {
            if ($('#kare' + (aktifSekil[3] + 1)).is(":visible") == false) {
                saga[3] = true;
            }
            else {
                saga[3] = false;
            }
        }
Adım 14: İkinci şekilden önceki şeklin gizli olup olmadığını kontrol edelim. Buna göre saga dizisinin son elemanının değerini true yapalım. Bu arada ikinci şeklin üçüncü şekilden önce olup olmadığını da kontrol etmeliyiz.
        if (!(aktifSekil[3] % 10 == 0)) {
            if ($('#kare' + (aktifSekil[3] + 1)).is(":visible") == false) {
                saga[3] = true;
            }
            else {
                saga[3] = false;
            }
 
            if ((aktifSekil[2] + 1 == aktifSekil[3])) {
                saga[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] + 1)).is(":visible") == false) {
                    saga[2] = true;
                }
                else {
                    saga[2] = false;
                }
            }
        }
Adım 15: Birinci şekilden önceki şeklin gizli olup olmadığını kontrol edelim. Buna göre saga dizisinin son elemanının değerini true yapalım. Bu arada birinci şeklin hem ikinci hem de üçüncü şekilden önce olup olmadığını da kontrol etmeliyiz.
        if (!(aktifSekil[3] % 10 == 0)) {
            if ($('#kare' + (aktifSekil[3] + 1)).is(":visible") == false) {
                saga[3] = true;
            }
            else {
                saga[3] = false;
            }
 
            if ((aktifSekil[2] + 1 == aktifSekil[3])) {
                saga[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] + 1)).is(":visible") == false) {
                    saga[2] = true;
                }
                else {
                    saga[2] = false;
                }
            }
 
            if (((aktifSekil[1] + 1 == aktifSekil[3]) || (aktifSekil[1] + 1 == aktifSekil[2]))) {
                saga[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] + 1)).is(":visible") == false) {
                    saga[1] = true;
                }
                else {
                    saga[1] = false;
                }
            }
        }
Adım 16: Sıfırıncı şekilden önceki şeklin gizli olup olmadığını kontrol edelim. Buna göre saga dizisinin son elemanının değerini true yapalım. Bu arada sıfırıncı şeklin hem birinci hem ikinci hem de üçüncü şekilden önce olup olmadığını da kontrol etmeliyiz.
        if (!(aktifSekil[3] % 10 == 0)) {
            if ($('#kare' + (aktifSekil[3] + 1)).is(":visible") == false) {
                saga[3] = true;
            }
            else {
                saga[3] = false;
            }
 
            if ((aktifSekil[2] + 1 == aktifSekil[3])) {
                saga[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] + 1)).is(":visible") == false) {
                    saga[2] = true;
                }
                else {
                    saga[2] = false;
                }
            }
 
            if (((aktifSekil[1] + 1 == aktifSekil[3]) || (aktifSekil[1] + 1 == aktifSekil[2]))) {
                saga[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] + 1)).is(":visible") == false) {
                    saga[1] = true;
                }
                else {
                    saga[1] = false;
                }
            }
 
            if (((aktifSekil[0] + 1 == aktifSekil[3]) || (aktifSekil[0] + 1 == aktifSekil[2]) || (aktifSekil[0] + 1 == aktifSekil[1]))) {
                saga[0] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[0] + 1)).is(":visible") == false) {
                    saga[0] = true;
                }
                else {
                    saga[0] = false;
                }
            }
        }
Adım 17: saga dizi elemanlarını kontrol edelim. Tamamı true ise sagagit değişkeninin değerini true yapalım.
        if (!(aktifSekil[3] % 10 == 0)) {
            if ($('#kare' + (aktifSekil[3] + 1)).is(":visible") == false) {
                saga[3] = true;
            }
            else {
                saga[3] = false;
            }
 
            if ((aktifSekil[2] + 1 == aktifSekil[3])) {
                saga[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] + 1)).is(":visible") == false) {
                    saga[2] = true;
                }
                else {
                    saga[2] = false;
                }
            }
 
            if (((aktifSekil[1] + 1 == aktifSekil[3]) || (aktifSekil[1] + 1 == aktifSekil[2]))) {
                saga[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] + 1)).is(":visible") == false) {
                    saga[1] = true;
                }
                else {
                    saga[1] = false;
                }
            }
 
            if (((aktifSekil[0] + 1 == aktifSekil[3]) || (aktifSekil[0] + 1 == aktifSekil[2]) || (aktifSekil[0] + 1 == aktifSekil[1]))) {
                saga[0] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[0] + 1)).is(":visible") == false) {
                    saga[0] = true;
                }
                else {
                    saga[0] = false;
                }
            }
 
            for (var i = 0; i < 4; i++) {
                if (saga[i] == true) {
                    sagaGit = true;
                }
                else {
                    sagaGit = false;
                    break;
                }
            }
        }
Adım 18: sagagit değişkeninin değeri true ise şekli sağa doğru kaydıralım.
        if (!(aktifSekil[3] % 10 == 0)) {
            if ($('#kare' + (aktifSekil[3] + 1)).is(":visible") == false) {
                saga[3] = true;
            }
            else {
                saga[3] = false;
            }
 
            if ((aktifSekil[2] + 1 == aktifSekil[3])) {
                saga[2] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[2] + 1)).is(":visible") == false) {
                    saga[2] = true;
                }
                else {
                    saga[2] = false;
                }
            }
 
            if (((aktifSekil[1] + 1 == aktifSekil[3]) || (aktifSekil[1] + 1 == aktifSekil[2]))) {
                saga[1] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[1] + 1)).is(":visible") == false) {
                    saga[1] = true;
                }
                else {
                    saga[1] = false;
                }
            }
 
            if (((aktifSekil[0] + 1 == aktifSekil[3]) || (aktifSekil[0] + 1 == aktifSekil[2]) || (aktifSekil[0] + 1 == aktifSekil[1]))) {
                saga[0] = true;
            }
            else {
                if ($('#kare' + (aktifSekil[0] + 1)).is(":visible") == false) {
                    saga[0] = true;
                }
                else {
                    saga[0] = false;
                }
            }
 
            for (var i = 0; i < 4; i++) {
                if (saga[i] == true) {
                    sagaGit = true;
                }
                else {
                    sagaGit = false;
                    break;
                }
            }
 
            if (sagaGit == true) {
                for (var i = 3; i > -1; i--) {
                    $('#kare' + aktifSekil[i]).css('display', 'none');
                    aktifSekil[i] = aktifSekil[i] + 1;
                    $('#kare' + aktifSekil[i]).css('display', 'block');
                    $('#kare' + aktifSekil[i]).css("background-color", renk);
                }
            }
        }
Adım 19: Şimdi aşağı ok tuşuna basılı tutulduğunda şeklin hızlı bir şekilde aşağıya inmesini sağlayalım. Burada da imgDown resmini kullandığımız için o resmin altında kod yazacağız. Öncelikle aşağı ok için gerekli kodları yazalım.
$(document).keydown(function (event) {
    if (pause) {
        var key = (event.keyCode ? event.keyCode : event.which);
 
        switch (key) {
            case 37:
                $("#imgLeft").click();
                break;
            case 39:
                $("#imgRight").click();
                break;
            case 40:
                $("#imgDown").click();
                break;
        }
    }
});
Adım 20: imgDown içindeki kodlarımızı da yazalım.
    $("#imgDown").click(function () {
        timer();
    });
Projeyi kaydedip çalıştıralım. Tuşların doğru bir şekilde çalıştığını görelim. Bir sonraki derste görüşmek üzere.

 
İlgili Makaleler
Facebook Web Sayfasına Ait Üye Kayıt Formunu Tasarlayan Programı JQuery İle Kodlayınız
2022 TYT Matematik Ondördüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Üçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Resmin Ekranın Sol Üst Köşesinden Başlayarak Büyüyerek Küçülmesini Sağlayan Programı JQuery İle Yapınız
Core Mvc Projesinde Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
JQuery Script Dilinde bind ve unbind Fonksiyonları
2022 TYT Matematik Yirmiüçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Altıncı Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Birinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Html Dom Yapısını Anlamak
2022 LGS Boyanmayan Kutudaki Üslü İfadeyi Bulan Matematik Sorusunu jQuery Diliyle Bulan Uygulama
Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
2022 TYT Matematik Onbeşinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
AYT 123 Sayısına Sırasıyla Uygulanan Adımlar Sonucunda 75. Adımda Elde Edilen Sayıyı Bulan JQuery Uygulaması
Paralelkenarın Alanını Bulan Programı JQuery Script Dilinde Yapınız
2022 TYT Matematik Onbirinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Yirmibirinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Koordinat Düzleminde Verilen İki Nokta Arasındaki Uzunluğu Bulan Jquery Uygulamasını Yapınız
2022 TYT Matematik Onyedinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2023 TYT Matematik Beşinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama

Yorum Ekle
   
Kötü
İyi