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 Yirmiüçü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
2022 TYT Matematik Yirmidördüncü 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
JQuery Yardımıyla Web Sayfasından JSON Veri Çekme
2022 TYT Matematik İkinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
2022 TYT Matematik Onsekizinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
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 Onbirinci Sorunun Çözümünü jQuery Diliyle Web Sayfasında Kodlama
Core Mvc Projesinde Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
Facebook Web Sayfasına Ait Üye Kayıt Formunu Tasarlayan Programı JQuery İle Kodlayınız
JQuery Script Dilinde bind ve unbind Fonksiyonları
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
Paralelkenarın Alanını Bulan Programı JQuery Script Dilinde Yapınız
AYT 123 Sayısına Sırasıyla Uygulanan Adımlar Sonucunda 75. Adımda Elde Edilen Sayıyı Bulan JQuery Uygulaması
Resmin Sol Üstten Başlayıp Büyüyerek Ekranı Kapladığı Animasyonu Jquery Dilinde Kodlayınız
Resmin Ekranın Sol Üst Köşesinden Başlayarak Büyüyerek Küçülmesini Sağlayan Programı JQuery İle Yapınız
2022 LGS Boyanmayan Kutudaki Üslü İfadeyi Bulan Matematik Sorusunu jQuery Diliyle Bulan Uygulama
Web Projesinde jQuery Kodlarıyla Ekran Koruyucu Yapma

Yorum Ekle
   
Kötü İyi