Jquery

Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama7

Geldik şekillerin döndürülmesi işlemine. Bu işlemi gerçekleştirmek için yukarı ok tuşunu kullanacağız. Aynı zamanda yukarı ok resmini de kullanmış olacağız. Elimizde 7 adet şekil vardı. Bu şekillerin dönüşleri birbirinden farklı olacaktır. Hangi şeklin seçildiğini sekilNo değişkeniyle kontrol ediyorduk. Birinci şeklimiz 4 karanin yan yana olduğu şekildi. Bu şeklin dönme işlemini gerçekelştirelim.

Adım 1: Yukarı ok tuşuna basıldığında gerekli olam işlemleri gerçekleştirelim.

$(document).keydown(function (event) {
    if (pause) {
        var key = (event.keyCode ? event.keyCode : event.which);
 
        switch (key) {
            case 37:
                $("#imgLeft").click();
                break;
            case 38:
                $("#imgUp").click();
                break;
            case 39:
                $("#imgRight").click();
                break;
            case 40:
                $("#imgDown").click();
                break;
        }
    }
});
Adım 2: sekilNo değişkeninden elde edilen değerleri switch deyimiyle kontrolünü sağlayalım.
    $("#imgUp").click(function () {
        switch (sekilNo) {
 
        }
    });
Adım 3: İlk şeklimize ait dönme işlemine geçelim. Burada şeklin durumunu kontrol etmemiz gerekir. Başlangıçta tüm şekiller kendi orijinal durumundadır. Buna göre durum değişkeninin 1 olma durumuna bakalım.
    $("#imgUp").click(function () {
        switch (sekilNo) {
            case 1:
                if (durum == 1) {
 
                }
        }
    });
Adım 4: Dönme işleminin gerçekleşmesi için şeklin sınırlar iiçinde olup olmadığına bakalım.
    $("#imgUp").click(function () {
        switch (sekilNo) {
            case 1:
                if (durum == 1) {
                    if (aktifSekil[1] > 10 && aktifSekil[1] < 181) {
 
                    }
                }
        }
    });
Adım 5: Şeklin dönmesi için kendisinden sonra şekillerin görünür olup olmadığına bakmamız gerekir.
    $("#imgUp").click(function () {
        switch (sekilNo) {
            case 1:
                if (durum == 1) {
                    if (aktifSekil[1] > 10 && aktifSekil[1] < 181) {
                        if ($('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 20)).is(":visible") == false) {
 
 
                        }
                    }
                }
                break;
        }
    });
Adım 6: Eğer kontrolümüz doğruysa mevcut şekli gizleyelim.
    $("#imgUp").click(function () {
        switch (sekilNo) {
            case 1:
                if (durum == 1) {
                    if (aktifSekil[1] > 10 && aktifSekil[1] < 181) {
                        if ($('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 20)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                        }
                    }
                }
                break;
        }
    });
Adım 7: Bir sonraki şeklin konumunu verelim ve durum değişkeninin değerini 2 yaplaım.
    $("#imgUp").click(function () {
        switch (sekilNo) {
            case 1:
                if (durum == 1) {
                    if (aktifSekil[1] > 10 && aktifSekil[1] < 181) {
                        if ($('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 20)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[1] + 20;
                            aktifSekil[1] = aktifSekil[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[1] - 20;
                            durum = 2;
                        }
                    }
                }
                break;
        }
    });
Adım 8: Şeklimiz uzun şekil olduğu için dönme işleminde iki durum söz konusudur. Şimdi durum değişkeninin 2 olması durumunu kontrol edelim.
            case 1:
                if (durum == 1) {
                    if (aktifSekil[1] > 10 && aktifSekil[1] < 181) {
                        if ($('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 20)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[1] + 20;
                            aktifSekil[1] = aktifSekil[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[1] - 20;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
 
                }
                break;
Adım 9: Şeklimizin bir önceki ve bir sonraki şekle göre durumunu, kenarlarda olup olmadığını kontrol edelim.
            case 1:
                if (durum == 1) {
                    if (aktifSekil[1] > 10 && aktifSekil[1] < 181) {
                        if ($('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 20)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[1] + 20;
                            aktifSekil[1] = aktifSekil[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[1] - 20;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 2)).is(":visible") == false &&
                        (!(aktifSekil[2] % 10 == 1)) && (aktifSekil[2] % 10 < 9) && (!(aktifSekil[2] % 10 == 0))) {
 
                    }
                }
                break;
Adım 10: Şartımız doğruysa mevcut şekli gizleyelim. Yeni şeklin konumlarını belirleyelim.
            case 1:
                if (durum == 1) {
                    if (aktifSekil[1] > 10 && aktifSekil[1] < 181) {
                        if ($('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 20)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[1] + 20;
                            aktifSekil[1] = aktifSekil[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[1] - 20;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 2)).is(":visible") == false &&
                        (!(aktifSekil[2] % 10 == 1)) && (aktifSekil[2] % 10 < 9) && (!(aktifSekil[2] % 10 == 0))) {
                        for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                        }
                        aktifSekil[0] = aktifSekil[2] - 1;
                        aktifSekil[1] = aktifSekil[2];
                        aktifSekil[2] = aktifSekil[2] + 1;
                        aktifSekil[3] = aktifSekil[2] + 1;
                        durum = 1;
                    }
                }
                break;
Böylece birinci şekle ait dönme işlemlerini gerçekelştirdik. Projeyi çalıştırıp deneyelim. Bir sonraki makalede 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
Html Dom Yapısını Anlamak
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
JQuery Yardımıyla Web Sayfasından JSON Veri Çekme
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 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
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
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

Yorum Ekle
   
Kötü
İyi