Как я делал игру на HTML5

Что такое HTML5?

Для программиста, решившего написать на нём игру — это ужос! По сути это дополнительное JavaScript API. Возможность рисовать примитивы, текст и картинки на холсте (Canvas). Ближе всего это API к OpenGL. Т.е. все трансформации вы совершаете не над отдельными объектами, но над объектом класса Canvas, на котором происходит рисование. В общем разобраться в основах не сложно, если есть опыт программирования на C-like языках и OpenGL.

Теперь о грустном…
На самом деле про саму игру я не расскажу, т.к. особо нечего — простая зомби-стрелялка с мобильным управлением. За-то расскажу про HTML5.

ООП

В JavaScript нет нормального ООП. Там есть прототипы, знакомые многим флеш разработчикам по AS2. Без специальной функции-надстройки работа с классами превратилась бы в кошмар. Но даже используя надстройку выходит не очень красиво.
Например вот так выглядит вызов родительского конструктора:

this.constructor.prototype.constructor.apply(this, [param0, param1, etc...]);

Про разработку на JavaScript вообще можно долго говорить, но лучше самому попробовать и поплеваться. Опыт — штука полезная, хотя не всегда приятная… (:

Примитивы и текст

Никакого антиалиасинга вам тут не будет. Текст вообще может рисоваться без попиксельной точности. Контур текста может легко быть смещён на 1-2 пикселя относительно самого текста. Так же точность сильно скачет в зависимости от браузера.

Звук

Реализован на самом примитивном уровне — можно загрузить звук и проиграть его, поигравшись громкостью. Для дизайна сгодится, для игр — нет. Сложные звуковые эффекты сделать невозможно. Даже каналов нету. Из всех форматов наиболее поддерживаемый разными браузерами — WAVE. Т.е. размер игры на пустом месте вырастает в 2-3 раза.

Эффекты и alpha-канал

В стандартное API входят такие эффекты, как, например, градиентная заливка полигона или тень для элемента. Если первое работает вполне себе хорошё во всех браузерах, то второе на некоторых браузерах работает отвратительно для картинок с alpha-каналом. Проще говоря прозрачность картинок учитывается не правильно. Тень может запросто наложиться не на видимую часть картинки, на на сам прямоугольник картинки. Выглядит по идиотски.

Быстродействие

Не знаю, что там на счёт «скорость работы, как у нативных приложений» — у меня не было возможности потестить на мобильном браузере. Но на Венде и МакОси работало вполне себе быстро, но… Периодические лаги задалбывали очень и очень. Возможно сказывается мой небольшой опыт программирования на JavaScript, но всё равно неприятно.

Сохранение

Для сохранения локальных данных есть специальный объект window.localStorage. К сожалению заработал он у меня только в Хроме под Вендой. Т.ч. сохранение я не делал, хотя очень хотелось. Возможно в мобильных браузерах всё работает, но рисковать не хотелось.

Защита игры

Тут всё почти как во Flash. Т.е. из реальных способов защиты — только обфускация, которая почти не спасает. Но при этом чтобы выдернуть ресурсы не нужно вообще никаких программ — они лежат открыто. Проще тупо не парится и забить на защиту игры. (:

Итогo: 5 коп.

Писать игры на HTML5 (читай JavaScript) можно. Но чертовски неудобно и от того неприятно. Интересный опыт, но повторения не хочется…
Лично моё мнение — никогда HTML5 не сможет заменить собой Flash, Silverlight или, тем более, Unity. В дизайне и UI они будут соперничать, в играх — специализированные плагины уже победили и не проиграют до выхода HTML6 (а там видно будет).

Ссылки по теме

Создание игры на Javascript Canvas
HTML5 Platformer Tutorial
Canvas Demos — Tutorials
HTML5 Canvas — the basics
HTML5 Specs

Терпения вам и мужества. (:

P.S.

Как я уже писал, я не верю, что Спилы делают ставку на HTML5 — это не разумно. Попиарятся и всё. Если действительно делать ставку на что-то кроссплатформенное, то лучше было отдать те $50000 разработчикам haXe, чтобы они быстрее портировали своё решение на множество платформ и написали удобный инструментарий. Это было бы разумнее.