Przykłady dobrych gier opartych na JavaScript / HTML5 [zamknięte]


37

Teraz, gdy Flash jest w dużej mierze zastępowany elementami HTML5 (wideo, audio, płótno itp.), Czy są jakieś dobre przykłady gier internetowych opartych na całkowicie otwartych standardach (tj. JavaScript, HTML i CSS)? Widzę wiele przykładów czystych implementacji HTML5 tego, co było kiedyś tylko we Flashu (np. Tutaj: http://www.html5rocks.com/ ), ale nie ma wielu gier, domeny, która nadal wydaje się zdominowana przez Flash. Jestem ciekaw, co jest możliwe i jakie są ograniczenia.


6
polecam upuścić pierwszą linię - najwyżej oceniona odpowiedź nie odpowiada na twoje pytanie, ale obraża cię twoja przesłanka;)
oberhamsi

Odpowiedzi:


14

W HTML5 jest dużo szumu, ale stwierdzenie, że Flash w dużej mierze jest przez niego zastępowany, jest przesadą. Podczas gdy tagi wideo i audio mogą zyskać na popularności, granie będzie jednym z obszarów, które utrzyma się przez długi czas, nie tylko ze względu na lepsze narzędzia i wydajność, ale także dlatego, że wokół infrastruktury dystrybucji SWF zbudowana jest infrastruktura biznesowa, która nie byłaby łatwa dostosować do HTML i js. Gry HTML5, które widziałem przy użyciu canvas, były mniej więcej tam, gdzie Flash był 7 lat temu, a do czasu, gdy ie9 jest wystarczająco rozpowszechniony, że Canvas jest realną opcją, Flash już wprowadził swoje planowane funkcje 3D i prawdopodobnie przyspieszenie sprzętowe.


12
Jeśli Adobe nie uda się razem, Flash zostanie zastąpiony przez HTML5, a ja osobiście nie uronię łzy.
Simurr,

@Simuri - zgadzam się. Używałem ich Flexa profesjonalnie i w porównaniu ze sposobem, w jaki Sun zarządza Javą, powiedziałbym, że Adobe jest o wiele bardziej ... niechlujny (z powodu braku lepszego słowa).
weiji,

2
Z pewnością zgadzam się, że Adobe musi zebrać się w sobie. Ale HTML5 jest tak oczywiście najnowszym modnym hasłem (jak AJAX, Web2.0 poprzednio), a nie prawdziwą technologią, z której chciałbyś teraz skorzystać.
Iain

1
Nie zgadzam się. W związku z ostatnimi zapowiedziami Microsoftu dotyczącymi technologii HTML5 jedyne, czego tak naprawdę brakuje, to przyzwoite IDE. Gwarantuję ci, że zarówno ludzie Dreamweaver, jak i Visual Studio próbują to zrozumieć. Mogą to być wczesne dni, ale teraz czas, aby zacząć myśleć o korzystaniu z tych technologii i ustalaniu najlepszych praktyk.
Rylee Corradini,

@Simuri chce wyjaśnić, dlaczego? Adobe jest daleki od ideału, ale wydaje się, że istnieje nieuzasadniona animozja w stosunku do Flasha (przy okazji niektórzy ludzie uważają, że Flash ukradł ich pieniądze na lunch w szkole). Największą wadą HTML5 jest brak spójności między przeglądarkami, brak wydajności i nie jestem fanem JavaScript (lubię surowe języki)
Allan

12

W celu zbadania, jak daleko można posunąć najnowszą wersję przeglądarek, ja i niektórzy współpracownicy skompilowaliśmy krzyżowo port Java Quake II o otwartym kodzie źródłowym do Safari / Chrome (w pewnym momencie powinien on również działać w przeglądarce Firefox, chociaż początkowo tak nie było, głównie ze względu na wydajność). Projekt znajduje się tutaj: http://code.google.com/p/quake2-gwt-port/

Nadal wymaga trochę opieki i karmienia, aby go uruchomić (np. WebGL nadal nie jest domyślnie włączony w żadnej przeglądarce wysyłkowej), ale przesłaliśmy film tutaj: http://www.youtube.com/watch?v = XhMN0wlITLk (przepraszam, że jest tak ciemno - problemy z gamma pozostają) i możesz zobaczyć nasz Google I / O talk tutaj: http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

Nie wiem, ile to potrwa, zanim będziemy mogli realistycznie polegać na tych wszystkich nowych funkcjach przeglądarki (WebGL, WebSocket, audio / wideo, pamięć lokalna itp.), Ale jeśli wszystko się połączy, może to mieć ogromną różnicę w możliwości wysyłania gier bezpośrednio w Internecie. Ale wciąż pozostaje wiele przeszkód (np. Nie wstrzymuj się, aby Microsoft wdrożył WebGL w IE10).


1
To bardzo fajne demo, ale technicznie nie jest odpowiedzią na pytanie. Zapytał o HTML5, a nie WebGL; podczas gdy te dwa są często splecione, są różne (np. Internet Explorer implementuje HTML5, ale nie WebGL.)
jhocking

6

Lord of Ultima firmy EA to prawdopodobnie najbardziej imponująca gra oparta na JavaScript / HTML, jaką widziałem.

Uwaga: To gra strategiczna, a nie tytuł akcji, więc chociaż ma ładną płynną mapę, nie ma nic poza klikaniem przycisków w zakresie bezpośredniej interakcji.


Właśnie tego spróbowałem - całkiem imponujące!
Tim Holt

podany przez ciebie link prowadzi mnie do indeksu gier.
expiredninja

5

„Jestem ciekaw, co jest możliwe i jakie są ograniczenia”.

Ograniczenia dotyczą przeglądarki. Jeśli używasz czegoś gorącego, takiego jak nightlies Webkit, w zasadzie nie ma nic, co flash może zrobić, czego nie można zrobić w przeglądarce, np .:

  • Grafika 2d (przez płótno) z obrotem, skalowaniem, kryciem itp.
  • 3d (przez płótno i WebGL)
  • Audio (przez tag audio, choć obecnie jest do bani nawet w przeglądarkach, które go obsługują)
  • HTTP (przez XMLHTTPRequest)
  • Lokalna pamięć masowa (za pośrednictwem interfejsu API localStorage)
  • Gniazda (przez gniazda sieciowe)
  • SVG
  • Wideo (przez tag wideo)

AFAIK, to wszystko jest możliwe także w Google Chrome (a jeśli nie, wkrótce.) Brzmi dla mnie jak kompletne środowisko gry :)

(W pierwszym szkicu umieściłem linki do wszystkich tych rzeczy, ale StackExchange nie pozwoliło mi ich opublikować, ponieważ jestem nowy; przepraszam!)


Wszystkie funkcje są dostępne, ale brakuje dostępu do JavaScript, w porównaniu do ActionScript 3
Bart van Heukelom

Jak to? Proszę podkreślić.
richtaur

1
ActionScript 3 ma klasy, które według mnie są bardziej intuicyjne w użyciu niż prototypowanie. Ma statyczne pisanie (ale w razie potrzeby może być tak dynamiczne jak JS), co zapewnia lepszą wydajność i pozwala na świetne IDE z autouzupełnianiem, a także wykrywanie wielu błędów w czasie kompilacji, a nie w czasie wykonywania. Pakiety ułatwiają mieszanie kodu z wielu projektów.
Bart van Heukelom,

2
Wszystkie z nich są subiektywnymi zaletami lub nie są związane z samym językiem ...
Rushyo,

1
Imo, JavaScript jest fajnym i płynnym językiem, gdy bierze się go z dobrych stron ^^ Btw, część „audio jest do bani” jest obecnie głównym problemem: 7
Oskar Duveborn


4

JQuery ui buduje silnik gry o nazwie Aves za pomocą javascript / html. W tym filmie opisano niektóre wyzwania, które napotkał podczas programowania. Dużo mówił o tym, jak wolne jest płótno i że nie jest ono obecnie przyspieszone.

Można również znaleźć całą masę gier opracowanych przy użyciu silnika Effect Games. Mimo, że silnik wygląda na piaskownicę na swojej stronie, z wszystkimi narzędziami i zasobami tam istniejącymi.

IMO największym ograniczeniem tworzenia gry js / html jest dźwięk. Tag działa inaczej w przypadku zdarzeń w safari / firefox / chrome, z których wszystkie muszą być najnowszymi wersjami. Ostatnio sprawdziłem, że safari działa tylko z MP3, a Firefox działa tylko z OGG. Chociaż jest to całkowicie możliwe do pokonania dzięki kombinacji logiki serwerowej.

Obecnie zajmuję się pisaniem gier Flash i nie widzę, że ta domena jest omijana przez HTML5 (js / css / html), dopóki portale nie zaczną ich akceptować lub sklepy z aplikacjami internetowymi przejdą do trybu online.



4

NAPRAWDĘ musisz sprawdzić bibliotekę CAAT - to niesamowite! Jest to biblioteka scenegrafów (np. Thing.addchild / thing2.removechild) dla płótna.

To demo mnie zaskoczyło, wraz z grą również na tej stronie: http://labs.hyperandroid.com/animation

Do tego stopnia, że ​​przeniosłem się na własną grę, aby z niej skorzystać, i zajęło mi to tylko jedną noc.

Wpadnij, gra w śnieżki dla wielu graczy http://holiday2010.ogilvy.com

Tak bardzo, że próbowałem ulepszyć bibliotekę i dodać do niej rzeczy: http://github.com/onedayitwillmake/CAAT-Hello

Dostępne na github: http://github.com/onedayitwillmake/CAAT-Hello/tree/circlepack



2

Google Pacman ma być jednym z bardziej imponujących JS / HTML gier widziałem (przyznane, jest to tylko jeden widziałem, ale to wciąż naprawdę imponujące :)

Lokalizacje kodu źródłowego


3
nie HTML5, tylko DHTML, wierzę. Plus dźwięk został wykonany przez Flash. Wszystko po to, by uzyskać maksymalną kompatybilność.
Iain



2

Właśnie skończyłem przenosić moją grę Space Strategy z Silverlight / C # na czysty HTML5 / JavaScript / Canvas:

Astriarch - Władca Gwiazd

Jest to gra 2D i bardzo prosta graficznie, więc dobrze nadaje się do korzystania z płótna, ponieważ nie dzieje się dużo malowania. Biorąc to pod uwagę, jestem pod wrażeniem tego, co robią inne, bardziej animowane gry z tą samą technologią. Podobnie jak wściekłe ptaki w sklepie internetowym chrome: Angry Birds , możesz również sprawdzić niektóre inne gry w sklepie Chrome Web, aby uzyskać więcej przykładów.

Jednym z powodów, dla których przeniosłem swoją grę, było to, że chciałem, aby mogła ona działać na tablecie / urządzeniu mobilnym bez konieczności ponownego kodowania całej zawartości w Javie lub Objective C. Zarówno iOS, jak i Android mają kontrolki „WebView”, aby to ułatwić, ale Miałem problem z drobnymi majstrowaniem przy sobie, co zrobiłem (iOS wymaga, aby wszystkie twoje zasoby były w jednym folderze, o ile widziałem).

Ten rodzaj wymagań międzyplatformowych jest dobrym powodem, dla którego niektórzy ludzie odchodzą od Flasha w kierunku HTML5, ale wadą jest to, że musisz przetestować na N różnych przeglądarkach i wersjach i mieć wszystkie problemy związane z typowym tworzeniem stron internetowych. Problemy te są rozwiązywane przez biblioteki takie jak jQuery i niektóre inne biblioteki / platformy gier HTML5 wspomniane tutaj ( ImpactJS to taki, który widziałem, ale nie próbowałem). Te problemy nie będą już stanowić większego problemu, gdy FireFox 7 zostanie wydany, a IE 9+ stanie się bardziej wszechobecny.

Jeśli jesteś zainteresowany niektórymi problemami, jakie napotkałem podczas przenoszenia z Silverlight na HTML5 Canvas, powinieneś sprawdzić mój post na blogu: Przenoszenie aplikacji Silverlight na javascript za pomocą tagu HTML5 Canvas


2

Oto 3 świetne gry wykorzystujące silnik ImpactJS .

Impact to silnik gier JavaScript, który umożliwia tworzenie oszałamiających gier HTML5 na przeglądarki stacjonarne i mobilne.

Jeśli nie masz pewności, co możesz zrobić z HTML5, powiedziałbym, że są to obecnie najlepsze przykłady. Pamiętaj jednak, że ponieważ jest to gorący temat, pole szybko się zmienia!


Typ Z.

Space Shoot'em'Up, w którym piszesz, aby strzelać.

Biolab

Przebij się przez zainfekowany Biolab w tym Jump'n'Run. Użyj swojej broni plazmowej, aby strzelać do wszystkiego, co się rusza! Istnieją 3 poziomy do zbadania i 6 rodzajów wrogów do walki.

Stworzenia i zamki

Gra akcji i układanki, w której pomagasz młodemu łowcowi skarbów ukraść ogromne ilości skarbów ze średniowiecznego zamku.




0

Bardzo interesującą platformą programistyczną HTML5, na którą ostatnio natknąłem jest Sencha. Dotyczy to głównie urządzeń kieszonkowych / dotykowych, ale co za kilka lat nie będzie oparte na dotyku? Oto kilka intrygujących wersji demonstracyjnych, w tym gra karciana:

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


0

Oto niektóre gry HTML5 na Effects Games ... są tam nawet projekty, w które możesz zaangażować się. Zabijam czas między kompilacjami głównie dzięki ich demo Crystal Galaxy



0

wypróbuj szeregowca Joe, aby uzyskać pełną strzelankę 2D zręcznościową

jeśli chcesz wypróbować gry zoptymalizowane pod kątem urządzeń mobilnych, przejdź do marketJS

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.