Ünlü   hiç oynamadıysanız elinizi kaldırın! Yılan oyununu  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   ekleyeceğim: CSS   https://Gist.github.com/ssaurel/52d2a7ffd8b417fb48e27ae86237487f?embedable=true  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:    ve   sırasıyla pano boyutunu genişlik ve yükseklikte temsil eder. bw bh    ve   kart için mevcut hücre sayısını temsil eder. nbx nby,    ve   bir yılan öğesinin genişlik ve yükseklik olarak boyutunu temsil eder. eltw elth,  Yılanın yer değiştirme vektörünü temsil eden   ve   . dirx diry    ve   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. Marginx Marginy,    ,   ,   ,   belirli bir andaki hareketli okların durumunu saklar. keyup keydown keyleft keyright    oyunun başında yılanı hareket ettirmek için gereken saniyedeki kare sayısını saklar. startftps,  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:   https://Gist.github.com/ssaurel/719918967c6bc4d5a0bde7252fdfc617?embedable=true  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:   https://Gist.github.com/ssaurel/01123c58385dfb7b2a43ca4d186eb0fd?embedable=true  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:   https://Gist.github.com/ssaurel/a1381047c4849f76f38a99db5730231d?embedable=true  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:  Yılanın elemanlarına bir eleman ekleyin. Bu eleman yeni kuyruk olur.  Generatefood'u çağırarak yeni bir elma oluşturun.  Oyuncuya bir puan ekleyin.  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:   https://Gist.github.com/ssaurel/857a654c2b6dd065a15bfdb5751cdcab?embedable=true  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:   https://Gist.github.com/ssaurel/ef5abcd238e63cacd906a039b7647eaf?embedable=true  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:   https://Gist.github.com/ssaurel/e01731169b9f0dca1a3fb19ba6e8f3a2?embedable=true  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:   https://www.youtube.com/watch?v=0uSfTEq2JMo&embedable=true    da yayınlandı. Burada

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The best videos on the Internet archived and shared on HackerNoon.

2022 - HackerNoon Contributor of the Year - Bitcoin

2022 - HackerNoon Contributor of the Year - Money

Wanting more content on Bitcoin? Discover In Bitcoin We Trust Newsletter.

In Bitcoin We Trust Newsletter

Nominated for 2022 - HackerNoon Contributor of the Year - Money

Nominated for 2022 - HackerNoon Contributor of the Year - Bitcoin

Bu ses hikayenin orijinal dilinde üretilmiştir!

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps