Bu eğlenceli oyun projelerini oluşturarak programlamayı daha az sıkıcı hale getirebilir ve aynı zamanda becerilerinizi geliştirebilirsiniz.
Tüm web sitelerinin %98,4'ünün JavaScript kullanması, bir geliştirici olarak bunu bilmenizin nedenidir. Geriye dönüp bakıldığında, JavaScript ile oyun yapmak yalnızca hızlı öğrenmenize yardımcı olmakla kalmaz. Ayrıca, basitten karmaşığa konseptlerini farklı iş durumlarında nasıl uygulayacağınız konusunda uzmanlaşmanıza olanak tanır - ister başlangıç seviyesinde olun, ister bilgi tazeleyin.
Görsel gösterilerle daha iyi öğrenirseniz, YouTube'daki bu JavaScript tabanlı oyun eğitimleri zaman ayırmaya değer.
1. JavaScript ile Kart Oyunu
Gavin Lon'un oynadığı bu JavaScript kart oyunu, 600'den fazla JavaScript kodu satırıyla kartları çevirmenin yolunu gösteriyor. Ana odak JavaScript'i öğretmek olsa da, JavaScript ile yanıt verebilirlik elde etmek için CSS'nin tasarım gücünü HTML'nin DOM yapılandırmasıyla birleştirmeyi de öğreneceksiniz.
Projenin nihai hedefi, birkaç kartı çevirmektir ve oyuncu, kartlar nihayet yer değiştirdiğinde As'ı tahmin eder. Her kart, dört farklı kart rolünün bir görüntüsüdür. Böylece, kartları kendiniz tasarlamayacak olsanız da, konumlarını duyarlı bir şekilde değiştirmeyi, oyun turlarını artırmayı, seviyeler değiştikçe skorları eklemeyi veya kaldırmayı ve oyun skorlarını ekranda saklamayı öğreneceksiniz.
tarayıcının yerel depolaması— tümü JavaScript kullanıyor.Öğretici adım adımdır ve sahne arkasında yapacağınız ağır yüklere rağmen takip etmesi kolaydır. Yeni başlayanlar ve bilgi tazeleyiciler için mükemmeldir. Bu bir kart oyunu oluşturmakla ilgili olsa da, sizi gerçek hayattaki durumlarda JavaScript'in kablolama tekniklerinin çoğuna maruz bırakır. Ayrıca, derinlemesine düşünme yeteneğinizi ortaya çıkarır.
2. JavaScript ile 2D Breakout Oyunu
JavaScript kullanarak eylem aralıklarını kontrol etmeyi ve DOM öğelerini dinamik olarak taşımayı öğrenmek istiyorsanız Ania Kubów, JavaScript kullanan bu çığır açan oyun öğreticisiyle bunun ne kadar eğlenceli olduğunu gösteriyor. Artı olarak video, projenizi potansiyel işverenlere nasıl barındıracağınızı ve sergileyeceğinizi de gösterir.
Bir ara oyundaki her olasılığı düşünün; Üzerindeki tuğlaları kırmak için duvarlara teğet olarak çarpan bir topun olduğu hareketli bir platform. Ve bunda da ödül sistemini kodlayacaksınız. Genel olarak, üçüncü taraf aracılar veya kaynaklı görüntüler kullanmadan sıfırdan bir şeyler oluşturmak istiyorsanız, bu çığır açan oyun eğitimi dikkate alınmaya değer.
Video, işlevlerin içinde mantığınızı birbirine bağlarken, kolay adımlarla JavaScript sınıfı ve nesne kavramları hakkında daha fazlasını öğretir. koşullu ifade en iyi uygulamalar anahtar kutusu gibi.
3. JavaScript Yılan Oyunu
Kyle ile bu JavaScript yılan oyununu oluşturarak Nokia 3310'un Yılan II oyun nostaljisini açığa çıkarın. Muhtemelen bunu daha önce oynamışsınızdır ve bir tanesini normal JavaScript kullanarak kodlayacağınız için muhtemelen hayatınız boyunca birçok kez oynayacaksınız.
Bu video size DOM'u dinamik olarak birbirine bağlamayı öğretirken, JavaScript'te özel modülleri nasıl oluşturabileceğinizi ve kullanabileceğinizi gösterir. Böylece, kendinizi tekrar etmeyin (DRY) ilkesini kullanarak endişeleri ayırmayı öğrenmeniz için bir fırsat açılıyor.
Perde arkasında, daha gelişmiş JavaScript konseptlerinde ustalaşacaksınız. Bir oyuncu ızgarası oluşturma, yiyecek yerleştirme, yılan gövdesi oluşturma, yılanı uzatma, yılanı kodlama gibi görevler navigasyon mantığı, bir ödül ve ceza şeması oluşturmak ve yılan hızını kontrol etmek sizi çekirdeklere maruz bırakacaktır. JavaScript.
4. JavaScript ile Tic Tac Toe Oyunu
Belki de Kyle ile başka bir videoda JavaScript ile bir tane oluştururken Tic Tac Toe oyununuz keskinleşir. Bu basit ama değerli JavaScript'e yeni başlayanlar için proje karmaşık sorunları çözerken bir şeyler atıştırmak için.
Video sadece JavaScript ile bitmiyor. Ayrıca, kullanıcı arayüzü tasarımınızı CSS kullanarak nasıl kavrayacağınızı da gösterir. Tutarlılık ve bağlılıkla, bu videoda web geliştirme yolculuğunuza başlamak için gereken hemen hemen her tekniği öğrenebilirsiniz.
Video, DOM'u JavaScript ile manipüle ederken, kodlama, kazanma ve beraberlik kararları, oyuncuların sıralarına karar verme ve nesne hizalama etrafındaki ağır yükü sarar. JavaScript işlevleri, döngüleri ve koşulları, bu JavaScript Tic tac Toe eğitim videosunda öğreneceğiniz ileri düzey kavramlardan bazılarıdır.
5. JavaScript ile Slayt Yapboz Oyunu
Bulmacalar düşündürücü olabilir. Ancak normal JavaScript ile bir tane oluşturmak, yaratıcılığınızı keşfetmenin ve basitten karmaşığa JavaScript kavramlarını öğrenmenin eğlenceli bir yolu gibi görünüyor.
Özel ve yerleşik işlevleri kullanarak koşullu anahtarlar ve dinamik DOM konumu işleme dahil olmak üzere JavaScript kavramlarının nasıl kullanılacağını görmek istiyorsanız, bu eğitimde kodlama yapmak istersiniz.
Eğitmen, JavaScript'i HTML dosyasındaki bir komut dosyası etiketinin içine yerleştirse de, komut dosyanızı özel bir JavaScript dosyasında döndürebilir ve netlik için durumunuzdaki DOM'a bağlayabilirsiniz. Ne olursa olsun, burada öğrendiklerinizi daha gerçek hayat senaryolarına nasıl uygulayacağınız da dahil olmak üzere hedefinize ulaşmak için temel mantığa ve düşünce sürecine odaklanmak en iyisidir.
6. JavaScript ile Araba Yarışı Oyunu
Normal JavaScript kullanarak bir araba yarışı oyunu oluşturmak en iyi grafik çıktıyı vermeyebilir. Ancak bu öğreticiyi takip ederken çalışan bir araba yarışı oyununu kablolamak, size herhangi bir uygulamada JavaScript'in işlevsellik aşılama gücünden yararlanmayı öğretecektir.
Bu eğitim, bir yarış pistine iki arabanın (bir kırmızı ve bir mavi) yerleştirilmesini içerir. Mavi araba herhangi bir yönden rastgele görünür ve oyuncuyu temsil eden kırmızı araç bir çarpışmadan kaçınmaya çalışır. Oyun, her iki araba arasında temas olduğunda sona erer.
Bu, burada ne oluşturacağınızın basit bir açıklaması olsa da, DOM manipülasyonu ve stili için bazı gelişmiş JavaScript mantığı öğreneceksiniz. Ayrıca oyuncu ödülleri ve cezaları oluştururken JavaScript operatörleri hakkında fikir edineceksiniz.
Parçaya işlevler eklerken öğreneceğiniz bazı kavramlar arasında JavaScript olayları, koşulları, anonim işlevler, JavaScript animasyonu, aralık kontrolü ve daha pek çok şey yer alır.
7. JavaScript ile Mario Oyunu
Bu JavaScript Mario oyunu öğreticisi, kafanızı JavaScript'in ince ayrıntılarına sokmak için ihtiyacınız olan tek şey. JavaScript ile bir Mario oyunu yapmak kulağa karmaşık gelse de eğitmeniniz Chris, bu YouTube videosunda bunun mümkün olandan fazlasını gösteriyor. Bu nedenle, eğlenceyi yakalamak ve birlikte inşa ederek eleştirel düşünme yeteneğinizi keşfetmek isteyebilirsiniz.
Yeni başlayanlar öğreticiyi biraz gelişmiş bulsa da, JavaScript becerilerini bir sonraki seviyeye taşımak için tazeleyiciler için harika bir arayış.
Öğe manipülasyonları hakkında bilgi edinmenin yanı sıra, saf JavaScript'in gücünü oyun arabirimi için yanıt veren bir kanvas şablon oluşturmak için kullanacaksınız. nesne yönelimli programlama (OOP). Oynatıcı aktif olarak hareketli olduğundan, JavaScript klavye kontrolü uygulaması, olay işleme, döngüler, işleçler, koşullar ve yerleşik ve özel işlevler, deneyimleyeceğiniz projeler arası deneyimler arasındadır. kazanmak.
8. JavaScript ile Mayın Tarlası Oluşturun
Özyinelemeli fonksiyonların gücünü keşfetmek ister ve dizi yöntemleri DOM öğelerini JavaScript ile çarpmada? Traversy Media'da Ania Kubów tarafından hazırlanan bu JavaScript Mayın Tarlası öğreticisiyle başlamak isteyebilirsiniz.
Detaylara çok dikkat etmeyi içerir. Ancak bu, yeni başlayanlar için uygun bir öğretici ve JavaScript kullanarak ızgara düzeni sistemini sarmak için en iyilerden biri. Nihai amaç, oyuncuların mayına basmaktan kaçındıkları bir ızgara şablonu oluşturmaktır.
Göründüğü kadar basit, oyunun işlevselliğini sahne arkasına bağlamak için çoğu JavaScript temel tekniğini içeren birçok programlama mantığı yazacaksınız.
9. HTML Canvas ile Pokemon JavaScript Oyun Eğitimi
Pokemon, JavaScript kullanarak oluşturabileceğiniz en karmaşık oyun projelerinden biridir. Bununla birlikte, JavaScript ile uzun ve titiz kodlama saatlerinin içindeyseniz ve daha fazla güvenle yenilenmiş olarak çıkmaya hazırsanız, bu eğiticiye atlamanız daha iyi olur.
JavaScript ile DOM komut dosyası oluşturma ve animasyona ek olarak, video size JavaScript kullanarak ses ve görüntüler de dahil olmak üzere varlıkları nasıl taşıyacağınızı ve oluşturacağınızı öğretir. Eğitimin JavaScript hakkında ortaya koyduğu ve gerçek hayattaki herhangi bir kodlama probleminde değerli bulacağınız pek çok şey var.
Öğretici, diğer temel JavaScript manipülatör tekniklerine ek olarak, OOP kavramlarını da yoğun bir şekilde kullanır; Daha sonra TypeScript'i araştırmayı planlıyorsanız, bu değerlidir. Bu eğitimin basitleştirici faktörlerinden biri, öğretmenin görevleri nasıl özetlediğidir.
Bunun çalışması için oluşturacağınız karmaşık sistemi hayal ettiğinizde geri adım atmak kolaydır. Ama sonunda ne kazanacağınızı bir düşünün.
JavaScript'in Problem Çözme Uygulamalarını Öğrenin
Oyunlar, programlamadaki en duyarlı ve sezgisel mantığın bazılarını kullanır. Bu yüzden JavaScript'i bir tane yaparak öğrenmeye değer. Bu eğitimler oyun tabanlı olmakla birlikte, web geliştirme ve mobil uygulama oluşturma da dahil olmak üzere diğer birçok kodlama sorunu için geçerli olan JavaScript temel kavramlarını size sunar. Daha sonra çerçevelere dönmeyi planlasanız bile, bu kavramları ne olursa olsun uygulayacaksınız.