Одной из ранних аркадных видеоигр, в далёком 1972-м году была игра Pong, идея которой, согласно WikiPedia, была предложена талантливому программисту Аллану Алькорну одним из отцов-основателей индустрии компьютерных игр Ноланом Бушнеллом . Для Аллана игра послужила тренировочным проектом, поскольку, как и у меня, у него не было опыта разработки игр. Я решил, что было бы символично начать самостоятельно писать игры именно с Pong (я ведь уже как минимум так же крут (: , как Аллан в 72-м), поэтому попробовал написать её на JavaScript, вот что получилось:
Pong - классика аркадных игр! - это ссылка на игру, ниже просто иллюстрация (Дзен не умеет ссылки из картинки).
Да, она работает! Это классное чувство, когда получается то, что задумал! Очень мотивирует.
Однако есть пара нюансов. Самый на данный момент раздражающий - я пока не научился делать опрос двух и более клавиш клавиатуры одновременно, из-за этого перемещение платформ игроками возможно только по очереди. Второму игроку я добавил возможность управления мышью, что несколько сглаживает проблему. В идеале опрашивать две мыши :), тогда управление было бы удобным для обоих игроков.
Второй нюанс - не удалось пока 100% правильно обрабатывать отскоки от платформ. Это проявляется в моменты, когда мяч проходит у самого края платформы - иногда он заскакивает под неё :). В последней версии игры я попытался это исправить, вроде баг не проявляется. Недостаточно тестирования, нужно больше тестирования.
Прежде, чем начинать писать игру, я набросал план разработки, которого придерживался:
- Готовлю графику экрана, на котором происходит действие. Графика в HTML5 - canvas.
- Создаю объекты мяча и ракеток.
- Задаю переменные для счёта, исходные координаты и т.п.
- Создаю функцию движения ракеток. Опрос клавиатуры через jQuery
- Создаю функцию проверки столкновений - если мяч выходит за левую границу - зачисляю очко правому игроку; если за правую - левому. Если мяч касается платформ или верхней/нижней границы экрана - он отскакивает. Игра до 4-х очков.
- Запускаю анимацию через 'setInterval'
В коде много цитат из упражнений по книге "JavaScript для детей", например, конструктор Ball - адаптирован под игру. Часть кода написана по собственным наработкам. Собрать всё воедино - в готовую игру было не просто, но интересно. Да, есть ещё забавные побочные продукты :) - в процессе программирования Pong, я экспериментировал с управлением одной платформой. Результат эксперимента - игра похожая на BreakOut, но пока без кирпичей, которые надо разбивать мячом. Своего рода заготовка.
BreakOut - версия 1.0. Написал за пару часов, к сожалению управлять можно только мышью на PC. Чуть позже приделаю Touch для смартфонов.
Возвращаясь к Pong - из того, что хочется ещё сделать - это чувствительность платформ к попаданию мяча в определенные их области. Чтобы отскок от края платформ был под более острым углом - тогда функционал был бы максимально близок к оригинальному Pong. Так же до сих пор не умею самостоятельно делать аналог модального окна, оно пригодилось бы для старта, рестарта и паузы в игре. Сейчас она стартует сразу после загрузки. Ну и последнее - надо бы добавить звук, правда я не уверен, что он был в оригинальном Pong.
Игра Pong для меня - это что-то вроде экзамена самому себе после изучения книги "JavaScript для детей". Прошёл ровно месяц, как я начал изучать JavaScript - результат обнадёживает, хочется расти дальше. На Pong я потратил примерно 6-7 часов чистого времени.
Чтобы посмотреть код игры, нужно кликнуть по ссылке с игрой, нажать F12, откроются "инструменты" для разработчиков, далее перейти во вкладку Elements. Выглядит примерно так:
