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

В результате получилась относительно простая по механике танцевальная игруха с Сойкой в главной роли. Чтобы ничего не отвлекало от танца весь остальной интерфейс сделали простым и легким.

Главный экран игры

Для того, чтобы птичка танцевала плавно, пришлось изрядно помучаться с движениями. Кстати, она состоит из блоков размером 8 px.

Ну и подарок для всех фанатов старых любимых 8 Битных игр — наш специальный мобильный джойстик в качестве управления!

А теперь немного про то, как это было )

Игра сделана на JavaScript с помощью двух элементов canvas, на бэкенде Node.js, для связи телефона и компьютера используется Socket.IO, в качестве базы данных была взята Mongo DB. Для сборки был использован Gulp.

Начало

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

1. Игра была сделана в режиме "for fun", а значит некритично, если будут какие либо ошибки или тормоза;
2. Хотелось на личном опыте испытать все прелести и тонкости разработки пусть небольшой, но все-таки игры;
3. Жажда экспериментов с оптимизацией и выбора более подходящих решений по реализации.

К начальной разработке мы подошли c принципом KISS наперевес, благодаря чему довольно быстро была написана первая рабочая версия только для десктопа, в котором птица делала всего одно движение. К сожалению, fps держался на уровне 35-45, было это далеко от идеала, и мы приступили к первым оптимизациям. Сначала игра жила в одном canvas в котором было все, мы разделили холст на две части, где отдельно рисовалась сойка и бегающие кнопочки. Это частично помогло, потому что игре теперь не нужно было очищать и перерисовывать огромный холст размером 860 на 650 пикселей (это как никак 559000 точек). В добавок ко всему немного привели в порядок код. В целом это помогло и fps поднялся до 40-50, но до заветных 60 кадров нужно было еще ползти и ползти.

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

Когда все работы были завершены fps снова упал. Пришлось снова вернуться к оптимизации.

Вот краткий список тех вещей которые действительно помогли:

1. Принцип DRY (убрали огромную часть лишнего кода);
2. Следом YAGNI (и снова код стал короче);
3. Бритва Окамма (упростили слишком сложные участки кода);
4. Спорные моменты проверяли в jsPerf (тут и ежу понятно);
5. Оптимизация изображений (спрайт кнопочек для игры с клавиатуры занимает всего 320 байт);

После всего этого игра стала на порядок играбельнее и гораздо приятней глазу и мы испытали маленький коллективный оргазм от получившегося результата ))

(Хотя, конечно, текущая реализация не без проблем).

В общем и целом, после проделанной работы, мы сделали для себя пару выводов:

1. Делать что-то в режиме "for Fun" (особенно незнакомое), очень неплохо развивает;
2. Принципы программирования забывать не стоит, они работают и всегда будут работать;
3. "А теперь, дискотека!" (с)