Создание игр Javascript и HTML5

Давным-давно (Netscape 4-эра), я написал Javascript-игры: Pong, Minesweeper и John Conway Life среди них. Я возвращаюсь к нему и хочу, чтобы мои руки были еще более грязными.

У меня есть несколько игр:

  • Ось и союзники, с прочными картами и сложными правилами.
  • Tetris, возможно, в режиме реального времени для проигрывателя-vs-player или player-vs-computer.
  • Breakout, с несколькими оружиями и скоростью частиц

Во всех этих случаях у меня есть только несколько целей:

  • Используйте JavaScript и HTML 5 - он должен работать на Chrome, Safari или iPad.
  • Начать мелкие и простые, а затем создавать функции.
  • Узнайте что-то новое о дизайне и реализации игр.

Итак, мои вопросы:

  • Как бы вы реализовали эти игры?
  • Есть ли у вас рекомендации по технологиям?
  • Если вы написали эти игры, какая была самая сложная часть?

N.B. Я также хочу начать с первых принципов - если вы порекомендуете фреймворк/библиотеку, я бы по достоинству оценил некоторые детали теории или реализации. Эти игры достаточно разные, и я должен узнать что-то новое из каждого.

Ответы

Ответ 1

Зависит от того, сколько вы хотите начать с нуля. Чтобы ответить на ваши прямые вопросы:

1) Как бы вы реализовали эти игры?

A: JavaScript + холст. Холст - это 2D-поверхность рисования из HTML5. Производительность довольно хороша на настольных компьютерах, не очень хороша на устройствах iOS и Android (на дату публикации). Если мобильность является вашей главной заботой, вам необходимо использовать 3D-преобразования DOM и CSS3, которые запускают GPU на этих устройствах.

2) Есть ли у вас рекомендации по технологиям?

A: Это ответ на первый вопрос. JavaScript является обязательным, но я бы проигнорировал jQuery. Вы ориентируетесь на устройства HTML5, поэтому не нужно компенсировать устаревшие браузеры. Поскольку вы, вероятно, используете Canvas, не нужно сглаживать взаимодействие DOM. Существуют библиотеки более высокого уровня, которые упрощают взаимодействие с Canvas, например Easel.js. WebSockets полезны для двунаправленной потоковой передачи. И Box2D полезен для физического движка. Локальное хранилище - это простые данные строки/значения строки для таких вещей, как уровень прогресса, но для чего-то сложного вам понадобится база данных WebSQL. Для больших двоичных активов вы захотите взглянуть на API файловой системы. Наконец, не бойтесь WebGL, так как это чрезвычайно быстро и полезно для 2D-игр.

3) Какая самая сложная часть?

A: Почти наверняка самая сложная часть - отладка. Инструменты разработчика WebKit могут сделать это проще, поэтому не оставляйте их без них.

Ответ 2

Просто используйте Canvas для перемещения множества вещей вокруг экрана и SVG для более красивой, медленной векторной графики.

Одна из первых вещей, которую вы должны сделать, это написать программу speed test, чтобы увидеть, что можно сделать с Canvas, а затем сыграть с ней.

Я написал сообщение в блоге о Canvas и написании игр HTML5

Ответ 3

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

В то время не было реальной поддержки текста в холсте, поэтому мое решение не работало с использованием excanvas, но отлично работало в Safari и Firefox.

Итак, вы можете посмотреть, какие функции HTML5 вы хотите поддерживать, например, встроенную базу данных, а затем решить, какие браузеры вы готовы работать.

Как реализовать их во многом будет зависеть от того, как вы хотите создать графику, и если вы хотите делать 3D-графику, так как тогда растровые спрайты не будут работать.

Ответ 4

Том здесь из Scirra (Создатель 2 создателя игры). Мы создаем движок игр HTML5 под названием Construct 2, он экспортирует только в HTML5, а не Flash в поле зрения!

В Construct 2 используется система, основанная на событиях, для добавления логики в ваши игры и тонны повторяющихся/сложных задач для вас. Например, сложная задача, связанная с многоугольным столкновением с объектами без какого-либо визуального редактора.

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

Ответ 5

Не забывайте processing.js, который представляет собой довольно хорошо протестированную графику полного цикла и интерактивную инфраструктуру javascript, которая имеет существенные (если не полная) поддержка большинства операций ввода-вывода, звуков, графики и даже WebGL. Если вы напишите ванильный код обработки, который в основном представляет собой синтаксис Java, скомпилированный для JavaScript, вы можете использовать множество отладчиков с открытым исходным кодом, включая native Processing окружающая среда. Помимо этого, вы можете интегрировать любой другой код JavaScript, который вы хотите включить.

Вот руководство для разработчика JavaScript, объясняющее многое из того, что вы, возможно, захотите узнать.

Проверьте это. Хороший материал.

Ответ 6

Взгляните на ChromeExperiments Примеры со всего мира, используя последние открытые стандарты, включая HTML5, Canvas, SVG, и javascript.

Ответ 8

Хороший вопрос, когда я также начал изучать HTML5, я также столкнулся с этим вопросом, наконец, после много исследований я нашел лучший способ сделать это, используя какой-то движок или фреймворк. Я изучил холст и сделал свой собственный game, но это заняло часы логики и 100 строк кода.

Лучше пойти с scirra, это может уменьшить вашу работу.

Ответ 9

В настоящее время я работаю над серией сообщений в блогах, в которых объясняется, как создать Javascript-игру с использованием EaselJS и Box2D для физики. Здесь часть 1.