Jquery

Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama15

Tetris oyunumuza biraz daha işlevsellik kazandıralım. Şekiller hareket ettikçe hoparlörden ses gelmesini sağlayalım. Web sayfalarında mp3 uzantılı ses dosyalarını çok rahat kullanabilirsiniz. Ben şekil hareket ettikçe sesin çıkmasını, şekil zemine oturduğunda sesin çıkmasını, satırlar gizlendiğinde de sesin çıkmasını istiyorum.
 
Adım 1: Öncelikle ses dosyalarını buradan bilgisayarımıza indirelim. Siz isterseniz kendi oyununuza ait ses dosyalarını internetten araştırabilirsiniz.
 
Adım 2: Projeye Sounds isminde bir klasör ekleyelim. İndirdiğimiz ses dosyalarını bu klasörün içine kopyalayalım.
 
Adım 3: Bu ses dosyalarının ismini tutacağımız sesler isminde bir dizi tanımlayalım. 
 
var sesler = ["hareket.wav", "zemin.wav", "doldurma.wav"];
 
Adım 4: Sağa ve sola yön tuşlarıyla şekiller hareket ediyordu. Yer müsaitse şekil hareket ediyordu. Şekile ait hareket sesini buralarda kullanacağız.
 
                if (solaGit == true) {
                    for (var i = 0; i < 4; i++) {
                        $('#kare' + aktifSekil[i]).css('display', 'none');
                        aktifSekil[i] = aktifSekil[i] - 1;
                    }
                    SekilGoter();
                    var ses = new Audio("/sounds/" + sesler[0]);
                    ses.play();
                }
 
Projeyi çalıştıralım. Sol yön tuşuna bastığımızda sesin geldiğini görürsünüz.
 
Adım 5: Şimdi sagaGit değişkeninin değeri true olduğunda kullanılan kod bloğunu tekrar düzenleyelim.
 
                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);
                    }
                    SekilGoter();
                    var ses = new Audio("/sounds/" + sesler[0]);
                    ses.play();
                }
 
Projeyi çalıştıralım. Sağ yön tuşuna bastığımızda sesin geldiğini görürsünüz.
 
Adım 6: Peki şeklin zemine geldiğini nerede kontrol ediyoruz? Timer olayında SekilSec() metodunu çağırdığımız satırın altına aşağıdaki kodları yazalım.
 
            var ses = new Audio("/sounds/" + sesler[1]);
            ses.play();
 
Adım 7: Satırın tamamı şekillerle doldurulduğunda doldurma.mp3 isimli ses dosyasını çalıştıralım. TetrisKontrol() fonksiyonunda satirSil değişkeninin
değerinin true olduğu komut satırının içine aşağıdaki kodları ekleyelim.
 
            var ses = new Audio("/sounds/" + sesler[2]);
            ses.play();
 
Adım 8: Şekil aşağıya doğru inerken sesin çalmasını sağlayalım. Bunun için devamet değişkeninin değeri true olduğunda tanımlanan kod satırlarına aşağıdaki satırları ekleyelim.
 
            var ses = new Audio("/sounds/" + sesler[0]);
            ses.play();
 
Projeyi çalıştırdığımızda ses dosyalarının düzgün bir şekilde çalıştığı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 LGS Boyanmayan Kutudaki Üslü İfadeyi Bulan Matematik Sorusunu jQuery Diliyle Bulan Uygulama
JQuery Yardımıyla Web Sayfasından JSON Veri Çekme
2022 TYT Matematik Onsekizinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
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
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
2022 TYT Matematik Onüçüncü Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Core Mvc Projesinde Resmin Sağ Alttan Başlayıp Sol Altta Biten 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
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama13
2022 TYT Matematik İkinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama

Yorum Ekle
   
Kötü
İyi