MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

2D игра на чистом JavaScript

В этом уроке мы шаг за шагом будем создавать простую игру MDN Breakout, написанную на чистом JavaScript и визуализированной на HTML5 <canvas>.

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

Для извлечения максимальной пользы из этой серии статей необходимо иметь средние (или хотя бы базовые) знания языка JavaScript. После прохождения этого урока вы сможете создавать собственные простые браузерные игры.

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

Детали к урокам

Все уроки и версии игры MDN Breakout доступны в GitHub:

  1. Создание Canvas и рисование на нем
  2. Движения мяча
  3. Реакция при столкновении со стеной
  4. Управление
  5. Конец игры
  6. Построение кирпичей
  7. Реакция при столкновении
  8. Счет и выигрыш
  9. Контроль мышью
  10. Заключение

Лучший способ получить надежные знания в области разработки браузерных игр — это начать с чистого JavaScript. Затем можно выбрать любой фреймворк для использования в своих проектах. Фреймворки — это инструменты, созданные на языке JavaScript; поэтому, даже если вы планируете работать с ними, не лишним будет сначала изучить сам язык, чтобы понимать, что именно происходит внутри. Фреймворки ускоряют разработку и помогают справиться со скучными частями игры, но если что-то работает не так, как ожидалось, всегда можно попытаться отладить код или написать собственное решение на чистом JavaScript.

Примечание. Если вам интересно узнать о разработке двухмерных игр с помощью игровой библиотеки, ознакомьтесь с альтернативной серией статей 2D игра Breakout с использованием Phaser.

Примечание. Эту серию статей можно использовать как материал для практических занятий по разработке игр. Также можно воспользоваться набором инструментов Gamedev Canvas Content Kit, основанным на этом уроке, если нужно сделать доклад о разработке игр в целом.

Следующий шаг

Ладно, давайте начнем! Перейдите к первой главе — Создание Canvas и рисование на нем.

 

Метки документа и участники

 Внесли вклад в эту страницу: webmarket7, KoishybaevDB, chrisdavidmills
 Обновлялась последний раз: webmarket7,