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

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.

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.

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).

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.

„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!)

Zajrzyj na te strony:

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

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.

Contrasaurus

Ta gra została starannie stworzona z użyciem krwi, potu, łez i HTML5. Biblioteka podstawowych transformacji macierzy została wydzielona jako Matrix.js . Ponadto wiele podstawowych rozszerzeń języka, ikonek, dźwięków i bibliotek kanwy działa na platformie The Pixie Game Platform .

Bez Flasha, wszystkie HTML5 Canvas i Audio. Działa najlepiej w Chrome.

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

Mimo że kontrole są zepsute / wymagają pracy, lubię Akihabara - http://www.kesiev.com/akihabara/

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

Istnieją doskonałe samouczki dla bibliotek Akihabara opracowane przez Dariusa Kazemi i Darrena Torpeya na: Tutoriale Akihabara

Biolab Disaster to całkiem niezła platformówka sidecrolling pokazująca, co można zrobić przy pomocy HTML5 i JS. http://playbiolab.com/

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

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.

Przypadkowo na Slashdot pojawiło się dzisiaj pytanie dotyczące gier HTML5 / javascript:

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

Wspomina konkretnie Galactic Plunder, kosmiczną strzelankę:

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

http://www.javascriptgaming.com/

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

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

Ze strony: „Cycleblob jest implementowany przy użyciu elementów canvas WebGL i HTML 5 i jest napisany całkowicie w JavaScript”.

http://cycleblob.com/

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