Jquery

Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama11

Altıncı şeklimiz kahverengi renkli olan sola yönlü baston şekildir. Bu şeklimiz dört farklı durumda döndürülmektedir. sekilNo değişkenimizin değeri 6 olduğunda bu şekil ile ilgili döndürme işlemi yapılacaktır. Bu şeklin dönme işlemini gerçekleştirelim.

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

            case 6:
                if (durum == 1) {
 
                }
                break;
Adım 2: Öncelikle şeklin başlangıçta dönme konumunda olup olmadığını kontrol edelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
 
                    }
                }
                break;
Adım 3: Şeklimizin bir önceki ve bir sonraki şekle göre durumunu kontrol edelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 10)).is(":visible") == false) {
 
                        }
                    }
                }
                break;
Adım 4: Kontrol işlemi doğru sonucu bulduğunda şeklimizi gizleyelim ve yeni şeklin konumunu belirleyelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                break;
Adım 5: Şimdi durum değerinin 2 olması halini kontrol edelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            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 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && !(aktifSekil[3] % 10 == 0)) {
 
                    }
 
                }
                break;
Adım 7: Şart cümlemiz doğru sonucu verdiyse mevcut şekli gizleyelim. Yeni şeklin konumunu belirleyelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && !(aktifSekil[3] % 10 == 0)) {
                        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] + 1;
                        durum = 3;
                    }
                }
                break;
Adım 8: Şimdi durum değerinin 3 olması halini kontrol edelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && !(aktifSekil[3] % 10 == 0)) {
                        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] + 1;
                        durum = 3;
                    }
                } else if (durum == 3) {
 
                }
                break;
Adım 9: Şeklimizin önceki ve sonraki konumunu kontrol edelim. Ayrıca şeklin duvarlara yanaşık olup olmadığını da kontrol etmeliyiz.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && !(aktifSekil[3] % 10 == 0)) {
                        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] + 1;
                        durum = 3;
 
                    }
                }
                else if (durum == 3) {
                    if (aktifSekil[0] < 191) {
                        if ($('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 10)).is(":visible") == false) {
 
                        }
                    }
                }
                break;
Adım 10: Önceki şekli gizleyelim ve yeni şeklin konumunu belirleyelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && !(aktifSekil[3] % 10 == 0)) {
                        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] + 1;
                        durum = 3;
 
                    }
                }
                else if (durum == 3) {
                    if (aktifSekil[0] < 191) {
                        if ($('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 10)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[2] + 10;
                            aktifSekil[1] = aktifSekil[0] - 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] + 1;
                            durum = 4;
                        }
                    }
                }
                break;
Adım 11: durum değişkeninin 4 olması durumunu kontrol edelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && !(aktifSekil[3] % 10 == 0)) {
                        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] + 1;
                        durum = 3;
 
                    }
                }
                else if (durum == 3) {
                    if (aktifSekil[0] < 191) {
                        if ($('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 10)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[2] + 10;
                            aktifSekil[1] = aktifSekil[0] - 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] + 1;
                            durum = 4;
                        }
                    }
                } else if (durum == 4) {
 
                }
                break;
Adım 12: Şeklin önceki ve sonraki konumunu kontrol edelim. Ayrıca şeklin duvarlara denk gelip gelmediğine de bakalım.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && !(aktifSekil[3] % 10 == 0)) {
                        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] + 1;
                        durum = 3;
 
                    }
                }
                else if (durum == 3) {
                    if (aktifSekil[0] < 191) {
                        if ($('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 10)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[2] + 10;
                            aktifSekil[1] = aktifSekil[0] - 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] + 1;
                            durum = 4;
 
                        }
                    }
                }
                else if (durum == 4) {
                    if ($('#kare' + (aktifSekil[1] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 1)).is(":visible") == false && (!(aktifSekil[1] % 10 == 1))) {
 
                    }
 
                }
                break;
Adım 13: Şart doğruysa mevcut şekli gizleyelim. Yeni şeklin konumunu belirleyelim.
            case 6:
                if (durum == 1) {
                    if (aktifSekil[1] > 10) {
                        if ($('#kare' + (aktifSekil[0] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[1] - 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[1] + 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] - 10;
                            durum = 2;
                        }
                    }
                }
                else if (durum == 2) {
                    if ($('#kare' + (aktifSekil[2] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 1)).is(":visible") == false && !(aktifSekil[3] % 10 == 0)) {
                        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] + 1;
                        durum = 3;
 
                    }
                }
                else if (durum == 3) {
                    if (aktifSekil[0] < 191) {
                        if ($('#kare' + (aktifSekil[2] - 10)).is(":visible") == false && $('#kare' + (aktifSekil[2] + 10)).is(":visible") == false && $('#kare' + (aktifSekil[3] - 10)).is(":visible") == false) {
                            for (var i = 0; i < 4; i++) {
                                $('#kare' + aktifSekil[i]).css('display', 'none');
                            }
                            aktifSekil[0] = aktifSekil[2] + 10;
                            aktifSekil[1] = aktifSekil[0] - 10;
                            aktifSekil[2] = aktifSekil[1] - 10;
                            aktifSekil[3] = aktifSekil[2] + 1;
                            durum = 4;
 
                        }
                    }
                }
                else if (durum == 4) {
                    if ($('#kare' + (aktifSekil[1] - 1)).is(":visible") == false && $('#kare' + (aktifSekil[1] + 1)).is(":visible") == false && $('#kare' + (aktifSekil[0] + 1)).is(":visible") == false && (!(aktifSekil[1] % 10 == 1))) {
                        for (var i = 0; i < 4; i++) {
                            $('#kare' + aktifSekil[i]).css('display', 'none');
                        }
                        aktifSekil[0] = aktifSekil[1] - 1;
                        aktifSekil[1] = aktifSekil[1];
                        aktifSekil[2] = aktifSekil[1] + 11;
                        aktifSekil[3] = aktifSekil[2] - 10;
                        durum = 1;
                    }
                }
                break;
Projemizi kaydedip çalıştıralım. Bu şekilde de dönme işleminin gerçekleştiğini 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 TYT Matematik Yirmiüçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
JQuery Yardımıyla Web Sayfasından JSON Veri Çekme
2022 TYT Matematik 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
2022 TYT Matematik Onsekizinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Beşinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik İkinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Üçüncü 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 Onyedinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
JQuery Script Dilinde bind ve unbind Fonksiyonları
Facebook Web Sayfasına Ait Üye Kayıt Formunu Tasarlayan Programı JQuery İle Kodlayınız
Ekranın Ortasında Tanımlı Bir Div İçinde Sol Alt Köşeden Başlayıp Sağ Üst Köşede Biten Animasyonu JQuery İle Yapınız
2022 TYT Matematik Ondördüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 LGS Boyanmayan Kutudaki Üslü İfadeyi Bulan Matematik Sorusunu jQuery Diliyle Bulan Uygulama
Bootstrap 3 Dialog Penceresi Uygulamasında jQuery Kodlarıyla Butona Olay Yazma
Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
BootStrap Tema ve JQuery Dilini Kullanarak Web Sayfasında Köstebek Oyunu Yapma
2022 TYT Matematik Onüçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama

Yorum Ekle
   
Kötü İyi