Найти в Дзене

JavaScript. Игра Breakout! А также Java - первые впечатления

Сделал шаг в сторону - две недели потратил на изучение Java, для того чтобы получить общее впечатление от истинно объектно-ориентированного языка со строгой типизацией. Как там и что во взрослом мире. :) Почитал "Java. Руководство для начинающих" Герберта Шилдта и "Java SE 8 . Базовый курс" Кея Хорстманна, посмотрел видео-курс "Java для начинающих: с нуля до сертификата Oracle" от Заура Трегулова - получил удовольствие от всего прочитанного и просмотренного. Определенно, Java - это тот язык, который я хочу обязательно освоить, тем более, что он непосредственно связан с Android. Однако время летит, учёба в Политехе вот-вот начнётся, а я занимаюсь языком, который прямо сейчас мне не нужен. Поэтому переключился обратно на JavaScript и WEB разработку. Чтобы вспомнить, что и как - решил развить черновик игры Breakout, который сделал ещё месяц назад. Здесь нужно рассказать, что же это за Breakout, откуда он взялся. Breakout - аркадная игра на дискретной логике (на отдельных микросхемах, не
Breakout logo by Paltus-Pangasius-Zubatka
Breakout logo by Paltus-Pangasius-Zubatka

Сделал шаг в сторону - две недели потратил на изучение Java, для того чтобы получить общее впечатление от истинно объектно-ориентированного языка со строгой типизацией. Как там и что во взрослом мире. :) Почитал "Java. Руководство для начинающих" Герберта Шилдта и "Java SE 8 . Базовый курс" Кея Хорстманна, посмотрел видео-курс "Java для начинающих: с нуля до сертификата Oracle" от Заура Трегулова - получил удовольствие от всего прочитанного и просмотренного. Определенно, Java - это тот язык, который я хочу обязательно освоить, тем более, что он непосредственно связан с Android. Однако время летит, учёба в Политехе вот-вот начнётся, а я занимаюсь языком, который прямо сейчас мне не нужен. Поэтому переключился обратно на JavaScript и WEB разработку. Чтобы вспомнить, что и как - решил развить черновик игры Breakout, который сделал ещё месяц назад.

Здесь нужно рассказать, что же это за Breakout, откуда он взялся.

Игровой автомат Atari Breakout. Screenshot видео на YouTube
Игровой автомат Atari Breakout. Screenshot видео на YouTube

Breakout - аркадная игра на дискретной логике (на отдельных микросхемах, не на микропроцессоре), которую в 1976 году создали инженеры Нолан Бушнелл, Стив Возняк и дизайнер Стив Бристоу. Все они были в то время связаны с фирмой Atari. Atari же в 70-х была ведущим производителем видеоигр. Одной из самых первых игр, выпущенных Atari была Pong, и я даже сделал свою версию на JavaScript (ссылка на пост Дзен и сама игра Pong). Бушнелл хотел превратить Pong в однопользовательскую игру, где игрок, используя платформу, поддерживал шар, который разрушает стену кирпичей. Бушнелл поручил Стиву Джобсу разработать прототип, за который Джобсу было предложено 750 долларов, причем Стив должен был получить награду за каждый сэкономленный чип, если их количество в итоговом дизайне будет менее 50. Джобс обещал завершить создание прототипа в течение всего лишь четырех дней! Поскольку сам Стив не был достаточно квалифицирован для создания платы, он уговорил своего друга Стива Возняка сделать работу, а деньги за неё поделить пополам, умолчав о бонусе за каждую сэкономленную микросхему. В результате Возняк сделал плату на 42 микросхемах! Но она оказалась очень сложной для производства Atari, поскольку Возняк использовал всякие инженерные хитрости. Поэтому плату перепроектировали уже специалисты компании Atari - в итоге получилось около 100 чипов. Деньги за готовую плату Стив Джобс получил, но поделился с Возянком только 350 долларами, остальные 5000 пошли на старт компании Apple. Возняк долгие годы был уверен, что они с Джобсом получили по 350 долларов. Такая вот дружба.

Сборка игровых автоматов Breakout. Atari 1976. Взято с сайта http://thedoteaters.com/
Сборка игровых автоматов Breakout. Atari 1976. Взято с сайта http://thedoteaters.com/

Breakout оказал непосредственное влияние на дизайн платы компьютера Apple II, которую создал Стив Возняк позднее - в 1977 году. Apple II, же в свою очередь оказался очень успешным продуктом и внёс большую лепту в становление компании Apple. Так что iPhone у вас в кармане - это очень дальний потомок игрового автомата Breakout. :)

Стив Джобс и Стив Возняк с платой Apple I (фото из internet)
Стив Джобс и Стив Возняк с платой Apple I (фото из internet)

Игровой процесс Breakout 1976 года прост - в верхней части игрового экрана расположены ряды кирпичей. По экрану движется мяч, который отскакивает от боковых и верхней границ экрана. Попадая в кирпич, мяч меняет направление движения, кирпич при этом исчезает. Игрок теряет одну "попытку", если мяч ударяется в нижнюю часть экрана. Чтобы этого избежать, у игрока есть подвижная платформа, с помощью которой мяч можно отбросить обратно в верхнюю часть экрана.

В моей версии на данный момент не реализованы "попытки", однако реализовано изменение скорости мяча в зависимости от количества набранных очков.

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

Игровое поле игры Breakout!
Игровое поле игры Breakout!

Чтобы немного поиграть в игру, достаточно просто перейти по ссылке, вот она: Breakout!

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

Есть ещё пара идей игр на базе поля с летающим мячом, думаю будет забавно! :) Осталось только реализовать.

И, как обычно, если интересно посмотреть код - это можно сделать через инструменты разработчика, в браузере Google Chrome - они вызываются нажатием на F12.

Update 20-02-2020:

  1. Добавил touch управление - теперь можно играть на смартфоне. Есть нюансы - скорость анимации падает при длительном удержании пальца на экране. Примерно знаю как исправить, пока оставил как есть.
  2. Скорректировал стиль графики - игра стала больше напоминать свой прототип 1976 года.
  3. Добавил количество попыток - их стало 4. Новая попытка стартует сразу, как мяч пересекает нижнюю границу экрана - нужно добавить паузу, реализую позже.
  4. Сделал "цену" кирпичам разного цвета. Белый - 1 очко, зеленый - 2, оранжевый - 3, красный - 4.
  5. Скорость растёт в зависимости от "цены" кирпича, чем более дорогой кирпич, тем быстрее игра.

Новая версия Breakout 1.3

-6