Jquery

Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama9

Üçüncü şeklimiz sarı renkli olan sola merdiven basamaklı olan şekildir. Bu şeklimizde iki durumda döndürülmektedir. sekilNo değişkenimizin değeri 3 olduğunda bu şekil ile ilgili döndürme işlemi yapılacaktır. Bu şeklin dönme işlemini gerçekelştirelim.

Adım 1: Şeklimize ait durum değişkeninin 1 olması durumunu kontrol edelim.

            case 3:
                if (durum == 1) {
 
                }
                break;
Adım 2: Öncelikle şeklin başlangıçta dönme konumunda olup olmadığını kontrol edelim.
            case 3:
                if (durum == 1) {
                    if (aktifSekil[2] > 10) {
 
                    }
                }
                break;
Adım 3: Şeklimizin bir önceki ve bir sonraki şekle göre durumunu kontrol edelim.
            case 3:
                if (durum == 1) {
                    if (aktifSekil[2] > 10) {
                        if ($('#kare' + (aktifSekil[0] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 10)).is(":visible") == false) {
 
 
                        }
                    }
                }
                break;
Adım 4: Kontrol işlemi doğru sonucu bulduğunda şeklimizi gizleyelim ve yeni şeklin konumunu belirleyelim.
            case 3:
                if (durum == 1) {
                    if (aktifSekil[2] > 10) {
                        if ($('#kare' + (aktifSekil[0] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 10)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[0] + 10;
                            aktifSekil[1] = aktifSekil[0] - 10;
                            aktifSekil[2] = aktifSekil[2];
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                break;
Adım 5: Şimdi durum değerinin 2 olması halini kontrol edelim.
            case 3:
                if (durum == 1) {
                    if (aktifSekil[2] > 10) {
                        if ($('#kare' + (aktifSekil[0] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 10)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[0] + 10;
                            aktifSekil[1] = aktifSekil[0] - 10;
                            aktifSekil[2] = aktifSekil[2];
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                } else if (durum == 2) {
 
                }
                break;
Adım 6: Şeklimizin önceki ve sonraki konumunu kontrol edelim. Ayrıca şeklin duvarlara yanaşık olup olmadığını da kontrol etmeliyiz.
            case 3:
                if (durum == 1) {
                    if (aktifSekil[2] > 10) {
                        if ($('#kare' + (aktifSekil[0] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 10)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[0] + 10;
                            aktifSekil[1] = aktifSekil[0] - 10;
                            aktifSekil[2] = aktifSekil[2];
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                } else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 2)).is(":visible") == false && !(aktifSekil[2] % 10 == 0)) {
 
                    }
                }
                break;
Adım 7: Şart cümlemiz doğru sonucu verdiyse mevcut şekli gizleyelim. Yeni şeklin konumunu belirleyelim.
            case 3:
                if (durum == 1) {
                    if (aktifSekil[2] > 10) {
                        if ($('#kare' + (aktifSekil[0] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 10)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[0] + 10;
                            aktifSekil[1] = aktifSekil[0] - 10;
                            aktifSekil[2] = aktifSekil[2];
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                } else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 2)).is(":visible") == false && !(aktifSekil[2] % 10 == 0)) {
                        for (var i = 0; i < 4; i++) {
                            $('#kare' + aktifSekil[i]).css('display', 'none');
                        }
                        aktifSekil[0] = aktifSekil[1];
                        aktifSekil[1] = aktifSekil[2] + 10;
                        aktifSekil[2] = aktifSekil[2];
                        aktifSekil[3] = aktifSekil[1] + 1;
                        durum = 1;
 
                    }
                }
                break;
Projemizi kaydedip çalıştıralım. Bu şekilde de dönme işleminin gerçekelştiğini görürsünüz. Dördüncü şeklimiz kare şeklinde olduğu için dönmesi durumunda herhangi bir değişiklik olmayacağından aşağıdaki kodu yazmamız yeterli olacaktır.
                        case 4:
                            break;
Projeyi çalıştırdığınızda yeni şekillerinde düzgün bir şekilde döndüğünü görürsünüz. Bir sonraki derste görüşmek üzere.

 
İlgili Makaleler
2022 TYT Matematik Onbirinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 LGS Boyanmayan Kutudaki Üslü İfadeyi Bulan Matematik Sorusunu jQuery Diliyle Bulan Uygulama
JQuery Yardımıyla Web Sayfasından JSON Veri Çekme
JQuery Script Dilinde bind ve unbind Fonksiyonları
2022 TYT Matematik Birinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Yirmidördüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onsekizinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Html Dom Yapısını Anlamak
Verilen Bir Sayının Karesini Bulan Programı JQuery Script Dilinde Yapınız
JQuery Script Dilinde This Kullanımı
JQuery Script Dilinde preventDefault, stopPropagation ve return false Olayı
Core Mvc Projesinde Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
2021 TYT Matematik On Birinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onaltıncı 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
2024 TYT Matematik Üçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Dördüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onüçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik İkinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama6

Yorum Ekle
   
Kötü
İyi