Biraz Nostaljiyi Canlandırın: HTML5'in Canvas API ve JavaScript'ini Kullanarak Yılan Oyununu Yeniden Yaratmak

Ünlü Yılan oyununu hiç oynamadıysanız elinizi kaldırın!

Bunu söylüyorum ama sanırım bugünlerde yeni nesil bu oyunu hiç duymamış olabilir ki bu, günümüz bilgisayarlarının ve Web'in sunduğu olanaklar göz önüne alındığında biraz eski moda görünebilir.

Yine de Snake oyununun, tüm cep telefonu sahiplerinin oynamaya aşırı miktarda zaman harcadığı bir oyun olduğu bir dönem vardı. Evet o zamanlar akıllı telefonlardan bahsetmiyorduk, sadece telefonlardan bahsediyorduk.

Söylendiği gibi güzel bir zamandı ve Nokia, aynı zamanda bir referans noktası olan mobil cihazları aracılığıyla oyunu popüler hale getirdi. Bugün Nokia'nın mobil dünya ve Snake oyunu üzerindeki hakimiyetine dair pek bir şey kalmadı.

Bu oyuna nostaljik olanlar için - ve itiraf etmeliyim ki ben de onlardan biriyim - bu eğitim size oyunu Web için nasıl yeniden yaratacağınızı öğretecek. Bunu yapmak için HTML5'in Canvas API'sini ve JavaScript'i kullanacağım.

Bu aynı zamanda Javascript'teki sınıfların nasıl kullanılacağını öğrenmek ve Web oyunları için etkili bir oyun döngüsü oluşturmak için de bir fırsattır.

Snake oyunumuz için Web sayfasının oluşturulması

Başlangıç olarak bu eğitimde geliştireceğimiz Snake oyununu oynamamızı sağlayacak Web sayfasını oluşturacağız. Yakında bu Web sayfasının hiçbir zorlukla karşılaşmadığını göreceksiniz. Biri sayfa başlığı, diğeri yılanın hareket edeceği alanı gösteren iki div.

Buna, bu div'leri sabit bir genişlik uygulayarak ortalamak için küçük bir CSS ekleyeceğim:

Snake sınıfının tasarımı

Bu eğitimin girişinde açıkladığım gibi, oyunu modellemek için özel bir Snake sınıfı kullanacağım. Bu aynı zamanda JavaScript'te sınıfları nasıl değiştireceğinizi keşfetmenize de olanak tanır.

Yılanımız aşağıdaki özelliklere sahip olacaktır:

• bw ve bh sırasıyla pano boyutunu genişlik ve yükseklikte temsil eder.
• nbx ve nby, kart için mevcut hücre sayısını temsil eder.
• eltw ve elth, bir yılan öğesinin genişlik ve yükseklik olarak boyutunu temsil eder.
• Yılanın yer değiştirme vektörünü temsil eden dirx ve diry .
• Marginx ve Marginy, yılan öğelerinin genişliğine ve yüksekliğine küçük bir kenar boşluğu ekler, böylece oyuncu her yılan öğesi arasındaki sınırı görebilir.
• keyup , keydown , keyleft , keyright belirli bir andaki hareketli okların durumunu saklar.
• startftps, oyunun başında yılanı hareket ettirmek için gereken saniyedeki kare sayısını saklar.

Yapıcının sonunda, oyunun başlangıcında yılanı başlatmak için bir init yöntemi çağrılır. Yeni bir oyun başlatılacağı zaman bu init yöntemini tekrar çağırmanız yeterlidir.

Bu bize Snake sınıfımız için aşağıdaki kodu verir:

init yönteminde, yılanın başını gösteren bir işaretçi ve kuyruğunu gösteren bir işaretçi gibi diğer yılan özelliklerini tanımlayabilirsiniz. Elementler dizisi, yılanın tüm elementlerini belirli bir anda saklayacaktır. Puan özelliği mevcut oyun için puan depolamak için kullanılırken, seviye özelliği oyunun fps'sini artırmak için kaç puanın toplandığını tanımlamak için kullanılır. Fps sayısı ne kadar yüksek olursa yılan o kadar hızlı hareket eder.

Fps özelliği saniyedeki kare sayısını temsil ettiğinden, 1 saniyenin (veya 1.000 milisaniyenin) istenilen fps sayısına bölünmesi sonucu değerlenen bir fpsinterval özelliğine sahip olmamız gerekir.

Yılan oyununun prensibi

Snake oyununun prensibi basittir: Tahtada görünen maksimum sayıda elmayı yemesi için yılanı dört yön okunu kullanarak yönlendirmeniz gerekir. Her elma yediğinizde yılan bir element büyür. Yılan büyüdükçe kendi kuyruğuna dokunmaktan kaçınmakta zorlanacaksınız. Aksi takdirde kaybedersiniz ve skor yeniden sıfırdan başlar. Elbette her elma yediğinizde bir puan kazanırsınız.

Uygulayacağımız Snake versiyonunun, tahtanın kenarlarına dokunmanın size kaybettirmeyeceği versiyon olduğunu belirtmekte fayda var. Bu sadece karşı tarafa devrilmenize neden olur. Snake oyununun ikinci versiyonları Nokia tarafından bu şekilde hayata geçirildi.

Yılanın bir elmayı yemesi gerektiğinden, bu elmayı tahtada rastgele bir şekilde göstermemiz ve yılanın bir unsuru üzerinde doğrudan bir elma oluşturmamaya dikkat etmemiz gerekiyor.

Bu bize Snake sınıfımız için aşağıdaki createdfood yöntemini verir:

Yılan ekran görüntüsü

Snake sınıfımız ilerliyor ve şimdi yılanı ekranda görüntülemek için bir yöntem oluşturmamız gerekiyor. Ayrıca oyuncunun belirli bir andaki puan sayısını ve son olarak da yenilecek elmayı göstermemiz gerekecek. Elmanın konumu Snake sınıfının food özelliğinde saklanır.

Snake'i ekranda oluşturmak için HTML5'in Canvas API'sini kullanıyorum.

Yılanın çeşitli unsurlarını ve yenilecek elmayı temsil eden dikdörtgenler çizmek için bu API'nin çizim temellerini kullanacağım. Oyuncunun onları ayırt edebilmesi için elmaya ve yılana farklı bir renk uygulayacağım.

Bu, Snake sınıfımızın çizim yöntemi için aşağıdaki kodu verir:

Yılanın Taşınması

Artık ekranda görüntüleyebileceğimiz bir yılanımız var. Bunların hepsi çok iyi ama yılanın hareketine destek eklememiz gerekiyor. Yukarıda açıklandığı gibi yılan koordinat vektörü (dirx, diry) boyunca hareket eder. Yani burada tanımlayacağım hareket yöntemini her çağırdığımızda yılan aynı miktarda hareket edecektir.

Bu hareket yönteminde yılanın kafasının koordinatlarının yenilecek elmanın koordinatlarına uygun olup olmadığını kontrol ediyoruz. Eğer öyleyse, yılan az önce elmayı yemiş demektir. Oyuncu bir puan alır ancak daha da önemlisi dört eylemde bulunmamız gerekir:

1. Yılanın elemanlarına bir eleman ekleyin. Bu eleman yeni kuyruk olur.
2. Generatefood'u çağırarak yeni bir elma oluşturun.
3. Oyuncuya bir puan ekleyin.
4. Oyuncu bir seviyeyi geçerse Snake'in hareketini hızlandırmak için saniye başına görüntülenecek kare sayısını güncelleriz.

Yine de hamle yönteminde oyuncunun yılanın herhangi bir unsuruna kafasıyla dokunma hatasını yapmadığını kontrol etmemiz gerekiyor. Eğer durum böyleyse oyun kaybedilir ve yeniden başlarız! Bunun için yukarıda sunduğumuz Snake sınıfının init metodunu çağırıyoruz.

Şimdi yılanı gerçekten hareket ettirerek taşıma yöntemini tamamlamamız gerekiyor. Bunu yapmak için yılanın baş koordinatlarına dirx ve diry'yi ekliyoruz. Bu bize ekleyeceğimiz yeni bir kafa sağlıyor. Ayrıca, yılanı hareket ettirmenin, her seferinde kuyruğu çıkarılarak ve yeni bir kafa eklenerek akıllıca yapıldığını fark edeceksiniz. Bu, yılanın tüm öğelerinin konumunu güncelleme zorunluluğunu ortadan kaldırır.

Yeni kafayı güncellemeyi hatırlayarak bitirin. Bu arada, yılanın kafasının tahta sınırını geçtiğinde onu tahtanın diğer tarafına doğru hareket ettirdiğimizi de fark etmişsinizdir. Bu hem genişlik hem de uzunluk için geçerlidir.

Bu bize taşıma yöntemi için aşağıdaki kodu verir:

Yılan Oyunumuzun GameLoop'u

Yılanımız ekranda görüntülenebilir. Snake'imiz, move metodunu çağırarak hareket ettirilebilir. Neyi kaçırıyoruz?

Oyunumuzun GameLoop'unun uygulanmasını kaçırıyoruz!

Düzenli aralıklarla hareket ve çizim yöntemlerini çağıracak olan bu GameLoop olmadan Snake hareket edemeyecek. Aşağıda, bir GameLoop'u JavaScript'te doğru şekilde nasıl uygulayacağınızı göstereceğiz ve oyunun web sayfasının oluşturma dizisini engellememek için uygun gördüğünde onu çağırmayı tarayıcıya bırakacağız.

Bunu yapmak için standart JavaScript nesne penceresinin requestAnimationFrame yöntemini kullanacağız. Tarayıcı daha sonra destekleyebileceği maksimum fps'yi web sayfasının kullanılacağı bilgisayara veya akıllı telefona uyarlayacaktır.

Gameloop yöntemimizde, tarayıcının desteklediği fps sayısını, yılanımızı hareket ettirmek istediğimiz fps sayısından arındıracağız. Taşıma ve çizim yöntemlerini yalnızca daha önce tanımlanan fps aralığında olduğumuzda çağıracağız.

Yılanın hareket vektörünün koordinatlarını dört yön tuşunun durumuna göre güncellemek önemlidir: yukarı, aşağı, sol ve sağ.

Son olarak GameLoop'u çağırıyoruz ve bunu yapmak için en iyi anı seçme görevini tarayıcıya devrediyoruz. Bu bize GameLoop için aşağıdaki kodu verir:

Snake ile kullanıcı etkileşimini yönetme

Oyuncunun bastığı yön tuşlarına göre Snake'in hareket etmesini sağlamak için keydown ve keyup olaylarını kullanıyoruz. Bu olayların her biri için Snake sınıfının bir yöntemini çağıracağız. Mantıksal olarak bu, keydown olayı için pressdown ve keyup olayı için pressup olacaktır.

Bağlantılı Snake sınıfı özelliklerinin değerini oyuncunun bu tuşlarla ne yaptığına göre güncelliyoruz. Gördüğünüz gibi doğrudan yılanın konumunu güncelleyerek oyunu engellemiyoruz. Bunun yerine belirli aralıklarla çağrılan gameloop yönteminde durumu güncelliyoruz.

Çeşitli Snake bileşenlerinin montajı

Bu Yılan oyununu tamamlamak için çeşitli unsurları bir araya getirmemiz gerekiyor. Canvas nesnesini ID’si üzerinden alıyoruz. Daha sonra bu Kanvasa bağlı 2 boyutlu bağlamı elde ederiz. İstenilen ölçüleri uygulayın. Tahtadaki hücre sayısı da dahil olmak üzere çeşitli beklenen değerleri parametre olarak ileten bir Snake nesnesi yaratırız.

Keydown ve keyup olayları için olay dinleyicilerini ekleyin.

Son olarak yapmanız gereken tek şey, oyuna başlamak için Snake'in oyun döngüsünü bir kez çağırmak. Bu bize Canvas API ve cehennemi HTML5/JavaScript Web çifti ile yapılan ünlü Snake oyunu için aşağıdaki tam kodu verir:

Yılan Oyunumuz İş Başında

Yılanımız tamamlandı, Nokia'nın mobil dünyaya aşırı derecede hakim olduğu zaman olduğu gibi Yılan büyüsünün tekrar işe yarayıp yaramadığını görmek için onu bir Web tarayıcısında test etmenin zamanı geldi:

Bu Snake oyununda birçok olası geliştirmeyi hayal edebilirsiniz. Örneğin, yılanın elmayı her yediğinde bir ses ekleyebilirsiniz. Bir oyuncunun yerel yüksek puanını depolamak için HTML5'in Web Depolama API'sini kullanabilirsiniz. Bu şekilde, bir oyuncu en yüksek puanı aldığında bir tebrik mesajı görüntüleyebilirsiniz. Olasılıklar sonsuzdur ve programlamada her zaman olduğu gibi tek sınırınız hayal gücünüzdür.

Bu eğiticiyi YouTube'da izleyin

Bu eğitim aynı zamanda YouTube'daki SSaurel kanalında da izlenebilir:

Burada da yayınlandı.