Top Patlatmaca

Merhaba! Github klasörüme hoşgeldiniz.

Dosyalar

Bu klasör HTML üstündeki bir canvas içinde javascript ile yazılmış oyunu içeriyor.Ayrıca kullanılan tüm görseller de burada yer alıyor. index.html: Bu dosyada temel html düzenimiz yer alıyor.

js.js: Bu dosya ise index.html dosyasından erişebildiğimiz ve canvas üzerindeki bütün düzenlemeleri yapan kodların bulunduğu JavaScript dosyamızdır.

style.css: Bu dosya da html sayfamızın ve üzerindeki diğer elemaların düzeni, şekli ve boyutu hakkında düzenlemeler yapan CSS dosyamızdır.

gorseller: Bu klasörümüzde karakter haricindeki bütün png. dosyalarımız mevcut.

karakter: Bu klasörde ise karakterimize ait sprite sheetler tutuluyor.

Projeyi Çalıştırmak

Dosyaları isterseniz buradaki adreste klasörlerin sağ üstündeki yeşil code butonuna tıklayıp en alttaki seçenekte belirtilen şekilde zip dosyası olarak indirip kendi bilgisayarınızdaki tarayıcınızdan index.html dosyasını çalıştırarak çalıştırabilirsiniz.

Ayrıca bu projenin canlı bir şekilde gösterimi için github pages kullanılmıştır. Buraya tıklayabilirsiniz.

Sayfa Tanıtımı

Sayfamızı ilk açtığımızda karşımıza direkt olarak canvasımız çıkıyor:

Dilerseniz direkt olarak oyna butonuna tıklayarak oyunu başlatabilirsiniz. Sayfada biraz aşağı indiğimizde ise bizi şöyle bir ekran karşılıyor:

Burada oyunun amacını ve nasıl oynandığını anlatan kısım yer alıyor. En aşağıda ise şekildeki gibi küçük bir footer'ımız mevcut

Oynanış

Başlatma butonuna tıkladığımızda aşağıdaki gibi 2 nesne ortaya çıkıyor karakterimiz ve rastgele hareket eden top:

Amacımız topun karakterimize vurmasından kaçarak doğru zamanda space tuşuna basıp attığımız ok ile topu küçültmek. Eğer top karakterimize çarparsa aşağıdaki şekil görünecek ve oyun bitecektir, sayfayı yenilememiz gerekir:

İlk topumuz yeterince küçülüp yok olduğunda ise mavi büyük top beliriyor ve oyunun 2. aşaması başlıyor:

Onu da yok ettiğimizde ise kazanıyoruz ve aşağıdaki gibi bir alert alıyoruz. Tekrar sayfayı yenilememiz gerekiyor:

Her vuruş bize 15 puan kazandırıyor. Maksimum puan ise 120.

Kullandığım kaynaklar

Çizimlerin tamamı kendime aittir. Pixel art kullandım ve Aseprite adlı uygulamayı kullandım. Ayrıca kullandığım yapıyı öğrenmek için Franks Laboratory adlı harika Youtube kanalını kullandım.