Пишем пингпонг на JavaScript

18 Декабря 2015 4649 , , ,

Эта статья будет полезна в первую очередь новичкам, изучающим JavaScript. Просматривая уроки по JavaScript’у я понял, что нормального материала достаточно мало, много англоязычного и частично некоторая информация устарела и так, как показывают в некоторых уроках, я бы категорически не рекомендовал писать и учиться этому. Поэтому в этой статье я предлагаю написать вместе со мной простейший пингпонг и немного поговорить о JavaScript’e мы не будем сильно заморачиваться с кроссбраузерностью и откажемся сейчас от всяких там старых ие и индивидуальных багов разных версий браузеров. Писать мы будем в стиле ES5 хотя и для сегодняшнего дня 18 декабря 2015 года, уже могу рекомендовать начинать пользоваться ES6, но до широкого продакшена я пока в 2015 году у ES2015 я не вижу перспектив.Что из себя представляет игра?

С точки зрения изучения JavaScript’a на мой взгляд гораздо интереснее на нем пробовать писать нечто большее чем нужно в повседневной жизни, типа модальных окошек, попапов, менюшек и других интерфейсных штук. Мы будем писать простейший пинг понг с использованием возможностей HTML5. В нашей игре будут некие объекты которые будут взаимодействовать между собой, а именно шарик, ракетки (2шт), игроки(2шт). Правила простые, счет до 10, гол засчитывается после пропуска мячика за линию ракетки.

Опишем наши игровые объекты

Игрок

Теперь займемся описанием самой игры. Это будет игровой объект, который при инициализации сохраняет ссылку на canvas в котором мы будем рисовать и подпишется на необходимые события с клавиатуры, которыми мы будем управлять. Игровые методы мы опишем в прототипе объекта.

Теперь разберем игровую логику более подробно. Мы будем использовать requestAnimationFrame в котором будем запускать игровой loop который будет равен 1ой итерации логики нашей игры. Саму логику мы разделим на несколько частей. Физика — расчет перемещения объектов на нашем холсте. Игровая логика — проверка на пропуск гола, расчет очков, определение победителя и т.п. Рисование — непосредственно сам рендер нашего состояния игры в канвас. Также опишем методы для старта игры, рестарта игры, рестарта шарика и обработку событий нажатия клавиш игроками. Весь код прокомментировал, надеюсь будет понятно.

После всех проведенных манипуляций остается запустить игру после загрузки html)

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

Поиграть в пинпонг можно тут, посмотреть весь код можно на гитхабе.

Спасибо, за внимание.

Подписывайтесь на обновления

Читайте RSS ленту

Комментарии

Добавить комментарий