Приклади хороших ігор на основі Javascript / HTML5 [закрито]


37

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


6
я рекомендую вам відпустити перший рядок - відповідь, що найкраще оцінюється, не відповідає на ваше запитання, але ображений вашим передумовою;)
oberhamsi

Відповіді:


14

Навколо HTML5 дуже багато галасу, але сказати, що Flash в основному замінюється ним, це завищення. Незважаючи на теги відео та аудіо, можна отримати тягу, ігрові ігри будуть довгим часом не тільки завдяки кращому інструменту та продуктивності, а й тому, що для розповсюдження файлів Swf існує бізнес-інфраструктура, що не буде легко адаптувати до HTML та js. Ігри html5, які я бачив, використовуючи полотно, приблизно там, де флеш був 7 років тому, і до того часу, коли ie9 досить широко розповсюджений, що полотно є життєздатним варіантом, Flash вже представив заплановані 3d та, можливо, функції апаратного прискорення.


12
Якщо Adobe не з’єднається, Flash буде замінено HTML5, і я особисто не проллю сліз.
Сімурр

@Simuri - Я згодна з цим. Я використовував їхні матеріали Flex професійно, і порівняно з тим, як Sun керує Java, я б сказав, що Adobe набагато більше ... неохайний (за відсутністю кращого слова).
weiji

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

1
Я не погоджуюсь. З останніх повідомлень від Microsoft про IE9, що застосовують технології HTML5, єдине, чого насправді не вистачає, - це гідний IDE. І я гарантую вам, що люди, що стоять за Dreamweaver і Visual Studio, намагаються зрозуміти саме це. Це може бути ранніми днями, але час почати думати про використання цих технологій - та встановлення найкращих практик - зараз.
Rylee Corradini

@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/sesions/gwt -html5.html

Я не знаю, скільки часу пройде, перш ніж ми зможемо реально залежати від усіх цих нових функцій веб-переглядача (WebGL, WebSocket, аудіо / відео, локальне сховище тощо), але якщо все зійдеться, це може призвести до величезних змін у можливості відправляти ігри безпосередньо в Інтернеті. Але залишається багато перешкод (наприклад, не затримуйте дихання, щоб Microsoft впровадив WebGL в IE10).


1
Це дуже класна демонстрація, але технічно не є відповіддю на питання. Він запитав про HTML5, а не WebGL; в той час як обидва часто пов'язані, вони різні (наприклад, Internet Explorer реалізує HTML5, але не WebGL.)
jhocking

6

EA Lord of Ultima - це, мабуть, найбільш візуально вражаюча гра на основі Javascript / HTML, яку я бачив.

Примітка. Це стратегічна гра, а не назва дії, тому, маючи приємну плавну прокрутку карту, немає нічого, крім натискання на кнопки, наскільки йде пряма інтерактивність.


Просто спробував - досить вражаюче!
Тім Холт

надане вами посилання приводить мене до індексу ігор.
закінчився термін дії

5

"Мені цікаво, що можливо і які обмеження".

Обмеження базуються на браузері. Якщо ви використовуєте щось гаряче, як, наприклад, солов’ї Webkit, в основному нічого не може зробити цей спалах, який б браузер не може робити так, як-от:

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

AFAIK - це все можливо і в Google Chrome (і якщо це не так, це буде незабаром). Для мене звучить повноцінне ігрове середовище :)

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


Усі функції є, але способу доступу до них, Javascript, бракує в порівнянні з ActionScript 3
Барт ван Хекелом

Як так? Будь ласка, підкресліть.
richtaur

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

2
Усе це має суб'єктивні переваги чи не пов'язане з самою мовою ...
Rushyo

1
Imo, Javascript - це крута і плавна мова, якщо брати її за хороші частини ^^ Btw, частина «аудіо в даний час смокче» - головне питання зараз: 7
Оскар Дювеборн


4

Хлопець jquery ui будує ігровий движок під назвою Aves за допомогою JavaScript / html. У цьому відео описуються деякі проблеми, з якими він стикався під час розвитку. Він багато говорив про те, наскільки повільним було полотно, і що воно наразі не прискорено.

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

IMO найбільшим обмеженням розробки гри js / html є звук. Тег виконує по-різному події у сафарі / firefox / chrome, всі вони повинні бути останньою версією. Востаннє я перевіряв, що сафарі працює лише з MP3, а Firefox працює лише з OGG. Хоча цілком реально подолати це за допомогою комбінованої логіки серверів.

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


4

alt text

Контразавр

Ця гра старанно створена кров’ю, потом, сльозами та HTML5. Основна бібліотека перетворень матриці була запущена як Matrix.js . Крім того, багато розширень мови, спрайтів, звуків та полотен основної мови працюють на платформі Pixie Game .

Немає Flash, усі HTML5 полотна та аудіо. Найкраще працює в Chrome.


4

Ви дійсно повинні перевірити бібліотеку CAAT - це приголомшливо! Це бібліотека сцени (наприклад, thing.addchild / thing2.removechild) для полотна.

Ця демонстрація цього фільму підірвала мене разом із грою, що містилася на цій сторінці: 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. Це було все для отримання максимальної сумісності.
Iain



2

Я щойно закінчив перенесення моєї гри про космічну стратегію із Silverlight / C # до чистого HTML5 / Javascript / Canvas:

Астріарх - Правитель зірок

Це 2D гра і графічно дуже проста, тому вона чудово піддається використанню полотна, оскільки картини не так багато. Попри це, я вражений тим, що деякі інші, більш анімовані ігри роблять там із тією ж технологією. Як і розлючені птахи у веб-магазині хрому: 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-Тип

Space Shoot'em'Up, куди ви вводите зйомку.

Біолаб

Боріться за свій шлях через заражену біолаб у цій Jump'n'Run. Використовуйте свій плазмовий пістолет, щоб знімати все, що рухається! Є 3 рівня для вивчення та 6 типів ворогів для боротьби.

Істоти та замки

Гра-головоломка, в якій ви допомагаєте молодому шукачеві скарбів викрасти величезну кількість скарбів із середньовічного замку.




0

Справді цікава структура розробки HTML5, про яку я нещодавно натрапила, - це Сенча. Це в основному для кишенькових / сенсорних пристроїв, але що не буде на основі сенсорної роботи через пару років? Ось кілька інтригуючих демонстрацій, зокрема карткова гра:

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


0

Ось декілька ігор HTML5 на Ігри з ефектами ... Є навіть проекти, на яких можна вступити. Вбивали час між компіляціями здебільшого з їх демонстрацією Crystal Galaxy



Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.