Несколько месяцев назад меня попросили разработать игру с преимущественно векторной графикой и простой 2D-физикой движений и анимаций.
Paper.js я знал только в лицо, поэтому решил протестировать его перед использованием. для бизнес-проекта; для этого я создал эту крошечную 2D гоночную игру.

Посмотреть демо
Исходник на Github

Я хотел частично воссоздать физику и геймплей Гонщика; Я вспомнил этот великолепный эксперимент Chrome, разработанный Active Theory, и вспомнил, что он был разработан в Paper.js, у него была хорошая физика и отличная производительность на мобильных устройствах. Более того (спасибо активным программистам-теоретикам!) Я также нашел этот кейс HTML5 ROCK, отличное место для начала.

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

Рассмотрение и советы

  • Кривая обучения Paper.js очень хороша: если вы хотите поиграть с ней, вы получите большое удовлетворение за короткое время;
  • Я не особо использовал API для рисования, но примеры на веб-сайтах демонстрируют его невероятный потенциал;
  • Что касается векторной математики, все API, которые я ожидал найти, присутствуют и хорошо сделаны, так что палец вверх.

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

еще две вещи

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