Javascript / HTML5 tabanlı oyun örnekleri [kapalı]

Artık Flash büyük ölçüde HTML5 öğeleriyle (video, ses, tuval vb.) Değiştiriliyor. Tamamen açık standartlar üzerine inşa edilmiş web tabanlı oyunların (Javascript, HTML ve CSS) iyi bir örneği var mı? Bir zamanlar sadece Flash'ta olanların (buradakiler gibi: http://www.html5rocks.com/ ) saf HTML5 uygulamalarının pek çok örneğini görüyorum ama yine de Flash'ın hâkim olduğu görünen bir alan değil. Neyin mümkün olduğunu ve sınırlamaların neler olduğunu merak ediyorum.

HTML5 etrafında bir çok yutturmaca var, ancak Flash'ın büyük ölçüde onun yerini aldığını söylemek bir abartmadır. Video ve ses etiketleri çekiş gücü kazanabilirken, oyun sadece daha iyi takım ve performans nedeniyle değil, aynı zamanda Swf dosyalarını dağıtmak için inşa edilmiş bir iş altyapısı olduğu için kolay olmayan bir alan olacaktır. HTML ve js'ye uyarlayın. Tuval kullanırken gördüğüm html5 oyunları yaklaşık 7 yıl önce flaşın olduğu ve yani 9'un tuvalin uygulanabilir bir seçenek olduğu kadar geniş ölçüde dağıtıldığı zaman, Flash planlı 3d ve muhtemelen donanım hızlandırma özelliklerini tanıtmış olacak.

En yeni tarayıcı ürününü ne kadar uzağa götürebileceğinizi keşfetmek için, ben ve bazı iş arkadaşlarım Quake II'nin açık kaynaklı Java bağlantı noktasını Safari / Chrome'a ​​çapraz derledik (Firefox'ta da bir noktada çalışması gerekir). başlangıçta olmamasına rağmen, büyük ölçüde performans nedeniyle). Proje burada: http://code.google.com/p/quake2-gwt-port/

Çalıştırmak ve çalıştırmak için hala biraz özen ve beslenmeyi gerektirir (örneğin, WebGL herhangi bir gönderim tarayıcısında varsayılan olarak etkin değildir), ancak buraya bir video yükledik: http://www.youtube.com/watch?v = XhMN0wlITLk (üzgünüm çok karanlık - gama sorunları devam ediyor) ve Google G / Ç konuşmamızı burada görebilirsiniz: http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

Tüm bu yeni tarayıcı özelliklerine (WebGL, WebSocket, ses / video, yerel depolama, vb.) Gerçekçi olarak güvenebilmemizin ne kadar zaman alacağını bilmiyorum, ama hepsi bir araya gelirse çok büyük bir fark yaratabilir. doğrudan web üzerinden oyun gemi yeteneği. Ancak hala birçok engel var (örneğin, Microsoft’un IE10’da WebGL’yi uygulaması için nefesini tutmayın).

EA'nın Ultima Lordu muhtemelen gördüğüm en görsel olarak etkileyici Javascript / HTML tabanlı bir oyundur.

Not: Bu bir strateji oyunudur ve bir aksiyon başlığı değil, hoş bir pürüzsüz kaydırma haritasına sahip olsa da, doğrudan etkileşim devam ettiği sürece düğmelere tıklamanın ötesinde bir şey yoktur.

"Neyin mümkün olduğunu ve sınırlamaların neler olduğunu merak ediyorum."

Sınırlamalar tarayıcı tabanlıdır. Webkit geceleri gibi sıcak bir şey kullanıyorsanız, tarayıcının yerel olarak yapamayacağı flash'ın yapabileceği hiçbir şey yoktur, örneğin:

• 2d Grafik (tuval ile), döndürme, ölçeklendirme, opaklık vb.
• 3d (tuval ve WebGL üzerinden)
• Ses (ses etiketi aracılığıyla, şu anda onu destekleyen tarayıcılarda bile berbat olsa da)
• HTTP (XMLHTTPRequest aracılığıyla)
• Yerel Depolama (localStorage API'sı aracılığıyla)
• Soketler (Web Soketleri aracılığıyla)
• SVG
• Video (video etiketi aracılığıyla)

Hepsi Google Chrome'da da mümkün olan AFAIK (ve mümkün değilse, yakında olacak). Bana tam bir oyun ortamı gibi geliyor :)

(İlk taslakta tüm bunlara bağlantılar ekledim ancak StackExchange yeni olduğum için göndermeme izin vermedi; üzgünüm!)

Bu web sitelerine bir göz atın:

• http://html5games.com/
• http://web.appstorm.net/roundups/browsers/10-html5-games-paving-the-way/

Bir jquery ui adam javascript / html kullanarak Aves adlı bir oyun motoru inşa ediyor. Bu video , geliştirme sırasında karşılaştığı bazı zorlukları anlatıyor. Tuvalin ne kadar yavaş olduğu ve şu anda hızlanmadığı hakkında çok konuştu.

Ayrıca Effect Games motorunu kullanarak geliştirilen bir sürü oyun da bulabilirsiniz. Her ne kadar motor, orada bulunan tüm alet ve varlıklar ile kendi alanında oldukça korumalı gözükse de.

IMO, bir js / html oyunu geliştirmenin en büyük sınırlaması ses. Etiket, her biri en son sürüm olması gereken safari / firefox / chrome'da farklı bir şekilde performans gösterir. Son kontrol ettiğimde safari sadece MP3 ile çalıştı, firefox sadece OGG ile çalıştı. Her ne kadar tamamen bir sunucu mantığı kombo ile bu üstesinden gelmek mümkün olsa da.

Şu anda Flash oyunlar yazmaktan hobi oluyorum ve alanların HTML5 (js / css / html) tarafından üstesinden gelinebildiğini ve portallar onları kabul etmeye başlayana veya web uygulama mağazalarının çevrimiçi hale gelene kadar göremiyorum.

Contrasaurus

Bu oyun özenle kan, ter, gözyaşı ve HTML5 ile yaratılmıştır. Çekirdek matris dönüşüm kütüphanesi Matrix.js olarak tanıtıldı . Ek olarak, çekirdek dil uzantılarının, sprite'ların, seslerin ve tuval kütüphanelerinin birçoğu da Pixie Oyun Platformu'na girmeye çalışıyor .

Flash yok, tüm HTML5 Canvas ve Ses. Chrome'da en iyi şekilde çalışır.

Gerçekten CAAT kütüphanesini kontrol etmelisin - bu harika! Tuval için bir senaryo (örn. Thing.addchild / thing2.removechild) kütüphanesi.

Bu demo da o sayfada yer alan oyun ile birlikte beni uzakta patladı: http://labs.hyperandroid.com/animation

Öyle ki kullanmak için kendi oyunumuzu transfer ettim ve bu sadece bir gece sürdü.

Bırakın, çok oyunculu kartopu savaşı http://holiday2010.ogilvy.com

Öyle ki, kiracağı iyileştirmeye ve içine bir şeyler eklemeye çalıştım: http://github.com/onedayitwillmake/CAAT-Hello

Github'da mevcut: http://github.com/onedayitwillmake/CAAT-Hello/tree/circlepack

Kontroller berbat olsa da / çalışmaya ihtiyaç duysa da, Akihabara'ya düşkünüm - http://www.kesiev.com/akihabara/

Google Pacman bu, ben (görülme verilen ettik daha etkileyici JS / HTML oyunlarından biri olmak zorunda sadece gördüğüm tek, ama hala var gerçekten :) etkileyici

Kaynak Kodu konumları

Akihabara Kütüphaneler araya koymak için mükemmel öğreticiler vardır Darius Kazemi ve Darren TORPEY de: Akihabara Öğreticiler

Biolab Disaster, html5 ve js ile neler yapılabileceğini gösteren oldukça iyi bir taraf kaydırma platformudur. http://playbiolab.com/

Uzay Stratejisi oyunumu Silverlight / C # 'dan saf HTML5 / Javascript / Canvas'a taşımayı yeni bitirdim:

Astriarch - Yıldızların Hakimi

2D bir oyundur ve grafiksel olarak çok basittir, bu yüzden tuvali kullanmaya güzel bir şekilde katkıda bulunur çünkü devam eden çok fazla resim yoktur. Olduğu söyleniyor, diğer bazı, daha hareketli oyunların orada aynı teknolojiyle yaptıklarından etkilendim. Chrome web mağazasındaki öfkeli kuşlar gibi: Angry Birds , daha fazla örnek için Chrome Web mağazasındaki diğer oyunlara da göz atabilirsiniz.

Oyunumu aktarmamın bir nedeni, her şeyi Java ya da Objective C’de yeniden kodlamak zorunda kalmadan tablet / mobil cihazlarda çalışabilmeyi istememişti. İOS ve Android’in her ikisinde de bunu daha kolay hale getirmek için 'WebView' kontrolleri vardı. Bununla uğraşmak konusunda biraz sorun yaşadım (iOS, tüm varlıklarınızın gördüğüm kadarıyla tek bir klasörde olmasını gerektiriyor).

Bu tür platformlar arası gereksinim, bazı kişilerin Flash'tan ve HTML5'ten uzaklaşmasının iyi bir nedenidir; ancak olumsuz tarafı, N farklı tarayıcı ve sürümlerde test etmeniz ve tipik web geliştirme ile ilgili tüm baş ağrıları yaşamanızdır. Bu problemler, jQuery gibi kütüphaneler ve burada bahsettiğimiz diğer HTML5 oyun kütüphaneleri / platformlarından bazıları tarafından hafifletilir ( ImpactJS , gördüğüm ama denemedim). Ayrıca, FireFox 7 çıktığında ve IE 9+ daha yaygın hale geldiğinde, bu sorunlar bir sorun olmayacak.

Silverlight'tan HTML5 Canvas'a aktarmayla ilgili karşılaştığım bazı sorunlarla ilgileniyorsanız, blog yazımı buradan incelemelisiniz: Silverlight Uygulamasını HTML5 Canvas etiketini kullanarak javascript'e taşıma

İşte ImpactJS motorunu kullanan 3 harika oyun .

Impact, masaüstü ve mobil tarayıcılar için çarpıcı HTML5 Oyunları geliştirmenize izin veren bir JavaScript Oyun Motorudur.

Şu anda HTML5 ile neler yapabileceğinizi bilmiyorsanız, bunların şu anda en iyi örnekler olduğunu söyleyebilirim. Yine de çok sıcak bir konu olduğu için alanın hızla değiştiğini unutmayın!

Z-Type

Bir Space Shoot'em'Up'ı vurduğunuz yere yazın.

Biolab

Bu Jump'n'Run'da virüslü bir Biolab'da savaşın. Hareket eden her şeyi çekmek için Plazma Tabancanı kullan! Keşfedilecek 3 seviye ve savaşacak 6 çeşit düşman var.

Yaratıklar ve Kaleler

Genç bir hazine avcısına, bir ortaçağ kalesinden büyük miktarda hazine çalmasına yardım ettiğin bir aksiyon-bulmaca oyunu.

Tesadüf eseri, bugün Slashdot'ta html5 / javascript oyunuyla ilgili bir soru vardı:

http://ask.slashdot.org/story/10/07/14/0632238/JavaScriptHTML-5-Gaming

Özel olarak yandan kayan bir uzay tetikçisi olan Galactic Plunder'den bahseder:

http://dougx.net/plunder/plunder.html

http://www.javascriptgaming.com/

Son zamanlarda karşılaştığım gerçekten ilginç bir HTML5 geliştirme çerçevesi Sencha. Bu el / touch cihazları için esas olduğunu, ancak ne değil bir kaç yıl sonra dokunmatik dayanması olacak? İşte bir kart oyunu da dahil olmak üzere ilgi çekici demolar:

http://www.sencha.com/products/touch/demos.php

İşte Etkileri Oyunları hakkında bazı HTML5 oyunlar ... oraya dahil olmak için atlayabileceğiniz projeler bile var. Kristal Galaxy Demo ile derlemeler arasında zaman öldürüyorlardı

Siteden: "Cycleblob, WebGL ve HTML 5 canvas öğeleri kullanılarak uygulanır ve tamamen JavaScript ile yazılmıştır."

http://cycleblob.com/

2d retro arcade shooter için Özel Joe deneyin

Mobil optimizasyonlu oyunları denemek istiyorsanız, markete gidin.