Примеры хороших игр на основе Javascript / HTML5 [закрыто]


37

Теперь, когда Flash в значительной степени заменяется элементами HTML5 (видео, аудио, canvas и т. Д.), Есть ли хорошие примеры веб-игр, построенных на полностью открытых стандартах (то есть Javascript, HTML и CSS)? Я вижу много примеров реализации в чистом HTML5 того, что было когда-то только во Flash (например, здесь: http://www.html5rocks.com/ ), но не так много игр, в которых, по-видимому, доминирует Flash. Мне интересно, что возможно и каковы ограничения.


6
я рекомендую вам оставить первую строку - самый рейтинговый ответ не отвечает на ваш вопрос, но оскорбляет ваша предпосылка;)
oberhamsi

Ответы:


14

Вокруг HTML5 много ажиотажа, но сказать, что Flash в значительной степени заменяется им, - это преувеличение. В то время как видео и аудио теги могут набирать обороты, игры будут долгое время оставаться одной областью, не только из-за улучшенных инструментов и производительности, но также и потому, что есть бизнес-инфраструктура, построенная вокруг распространения файлов Swf, которая не будет легко адаптироваться к HTML и JS. Html5-игры, которые я видел с использованием canvas, примерно там, где Flash был 7 лет назад, и к тому времени, как ie9 будет достаточно широко распространен, чтобы canvas был жизнеспособным вариантом, Flash уже представит свои запланированные функции трехмерного и, возможно, аппаратного ускорения.


12
Если Adobe не соберется, Flash будет заменен HTML5, и я лично не буду плакать.
Simurr

@Simuri - я вроде согласен. Я профессионально использовал их Flex, и по сравнению с тем, как Sun управляет Java, я бы сказал, что Adobe намного более ... небрежна (из-за отсутствия лучшего слова).
Вейджи

2
Я, конечно, согласен с тем, что Adobe нужно объединить свои усилия. Но HTML5, очевидно, является просто последним модным словом (как AJAX, Web2.0 ранее) и не является настоящей технологией, которую вы хотели бы использовать и использовать прямо сейчас.
Iain

1
Я не согласен. С учетом недавних заявлений Microsoft о том, что IE9 охватывает технологии HTML5, единственное, чего на самом деле не хватает, - это достойной IDE. И я гарантирую вам, что люди, стоящие за Dreamweaver и Visual Studio, пытаются выяснить это. Это могут быть первые дни, но сейчас пришло время задуматься об использовании этих технологий - и внедрении лучших практик.
Райли Коррадини

@Simuri не хочет объяснить, почему? Adobe далека от совершенства, но, похоже, существует неоправданная враждебность к Flash (кстати, некоторые люди считают, что Flash украл их деньги на обед в школе). Самая большая неприятность, с которой я столкнулся в HTML5, - это отсутствие согласованности между брокерами, отсутствие производительности, и я не фанат JavaScript (мне нравятся строгие языки)
Аллан

12

В интересах изучения того, насколько далеко вы можете взять новейший набор браузеров, я и некоторые его коллеги кросс-скомпилировали порт Java с открытым исходным кодом Quake II для Safari / Chrome (в какой-то момент он должен работать и в Firefox, хотя изначально этого не произошло, в основном по соображениям производительности). Проект находится здесь: http://code.google.com/p/quake2-gwt-port/

Он все еще требует некоторого ухода и питания, чтобы запустить его (например, WebGL по-прежнему не включен по умолчанию в любом браузере доставки), но мы загрузили видео здесь: http://www.youtube.com/watch?v = XhMN0wlITLk (извините, это так темно - проблемы с гаммой остаются), и вы можете посмотреть наш рассказ о вводе / выводе Google здесь: http://code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

Я не знаю, сколько пройдет времени, прежде чем мы сможем реально зависеть от всех этих новых функций браузера (WebGL, WebSocket, аудио / видео, локальное хранилище и т. Д.), Но если все это объединится, это может иметь огромное значение в возможности поставлять игры прямо в Интернете. Но все еще остается много препятствий (например, не задерживайте дыхание, чтобы Microsoft внедрила WebGL в IE10).


1
Это очень крутая демонстрация, но технически это не ответ на вопрос. Он спросил о HTML5, а не о WebGL; в то время как эти два понятия часто смешиваются, они различаются (например, Internet Explorer реализует HTML5, но не WebGL.)
jhocking

6

EA of Lord of Ultima , пожалуй, самая впечатляющая игра на Javascript / HTML, которую я когда-либо видел.

Примечание: это стратегическая игра, а не название действия, поэтому, несмотря на то, что она имеет красивую плавную карту прокрутки, нет ничего, кроме нажатия на кнопки, в том, что касается прямой интерактивности.


Только что попробовал - впечатляет!
Тим Холт

ссылка, которую вы предоставляете, приводит меня к индексу игр.
expiredninja

5

«Мне любопытно, что возможно и каковы ограничения».

Ограничения основаны на браузере. Если вы используете что-то горячее, например, ночные ноты Webkit, Flash практически ничего не может сделать, чего не может сделать браузер изначально, например:

  • 2D графика (через холст) с вращением, масштабированием, прозрачностью и т. Д.
  • 3d (через холст и WebGL)
  • Аудио (через тэг аудио, хотя в настоящее время он отстой даже в браузерах, которые его поддерживают)
  • HTTP (через XMLHTTPRequest)
  • Локальное хранилище (через API localStorage)
  • Сокеты (через веб-сокеты)
  • SVG
  • Видео (через тег видео)

AFAIK, это все возможно и в Google Chrome (а если нет, то скоро будет). Походит на полную игровую среду для меня :)

(Я включил ссылки на все это в свой первый черновик, но StackExchange не позволил бы мне публиковать их, так как я новичок; извините!)


Все функции есть, но способ доступа к ним, Javascript, отсутствует по сравнению с ActionScript 3
Барт ван Хейкелом

Как же так? Пожалуйста, подчеркните.
Ричтаур

1
В ActionScript 3 есть классы, которые я лично считаю более интуитивно понятными, чем создание прототипов. Он имеет статическую типизацию (но может быть такой же динамической, как и JS, если это необходимо), что обеспечивает лучшую производительность и дает отличные IDE с автозаполнением, а также обнаруживает много ошибок во время компиляции, а не во время выполнения. Пакеты облегчают смешивание кода из нескольких проектов.
Барт ван Хейкелом

2
Все из которых являются субъективными преимуществами или не связаны с самим языком ...
Rushyo

1
По моему мнению, Javascript - это крутой и изменчивый язык, когда его берут за хорошие части ^^ Кстати, часть «аудио в настоящее время отстой» сейчас является серьезной проблемой: 7
Оскар Дувеборн


4

Парень из jquery создает игровой движок под названием Aves, используя javascript / html. Это видео описываются некоторые проблемы, с которыми он столкнулся во время разработки. Он много говорил о том, насколько медленным был холст и что он в настоящее время не ускорен.

Вы также можете найти целую кучу игр, разработанных с использованием движка Effect Games. Хотя двигатель выглядит довольно изолированным на своем сайте со всеми существующими инструментами и активами.

ИМО самым большим ограничением разработки js / html-игры является звук. Тег выполняет разные события в зависимости от safari / firefox / chrome, все из которых должны быть последней версией. Последнее, что я проверял, сафари работает только с MP3, а Firefox работает только с OGG. Хотя это вполне возможно, чтобы преодолеть это с помощью серверной логики.

В настоящее время я увлекаюсь написанием Flash-игр и не вижу, как этот домен преодолевается HTML5 (js / css / html), пока порталы не начнут их принимать или пока магазины веб-приложений не станут онлайн.


4

альтернативный текст

Contrasaurus

Эта игра была тщательно разработана с кровью, потом, слезами и HTML5. Базовая библиотека преобразования матрицы была представлена ​​как Matrix.js . Кроме того, многие из базовых языковых расширений, спрайтов, звуков и библиотек холста работают в The Pixie Game Platform. .

Нет Flash, все HTML5 Canvas и Audio. Лучше всего работает в Chrome.


4

Вы действительно должны проверить библиотеку CAAT - это потрясающе! Это библиотека сценограмм (например, thing.addchild / thing2.removechild) для canvas.

Это демо-версия сразило меня, а также игру, содержащуюся на этой странице: http://labs.hyperandroid.com/animation

Настолько, что я перешел на нашу собственную игру, чтобы использовать ее, и это заняло у меня всего одну ночь.

Загляните в многопользовательский снежный бой http://holiday2010.ogilvy.com

Настолько, что я попытался улучшить библиотеку и добавить в нее материал: http://github.com/onedayitwillmake/CAAT-Hello

Доступно на github: http://github.com/onedayitwillmake/CAAT-Hello/tree/circlepack



2

Google Pacman должен быть один из наиболее впечатляющих JS / HTML игр , которые я видел (предоставленные, это только один я видел, но это все-таки на самом деле впечатляет :)

Расположение исходного кода


3
не HTML5, просто DHTML, я верю. Плюс звук был сделан через Flash. Это было все, чтобы получить максимальную совместимость.
Иэн



2

Я только что закончил перенос своей космической стратегии с Silverlight / C # на чистый HTML5 / Javascript / Canvas:

Астриарх - правитель звезд

Это 2D-игра, графически очень простая, поэтому она прекрасно подойдет для использования холста, потому что там не много рисования. При этом, я впечатлен тем, что делают другие, более анимированные игры с той же технологией. Как злые птицы в интернет-магазине Chrome: Angry Birds , вы также можете попробовать другие игры в интернет-магазине Chrome для получения дополнительных примеров.

Одна из причин, по которой я портировал свою игру, заключалась в том, что я хотел, чтобы она могла работать на планшетных / мобильных устройствах без необходимости перекодирования всего кода в Java или Objective C. И iOS, и Android имеют элементы управления «WebView», чтобы сделать это проще, но У меня были проблемы с тем, что я немного повозился с этим (iOS требует, чтобы все ваши ресурсы были в одной папке, насколько я видел).

Этот тип кроссплатформенных требований является хорошей причиной, по которой некоторые люди переходят от Flash к HTML5, но недостатком является то, что вам приходится тестировать на N различных браузерах и версиях, и все головные боли связаны с типичной веб-разработкой. Эти проблемы устраняются библиотеками, такими как jQuery, и некоторыми другими библиотеками / платформами игр HTML5, упомянутыми здесь ( ImpactJS - это та, которую я видел, но не пробовал). Также эти проблемы не будут такими серьезными, когда FireFox 7 выйдет и IE 9+ станет более распространенным.

Если вас интересуют некоторые проблемы, с которыми я столкнулся при переносе с Silverlight на HTML5 Canvas, вам следует ознакомиться с моей записью в блоге здесь: Перенос приложения Silverlight на javascript с использованием HTML5-тега Canvas


2

Вот 3 отличные игры, использующие движок ImpactJS .

Impact - это игровой движок JavaScript, который позволяет разрабатывать потрясающие HTML5-игры для настольных и мобильных браузеров.

Если вы в настоящее время не уверены в том, что вы можете сделать с HTML5, я бы сказал, что это лучшие примеры. Имейте в виду, что, поскольку это такая горячая тема, поле быстро меняется!


Z-Type

A Space Shoot'em'Up, где вы печатаете, чтобы стрелять.

БиоЛАБ

Пробейся через зараженный биолаб в этом Jump'n'Run. Используйте свой плазменный пистолет, чтобы стрелять во все, что движется! Есть 3 уровня для исследования и 6 типов врагов для борьбы.

Существа и Замки

Игра-головоломка, в которой вы помогаете молодому охотнику за сокровищами украсть огромное количество сокровищ из средневекового замка.




0

Очень интересная среда разработки HTML5, на которую я недавно наткнулся, - это Sencha. Это в основном для портативных / сенсорных устройств, но что не через пару лет? Вот несколько интригующих демонстраций, включая карточную игру:

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


0

Вот некоторые HTML5-игры на Effects Games ... есть даже проекты, в которых вы можете принять участие. Убивал время между компиляциями в основном с помощью своей Crystal Galaxy Demo



Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.