Если вы читали мою последнюю статью 5 советов, как выжить в первую неделю на учебном курсе по программированию, то вы знаете, что я недавно уволился с работы и переехал в Нью-Йорк, чтобы погрузиться в сферу веб-разработки. Вкратце, я продолжаю выживать в своем учебном лагере по программированию и только что начал четвертую неделю!

Однако, чтобы дойти до четвертой недели, нам нужно было завершить наш первый проект портфолио, который будет игрой с использованием JavaScript, HTML и CSS. В классе мы практиковались, создавая «Игры памяти», «Высокие карты», «Крестики-нолики» и «Утиную охоту», но это был наш первый оригинальный проект.

Вдохновленный «Вернись, Барак» из «Субботней ночи в прямом эфире», я создал игру на JavaScript под названием «Вернись, Барак», которая представляет собой интерактивную интерактивную видеоигру, в которой игрок будет нажимать, чтобы набирать очки и избегать препятствий для победы. Задача состоит в том, чтобы зарядить Обаму энергией, чтобы он вернулся из отпуска, но пользователю нужно будет ловить «Либеральные снежинки», чтобы поддерживать его энергию. Однако есть красные шляпы «Сделаем Америку снова великой», которые являются препятствием, и если шляпа падает на Обаму, это его утомляет, и он возвращается в отпуск.

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

Нажмите здесь, чтобы играть в игру!

Чтобы объяснить, как я создавал свою игру, я собираюсь разбить ее, обрисовав в общих чертах шесть этапов веб-разработки:

1) Сбор информации

Целью этого проекта было создание функциональной интерактивной игры. Его нужно было развернуть через страницы GitHub, включить по крайней мере одну анимацию CSS, запускаемую событием DOM, и стилизовать ее с помощью CSS.

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

Изучив игры в Интернете, я решил, что хочу создать игру, в которой персонаж будет двигаться, чтобы набирать очки и избегать препятствий, но с поп-культурой и политическим уклоном.

2) Планирование

Чтобы начать процесс планирования, наш класс использовал доски для создания макетов веб-сайтов, которые представляют собой чертежи страниц, которые служат в качестве наглядного руководства для структуры нашей веб-страницы. Мы сосредоточились на определении минимально жизнеспособного продукта (MVP) и пост-MVP, матрицы приоритетов, функциональных компонентов и основных HTML и CSS.

Этот этап был жизненно важен для того, чтобы убедиться, что у меня есть направление, прежде чем погружаться в код, а также для сокращения частей проекта, что было бы невозможно за четыре дня. Посмотрите мою доску ниже!

Если вы не можете прочитать мой скорописный почерк и замусоренные буквы, то еще одним ресурсом, который я нашел очень полезным, был Wireframe.cc. Этот веб-сайт позволяет разработчикам и дизайнерам создавать каркасы с помощью простых блоков и текста, а также создает очень четкий и чистый схематический дизайн.

3) Дизайн

На этапе проектирования я смог по-настоящему проявить творческий подход к изображениям и визуальному контенту. Однако спрайты Обамы на самом деле довольно сложно найти в Интернете, и он был самым важным компонентом игры.

Я нашел в сети гифку с рисунком Обамы, который мне очень понравился, и он дополнит дизайн шрифта видеоигры, который я искал. Я использовал EZgif, чтобы превратить гифку в лист спрайтов, чтобы я мог использовать разные версии мультфильма.

После того, как у меня появился главный герой, я перешел на фоновое изображение, поскольку оно занимало 80% страницы, а CSS важен! Меня вдохновил этот CodePen Ромины Мартин, и мне понравился CSS-переход движущегося фона, поэтому я решил добавить CSS-анимацию к положению фона, чтобы горизонт Нью-Йорка двигался за Обамой.

В процессе разработки целевой страницы я использовал каркас Google Materialize для создания базовой структуры веб-страницы, а мой основной цвет - васильковый.

4) Развитие

На стадии разработки проекта я начал с некоторых простых побед, таких как написание HTML и CSS для моей целевой страницы и псевдокода для моего JavaScript. Это было полезно, так что я не терял направление MVP и высокоприоритетных элементов.

HTML файла game.html представлял собой в основном шаблон HTML, а также элементы div для индикатора выполнения и элементов управления звуком. Для добавления моих персонажей, препятствий и движущихся элементов я использовал Javascript для управления DOM, создавая новые элементы, добавляя классы и добавляя новые элементы в тело.

Я также использовал функции Math.random () и SetInterval, чтобы рандомизировать расположение шляп Liberal Snowflakes и MAGA в теле каждые пять секунд, чтобы сделать игру более сложной. После этого я создал цикл For Loop, чтобы запустить функцию makeSnowflake и создать пять снежинок.

Для моей логики победы я решил, что игроку нужно будет щелкнуть по Либеральным снежинкам, чтобы дать Обаме достаточно энергии, поэтому я написал функцию addEventListener, которая будет прослушивать `` щелчок '' по снежинке, и каждый щелчок будет увеличивать индикатор выполнения. значение на 10 пунктов. Чтобы выиграть, была функция checkForWinner, у которой был setInterval, чтобы каждую секунду проверять, имеет ли индикатор выполнения игрока значение 100.

Однако я скажу, что проиграть игру намного легче, чем выиграть, потому что пять шляп MAGA постоянно падают с неба каждые три секунды. Когда эти шляпы сталкиваются с Обамой, это утомляет его, и игрок проигрывает. Чтобы создать эту функциональность, мне пришлось исследовать мир обнаружения столкновений.

Обнаружение столкновений - это процесс, при котором компьютер может определять, когда два или более объекта пересекаются на странице, но самой большой проблемой было то, что у меня было 11 движущихся элементов (снежинки каждые 5 секунд, шляпы каждые 3 и Обама всякий раз, когда игрок использовал клавиши со стрелками влево и вправо). Итак, я начал с создания функции setInterval, которая выводила бы console.log из верхнего и левого положения шляп. Оттуда я смог создать функцию, которая сравнивала бы верхнюю, левую, ширину и высоту Обамы с верхним, левым, шириной и высотой шляпы.

Два совета, которые мне очень помогли, - это наложение сплошной черной рамки вокруг сталкивающихся объектов, чтобы увидеть точку столкновения, а также использование parsInt () для удаления пикселей или «px» из позиций CSS.

5) Тестирование и запуск

Тестируйте часто и тестируйте рано! В течение всего этого процесса было очень полезно построить структуру моих функций перед написанием блока кода, а также использовать console.log, чтобы проверить, правильно ли работает функция.

Опять же, используя границу: 1px solid; в моих движущихся элементах было критически важно увидеть фактическую точку столкновения и определить правильные шаги для изменения размера элемента. Я также часто играл в свою игру, когда создавал ее, что послужило хорошим перерывом в написании кода.

Чтобы развернуть свою игру, я использовал репозиторий GitHub, зашел в настройки и включил страницы GitHub. Это было очень легко использовать, а также вносить правки и повторно развертывать игру.

Для презентации у нас была витрина в стиле научной ярмарки, где другие студенты могли пойти и поиграть в вашу игру. Многим моим однокурсникам понравилась идея, и игра была полностью функциональна… может быть, даже немного сложно выиграть!

6) Техническое обслуживание

Хотя моя игра никогда не будет идеальной, я буду продолжать следить за сайтом и при необходимости делать обновления. Презентация с другими студентами также была хорошим тестом в UX-дизайне, потому что я заметил, что большинство игроков хотели использовать одну руку вместо двух, а также не понимали, как нажимать на снежинку, поэтому в будущем улучшением может быть добавление обнаружения столкновений к снежинкам. также.

В целом, я получил массу удовольствия и был поражен тем, как много я узнал за последние несколько недель. Следите за другими проектами, которые появятся в ближайшие несколько недель, и если вы находитесь в процессе создания своей первой игры на JavaScript, просто помните: «Да, мы можем!»