Jquery

Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama13

Arkadaşlar sıra geldi programın TetrisKontrol isimli son metodunu yazmaya. Bu metot şeklin her duruşunda (ya tabana inmiştir ya da alttaki bir şeklin üzerine gelip durmuştur) panoyu baştan aşağı kontrol ediyor. (bu metot timer metodunda çağrılıyordu) Tetris oluşmuşsa onları siliyor, puan veriyor, belli bir puandan sonra tetrisin seviyesini bir yükseltip hızını artırıyor. 

Adım 1: Önce fonksiyon için gerekli değişkenleri tanımlayalım. Silinecek satırı saklayan satırNo, silinecek satırın durumunu saklayan satırSil, seviye, puan ve skor?dan oluşmak üzere 5 tane değişkenimiz var. Bunları daha önceki değişkenlerin altına şu şekilde yazalım.

var satirSil;
var seviye, puan;
var satirNo, skor;
Adım 2: Seviye ve puan değerlerini başlangıçta ilk değerlerine almamız gerekir. Bunları panoTemizle() metodu altında yapacağız.
    puan = 0;
    seviye = 1;
    speed = 1000;
    $("#spnSeviye").html(seviye);
    $("#spnPuan").html(puan);
Adım 3: Şimdi TetrisKontrol() metodunu yazalım.
function TetrisKontrol() {
 
}
Adım 4: Öncelikle satirSil değişkeninin değerini false yapalım. Daha sonra yarışmacı 2500 puan aldığında seviyesini bulalım. Yani her 2500 puan aldığında seviyesini arttıralım.
function TetrisKontrol() {
    satirSil = false;
}
Adım 5: Şimdi seviyeye göre timer setinterval için zaman aralıklarını belirleyelim. Başlangıçta 1000 ms ile başladığı için seviye 1 için bir süre belirlemiyorum.
function TetrisKontrol() {
    satirSil = false;
 
    switch (seviye) {
        case 0:
            break;
        case 1:
            clearInterval(zaman);
            speed = 900;
            zaman = setInterval(timer, speed);
            break;
        case 2:
            clearInterval(zaman);
            speed = 800;
            zaman = setInterval(timer, speed);
            break;
        case 3:
            clearInterval(zaman);
            speed = 700;
            zaman = setInterval(timer, speed);
            break;
        case 4:
            clearInterval(zaman);
            speed = 600;
            zaman = setInterval(timer, speed);
            break;
        case 5:
            clearInterval(zaman);
            speed = 500;
            zaman = setInterval(timer, speed);
            break;
        case 6:
            clearInterval(zaman);
            speed = 400;
            zaman = setInterval(timer, speed);
            break;
        case 7:
            clearInterval(zaman);
            speed = 300;
            zaman = setInterval(timer, speed);
            break;
        case 8:
            clearInterval(zaman);
            speed = 200;
            zaman = setInterval(timer, speed);
            break;
        case 9:
            clearInterval(zaman);
            speed = 100;
            zaman = setInterval(timer, speed);
            break;
        case 10:
            clearInterval(zaman);
            speed = 75;
            zaman = setInterval(timer, speed);
            break;
        case 11:
            clearInterval(zaman);
            speed = 50;
            zaman = setInterval(timer, speed);
            break;
        case 12:
            clearInterval(zaman);
            speed = 25;
            zaman = setInterval(timer, speed);
            break;
    }
}

Adım 6: Tüm satırları alttan yukarı döğru kontrol edelim. Eğer ilgili hücredeki nesne görünür haldeyse orası dolu demektir. Şayet satırlardaki tüm nesneler görünür ise o satır dolduruldu demektir. Onların gizlenmesini sağlayalım. Bir üstteki nesneleri aşağıya alalım. Bu işlemi kontrol etmek için satirSil değişkeninden yararlanacağız.

function TetrisKontrol() {
    satirSil = false;
 
    switch (seviye) {
        case 0:
            break;
        case 1:
            clearInterval(zaman);
            speed = 900;
            zaman = setInterval(timer, speed);
            break;
        case 2:
            clearInterval(zaman);
            speed = 800;
            zaman = setInterval(timer, speed);
            break;
        case 3:
            clearInterval(zaman);
            speed = 700;
            zaman = setInterval(timer, speed);
            break;
        case 4:
            clearInterval(zaman);
            speed = 600;
            zaman = setInterval(timer, speed);
            break;
        case 5:
            clearInterval(zaman);
            speed = 500;
            zaman = setInterval(timer, speed);
            break;
        case 6:
            clearInterval(zaman);
            speed = 400;
            zaman = setInterval(timer, speed);
            break;
        case 7:
            clearInterval(zaman);
            speed = 300;
            zaman = setInterval(timer, speed);
            break;
        case 8:
            clearInterval(zaman);
            speed = 200;
            zaman = setInterval(timer, speed);
            break;
        case 9:
            clearInterval(zaman);
            speed = 100;
            zaman = setInterval(timer, speed);
            break;
        case 10:
            clearInterval(zaman);
            speed = 75;
            zaman = setInterval(timer, speed);
            break;
        case 11:
            clearInterval(zaman);
            speed = 50;
            zaman = setInterval(timer, speed);
            break;
        case 12:
            clearInterval(zaman);
            speed = 25;
            zaman = setInterval(timer, speed);
            break;
    }
 
    for (satirNo = 19; satirNo > 0; satirNo--) {
        for (var r = 1; r < 11; r++) {
            if ($('#kare' + (satirNo * 10 + r)).is(":visible") == true) {
                satirSil = true;
            }
            else {
                satirSil = false;
                skor = 0;
                break;
            }
        }
        }
Adım 7: Şimdi satirSil değişkeninin değeri true ise gerekli işlemleri yapalım.Doldurulan her satır için skor değişkenini arttıralım. Bu değere göre yarışmacıya puan verelim. Elde edilen puana göre seviyeyi kontrol edelim Sonuçları ekrana basalım.
function TetrisKontrol() {
    satirSil = false;
 
    switch (seviye) {
        case 0:
            break;
        case 1:
            clearInterval(zaman);
            speed = 900;
            zaman = setInterval(timer, speed);
            break;
        case 2:
            clearInterval(zaman);
            speed = 800;
            zaman = setInterval(timer, speed);
            break;
        case 3:
            clearInterval(zaman);
            speed = 700;
            zaman = setInterval(timer, speed);
            break;
        case 4:
            clearInterval(zaman);
            speed = 600;
            zaman = setInterval(timer, speed);
            break;
        case 5:
            clearInterval(zaman);
            speed = 500;
            zaman = setInterval(timer, speed);
            break;
        case 6:
            clearInterval(zaman);
            speed = 400;
            zaman = setInterval(timer, speed);
            break;
        case 7:
            clearInterval(zaman);
            speed = 300;
            zaman = setInterval(timer, speed);
            break;
        case 8:
            clearInterval(zaman);
            speed = 200;
            zaman = setInterval(timer, speed);
            break;
        case 9:
            clearInterval(zaman);
            speed = 100;
            zaman = setInterval(timer, speed);
            break;
        case 10:
            clearInterval(zaman);
            speed = 75;
            zaman = setInterval(timer, speed);
            break;
        case 11:
            clearInterval(zaman);
            speed = 50;
            zaman = setInterval(timer, speed);
            break;
        case 12:
            clearInterval(zaman);
            speed = 25;
            zaman = setInterval(timer, speed);
            break;
    }
 
    for (satirNo = 19; satirNo > 0; satirNo--) {
        for (var r = 1; r < 11; r++) {
            if ($('#kare' + (satirNo * 10 + r)).is(":visible") == true) {
                satirSil = true;
            }
            else {
                satirSil = false;
                skor = 0;
                break;
            }
        }
 
        if (satirSil == true) {
            skor = skor + 1;
            switch (skor) {
                case 1:
                    puan = puan + 100;
                    break;
                case 2:
                    puan = puan + 200;
                    break;
                case 3:
                    puan = puan + 300;
                    break;
                case 4:
                    puan = puan + 400;
                    break;
            }
 
            seviye = Math.floor(puan / 2500);
 
            $("#spnPuan").html(puan);
            $("#spnSeviye").html(seviye+1);
        }
Adım 8: Daha sonra doldurulan satırları gizleyip üstteki satırı aşağıya indirelim. Eğer satırlar doldurulmamışsa oyunumuzda satirNo değişkeninin değerini 1 arttıralım. Buna göre TetrisKontrol() metodunun son hali aşağıdaki gibi olacaktır.
function TetrisKontrol() {
    satirSil = false;
 
    switch (seviye) {
        case 0:
            break;
        case 1:
            clearInterval(zaman);
            speed = 900;
            zaman = setInterval(timer, speed);
            break;
        case 2:
            clearInterval(zaman);
            speed = 800;
            zaman = setInterval(timer, speed);
            break;
        case 3:
            clearInterval(zaman);
            speed = 700;
            zaman = setInterval(timer, speed);
            break;
        case 4:
            clearInterval(zaman);
            speed = 600;
            zaman = setInterval(timer, speed);
            break;
        case 5:
            clearInterval(zaman);
            speed = 500;
            zaman = setInterval(timer, speed);
            break;
        case 6:
            clearInterval(zaman);
            speed = 400;
            zaman = setInterval(timer, speed);
            break;
        case 7:
            clearInterval(zaman);
            speed = 300;
            zaman = setInterval(timer, speed);
            break;
        case 8:
            clearInterval(zaman);
            speed = 200;
            zaman = setInterval(timer, speed);
            break;
        case 9:
            clearInterval(zaman);
            speed = 100;
            zaman = setInterval(timer, speed);
            break;
        case 10:
            clearInterval(zaman);
            speed = 75;
            zaman = setInterval(timer, speed);
            break;
        case 11:
            clearInterval(zaman);
            speed = 50;
            zaman = setInterval(timer, speed);
            break;
        case 12:
            clearInterval(zaman);
            speed = 25;
            zaman = setInterval(timer, speed);
            break;
    }
 
    for (satirNo = 19; satirNo > 0; satirNo--) {
        for (var r = 1; r < 11; r++) {
            if ($('#kare' + (satirNo * 10 + r)).is(":visible") == true) {
                satirSil = true;
            }
            else {
                satirSil = false;
                skor = 0;
                break;
            }
        }
 
        if (satirSil == true) {
            skor = skor + 1;
            switch (skor) {
                case 1:
                    puan = puan + 100;
                    break;
                case 2:
                    puan = puan + 200;
                    break;
                case 3:
                    puan = puan + 300;
                    break;
                case 4:
                    puan = puan + 400;
                    break;
            }
 
            seviye = Math.floor(puan / 2500);
 
            $("#spnPuan").html(puan);
            $("#spnSeviye").html(seviye+1);
 
            for (var s = satirNo; s > 0; s--) {
                for (var r = 1; r < 11; r++) {
                    if ($('#kare' + (s * 10 + r - 10)).is(":visible") == true) {
                        var renkal = $('#kare' + (s * 10 + r - 10)).css("background-color");
                        $('#kare' + (s * 10 + r)).css("background-color", renkal);
                        $('#kare' + (s * 10 + r)).css("display", "block");
                    }
                    else {
                        $('#kare' + (s * 10 + r)).css("display", "none");
                    }
                }
            }
            satirNo += 1;
        }
    }
 
}
Adım 9: Şimdi bu metodu timer olayının içinde SekilSec() metodunun üstünde çağıralım.
            TetrisKontrol();
            SekilSec();
Projemizi kaydedip çalıştıralım. Oyunumuzu bir müddet oynayalım. Satırları sildikçe puan alındığını, puanın her 2500 değeriyle bölümünde seviyenin bir arttırıldığını görürsünüz. Bir sonraki makalede 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