Использование Javascript, CSS и HTML
Для своего первого проекта в качестве нового разработчика программного обеспечения я сделал классическую игру на память Саймон. Эта игра выделялась для меня из нескольких вариантов из-за возможных раскладок. Я мог бы использовать то, что я узнал с CSS flexbox и grid, чтобы создать что-то интересное (читайте мой опыт работы с этими инструментами здесь).
Я начал с идеи и каркаса. Основные цели, которых я хотел достичь, можно было разделить на три уровня.
I. Базовый макет с заголовком, счетчиком очков и игровым полем. Полная функциональность игры, то есть игрок может играть за Саймона столько раундов, сколько пожелает.
Это обеспечит выполнение минимальных требований (также называемых минимально жизнеспособным продуктом).
II. Добавьте в игру другую тему и режим. Новая тема придаст игре более эстетичный вид, а новый режим сделает ее интереснее играть в течение более длительного периода времени. («Серебряный» план).
III. Включите звук в игру. Приятно, что в игре были бы разные варианты, но наличие индикации игры, отличной от света, было бы дополнительным бонусом. («Золотой» стандарт).
Теперь, когда руководство установлено, оставалось только выполнить его!
[«Если бы это было так просто». - рассказчик]
Для достижения первой цели мне нужно было создать элементы с помощью HTML и CSS. Я начал с HTML с четырех блоков для основного раздела страницы (четвертый - это добавленный блок «сброса», не изображенный в исходном каркасе) и заголовок. Чтобы выровнять эти блоки по центру страницы, был добавлен еще один, содержащий их.
С помощью CSS тег ‹main› был настроен на display: flex и justify-content: center. Только что добавленный мной блок-оболочка был настроен на display: grid, и моя настройка была отключена.
Я использовал один и тот же метод для каждого раздела страницы. Я бы рассматривал родительский div (любой из четырех начальных div) как элемент, который обеспечил бы центрирование его дочерних элементов, и добавил бы сетку, которая обернула бы дочерние div.
Я отрезал каждую секцию, работая сверху вниз. Когда я почувствовал, что раздел в хорошем месте, я перешел к следующему.
К концу первого дня из трех я почувствовал, что макет в хорошей форме.
На следующий день был самый большой скачок. От того, как будет выглядеть игра, к тому, как она будет функционировать.
У меня было приблизительное представление о том, что это за процесс JavaScript, и я попробовал начать с элементов, с которыми будет взаимодействовать пользователь. Это включало div «start», четыре div для игровых «кнопок» и div «reset». Каждому был предоставлен прослушиватель событий, который будет прослушивать «щелчок».
«Старт» при нажатии вызывает функцию playGame ().
Это вызовет другую функцию [createPattern ()], которая извлечет случайное значение из массива возможных цветов и поместит его в массив [simonPattern], который будет содержать цвета компьютер отобразит [blink ()].
Образец ввода игрока можно сравнить с компьютером. Если бы они были одинаковыми, то счет игрока увеличился бы на единицу и снова вызывалась бы функция playGame (). Чтобы предыдущие ответы игрока не складывались от раунда к раунду, их массив будет очищен.
Если бы шаблон был другим, игра завершилась бы, и отобразилось бы предупреждение, уведомляющее игрока о необходимости перезапустить игру.
MVP достигнут!
На следующие уровни.
Я позаботился о том, чтобы эти цели были достигнуты быстрее, планируя заранее. Я включил div для дополнительной темы и режима в HTML, прежде чем заставить их работать. Теперь я могу изменять их свойства, не беспокоясь о том, где они поместятся на странице.
Уровень серебра был достигнут за счет изменения CSS элементов на странице и скорости игры.
Я выбрал тему (конечно, пробел). Чтобы отобразить это, CSS был отредактирован с помощью манипуляций Javascript DOM (объектная модель документа).
Что касается второго режима игры (сложного), я изменил, насколько быстрым будет интервал функции blink (). Для этого интервалу была присвоена переменная timeInterval.
Для «нормального» режима это будет 1000 миллисекунд. При обновлении переменной при нажатии на div режима значение timeInterval изменилось на 500 миллисекунд.
Это был «жесткий» режим. В два раза быстрее, в десять раз сложнее.
Наконец… глазурь на торте… золотой уровень.
Я попробовал несколько разных методов добавления звуков в игру, что отняло довольно много времени ... однако лучше всего сработало бы создание переменной, в которой хранится каждый звук.
Звук, который будет воспроизводиться, будет соответствовать цвету div, который был «нажат» в функциях blink () и playGame (). Если игрок проиграл игру, раздастся звук ошибки.
Теперь все три уровня достигнуты!
В этом проекте я научился объединять HTML, CSS и JavaScript для создания игры. Было весело работать над проблемами и еще больше приятно видеть конечный продукт.
Не стесняйтесь играть в игру и оставлять отзывы (или свои рекорды)!
