HTML5 Canvas

Html5 Canvas Kullanımı

Bu yazıda, javascript ve <canvas> öğesini kullanarak tarayıcınızda oynayabileceğiniz bir oyun oluşturacağız.
Bu yazıdaki örnekleri kullanmak için <canvas> öğesini destekleyen bir tarayıcıya ihtiyacınız olacak.

Daha fazla okumadan önce, oyunu oynamak için “kodu çalıştır” düğmesini tıklayın.

Her bölümde, şu ana kadar geliştirdiğimiz kodu çalıştırmak için “kod çalıştır” düğmesini tıklayabilirsiniz. Bunun dışında her bölümde, butona basar basmaz oyunla aynı kutuda çalıştırılacak olan javascript kodunu içeren bir editör vardır. Kodda değişiklikler yapabilir ve “kod çalıştır” düğmesini tıklatarak sonuçları anında görebilirsiniz.

Bölüm 1: Bir Daire Çizin

Yapmamız gereken ilk şey, <canvas> öğesinin bir örneğini oluşturmaktır, böylece üzerinde çizmeye başlayabiliriz. Örnekte kullandığımız sayfanın kaynağına bakarsanız, şuna benzeyen bir bildirim görürsünüz:

Bu bildirim, uygulamanın geri kalanında çizeceğimiz tuvali oluşturur. Şimdi çizmemiz gereken bir tuvalimiz var, hadi başlayalım:

Çizimi beginPath() veclosePath() arasında yapın. Ekrana bir yay çizmek için arc(…) yada bir kare çizmek için rect() fonksiyonlarını kullanabilirsiniz. Kare çizmek için try ctx.rect(xKord, yKord, Genişlik, Yükseklik) yazabilirsiniz.

Parametreler
x Dairenin merkezinin x koordinatı
y Dairenin merkezinin y koordinatı
r Dairenin yarıçapı
sAngle Başlama açısı, radyan olarak (0, ark dairenin saat 3 konumunda)
eAngle Radyan olarak bitiş açısı
counterclockwise; Çizimin saat yönünün tersine mi yoksa saat yönünde mi olacağını belirtir. false, varsayılandır ve saat yönünde, true ise saat yönünün tersine gösterir.

Yayı çizdiğinizde beginPath() ve closePath() fonksiyonları arasında olduğundan emin olun. koruduğunuzdan ve yukarıdaki örnek çağrıdaki gibi tıpkı çağrıları beginPath () ve closePath () fonksiyonlarına yaptığınızdan emin olun. Ayrıca ctx.fill() yerine ctx.stroke() deneyerek değişimi inceleyebilirsiniz.

Kodu Çalıştır

 

Bölüm 2: Biraz Renk Ekleyin

Ekrandaki topu farklı renklerde de çevirebiliriz. ctx.fillStyle öğesinin değerini değiştirmek tuvalin geçerli rengini değiştirir; değerini ‘#rrggbb‘ biçimindeki yada  ‘rgba (r, g, b, a)‘ oalrak ayarlayabiliriz.

Renkler ve dikdörtgenin alfa değeriyle biraz oynayın ve nesnelerin nasıl tepki verdiğini görün.

Kodu Çalıştır

 

Bölüm 3: Hareket

Zaten bir top yaptık, şimdi onu hareket ettirelim. Bunu yapmak için, ekranı silen, topu çeken, sonra mevcut konumunu güncelleyen bir ciz() işlevi oluşturacağız. Tarayıcıya, her 10 milisaniyede bir ciz() işlevini çalıştırmasını ve hareket yanılsamasını yaratmasını sağlamak için baslat() işlevinde setInterval (function, timeout) işlevini kullanırız.

Topun yönünü değiştirmek için dx ve dy değerlerini değiştirmeyi deneyin veya topun başlayacağı yeri değiştirmek için x ve y değişkenlerini değiştirin. dx ve dy için negatif değerler denediğinizden emin olun.

Kodu Çalıştır 

 

Bölüm 4: Kütüphane haline getirelim (oyun-kutuphane.js)

Şimdi bir yerlere geldiğimize göre, kodumuz tek bir ekran için biraz fazla büyüyor, bu yüzden hayatımızı kolaylaştırmak için bazılarını bir işlev kütüphanesine yapıştırmaya başlayacağız. Gelecekteki sayfalarda, ciz() fonksiyonumuza odaklanabilmemiz için kütüphane kodunu oyun-kutuphane.js olarak kaydedeceğiz. Kütüphane dosyasını istediğimiz zaman açıp gerekli düzenlemeleri yapabilir.

oyun-kutuphane.js

 

index.html

Buradaki amaç yapılacak çizime odaklanmak içindi. Şimdi yazdığımız kodları sadeleşti. Yazdığımız koda odaklanabiliriz. ciz() fonksiyonu ekranı temizleyip istediğimiz nesneyi çizmektedir. her 10ms bir yenilendiği için çizilen nesne ekrandan hareket etmektedir.

 

Bölüm 5: Sıçrama

Topumuz ekranda hareket ediyor, fakat ekran küçük odluğu için ekrandan çok çabuk kaçıyor; Duvarları dikkate alarak topu ekrana tekrar yerleştirelim.

Bölüm 6: Bir tane raket ekleyelim

Artık oyunumuzu gerçek bir oyun gibi yapmayı düşünmeye başlayabiliriz. Bir raket ekleyelim ve sadece topa vurduğunda topun sıçramasına izin verelim.

 

Bölüm 7: Klavye Kontrolü

Raketimize klavye kontrolü eklemek için iki şeye ihtiyacımız var. Sağ ve sol oklara ne zaman basıldığını tespit etmek ve raketi hareket ettirmek. İstediğimiz olayları almak için onkeyup ve onkeydown olaylarını kullanacağız.  Bu olaylar gerçekleştiğinde çalıştırmak için bir fonksiyon yazacağız. Daha sonra çizme işlemini bu klavye kontrolüne göre yapıp, raketi hareket ettirmiş olacağız.

Bölüm 8: Fare Kullanımı

Oyunumuza fare desteği eklemek klavye eklemekten daha da kolaydır; tek yapmamız gereken onmousemove olayını bir onMouseMove işlevine göndermek, farenin oyunun sınırları dahilinde olup olmadığını görmek ve eğer varsa raketi hareket ettirmek.

Bir önceki bölümde bulunan koda aşağıdaki gibi ekleme yapıyoruz.

Kodun eklenmiş hali şu şekilde oluşacaktır.

Bölüm 9: Tuğlaların Yapımı

Şimdi tuğlaları tutmak için 2 boyutlu bir dizi oluşturacağız, kırılmayanları çizmek için birkaç halka kullanacağız ve vurulduklarında tuğlaları kaldırdığınızdan emin olun.

Önceki bölümde bulunan kodları kütüphane içine ekeyip tuğlaların yapımına geçiyorum. Kütüphane dosyasına eklerken ciz() fonksiyonu eklenmediğini belirtmek isterim(üzerinde düzenleme yapacağız.) Değişen kütüphane dosyası şu şekilde oluşacaktır.

kutuphane.js

 

index.html

Sonuç olarak canvas ile yapacaklarınız size kalmış. Oyun yada benzer uygulamaların tamamında ekrandaki bilgiyi tekrar tekrar çizip temizleme söz konusun. Bu uygulama ile anlatacaklarım bu kadar. Site içinde diğer canvas örneklerine bakabilirsiniz.

 

 

 

 

Yorum Yap

Yorum yapmak için tıklayın