Javascript Canvas Elementi ile Flappy Bird Yapımı

Tarayıcı tabanlı oyunlar yapmak web yazılım geliştirme meraklıları için çok faydalı bir pratiktir. Bu sefer, kısmen de olsa, meşhur Flappy Bird oyununu yapacağız. Projenin kodlarına bu repo’dan ulaşabilirisiniz.

Kod kısmına geçmeden önce ihtiyacımız olan görselleri bulalım. Bir oyunun içerisinde onlarca farklı görsel olabilir. Bunların hepsini tek tek yüklemek, her biri için ayrı bir istek göndermek, memory’de yer ayırmak verimsiz olur. Bunun yerine tüm görselleri birleştirip tek bir imaj dosyası olarak oyunumuza dahil edip ihtiyacımız olan görselin konumunu göstererek kullanacağız. Flappy Bird için şu adresteki görseli kullanacağım. Görsele git reposundan da ulaşabilirsiniz.

Kodumuzu yazmaya başlayalım. Her zamanki gibi index.html dosyamızla başlıyoruz. Bir canvas elementi ekliyoruz DOM ağacımıza. Bütün çizimlerimiz bu element üzerine javascript ile olacak. Basit CSS stilleri ile canvasımızı ortalıyor ve sprite görselimizi arkaplan olarak veriyoruz. background-size ile görselin uygun bölümüne denk gelmesini sağlıyoruz.

Eklediğimiz game.js dosyası ile giriş yapıyoruz. Moduler bir yapı kullanacağız. 4 farklı module dosyamız var.

• vars: Oyuna ait değişkenleri bunun içinde tutacağız
• Bird: Oyundaki kuş nesnesi için gerekli sınıf bu dosyanın içerisinde
• Ground: Oyunda kuşun düşüp çarpacağı zemin için bu dosyada bir sınıf tanımlı
• Column: Kuşumuza engel olan kolonlar bu dosyadaki sınıf ile oluşacak

game.js dosyamızda önce DOM ağacımızdan canvas elementimizi alıyoruz ve ekran boyutumuza göre boyutlandırıyoruz. Dikey bir ekranda oynanan bir oyun olduğu için maksimum yükseklik ve 16/9 oranında genişlik veriyoruz.

Kuş yere düşerken ona yere çeken bir yer çekimi kuvveti gerekli. Bunu frame başına piksel biriminde bütün ekranı 5 saniyede düşecek şekilde hesapladık.

Görselimizi tüm objelerde kullanmak üzere sprite değişkenine atıyoruz. Bird, ground ve columns değişkenlerimize ilgili sınıflardan birer örnek oluşturuyoruz. Kolonlar ekrandan çıkıp tekrar canlandığında skoru arttırmamız gerektiğinden bunun için bir event bağlamamız gerektiğinden increaseScore fonksiyonunu kullanıyoruz.