По мере того, как мы будем углубляться в процесс создания этой культовой игры, вы поймете, как HTML обеспечивает структурную основу, CSS добавляет визуальное восприятие, а JavaScript вдыхает жизнь в каждое движение вашей пиксельной птицы.
Это руководство предназначено для начинающих разработчиков игр с разным уровнем опыта программирования, отлично подойдет для детей, которые изучают языки программирования.
Шаг 1 (HTML-код)
Для начала вам нужно создать базовый HTML-файл. В этот файл мы включим основную структуру нашей игры Flappy Bird. После создания файлов просто вставьте строки кода в свои документы. Обязательно сохраните HTML-документ с расширением .html, чтобы его можно было просматривать в веб-браузере. Разберем код шаг за шагом.
- < !DOCTYPE html >: объявляет тип документа и используемую версию HTML.
- < html >: это открывающий тег HTML-документа.
- < head >: этот раздел содержит метаданные о веб-странице и не отображается на самой странице:
- < title> Flappy Bird : устанавливает заголовок веб-страницы, который отображается в строке заголовка или на вкладке браузера,
- < meta charset=»utf-8″ >: указывает кодировку символов для документа (UTF-8 поддерживает широкий диапазон символов),
- < meta name=»viewport» content=»width=device-width, initial-scale=1″ >: определяет настройки области просмотра для адаптивного дизайна на различных устройствах,
- < link rel=»stylesheet» href=»style.css» >: связывает внешнюю таблицу стилей (файл CSS) с именем «style.css» для визуального оформления веб-страницы,
- < link href=’https://fonts.googleapis.com/css?family=Pacifico’ rel=’stylesheet’ >: ссылки на Google Fonts API для загрузки и применения шрифта «Pacifico» к веб-странице.
- < body >: это основное содержимое веб-страницы, отображаемое пользователю:
- < canvas id=»myCanvas» width=320 height=480 style=»background:url(‘http://s2js.com/img/etc/flappyback.png’); background-size: 100%; height: 95% » >: эти строки создают элемент холста HTML5 с идентификатором «myCanvas» и устанавливают его атрибуты ширины и высоты на 320 и 480 пикселей соответственно.
Холст используется для рендеринга графики, в данном случае для игры. Атрибут стиля используется для применения правил CSS к холсту, в том числе для установки декорации в изображение фона для игры. Фоновое изображение загружается из URL-адреса, а его размер задается так, чтобы покрывать всю область холста, сохраняя при этом высоту 95% высоты области просмотра.
Это базовая структура нашей игры Flappy Bird с использованием HTML, и теперь мы можем перейти к ее стилизации с помощью CSS.
Шаг 2 (код CSS)
Когда базовая HTML-структура игры создана, следующим шагом будет добавление стилей к игре с помощью CSS.
Далее мы создадим наш файл CSS. В этом файле мы будем использовать некоторые основные правила CSS для оформления нашей игры.
Вот пояснение того, что делает код:
- body: этот селектор нацелен на все тело веб-страницы,
- font-family: ‘Pacifico’;: Эта строка устанавливает семейство шрифтов для текстового содержимого внутри тела шрифта с именем «Pacifico»,
- display: flex;: эта строка устанавливает для свойства отображения тела значение «flex», что является режимом макета, позволяющим гибко размещать элементы,
- justify-content: center;: Эта линия центрирует flex items (элементы) горизонтально внутри тела. Предметы будут распределены таким образом, чтобы с обеих сторон оставалось одинаковое пространство,
- canvas: этот селектор нацелен на элемент(ы) < canvas > на странице,
- border: 1x solid #0a3cda;: эта строка добавляет границу к элементу (элементам) холста с шириной 1x (что должно быть «1px» для одного пикселя) и стилем сплошной линии. Цвет рамки установлен на оттенок синего (#0a3cda),
- margin: 10px;: Эта строка добавляет поле в 10 пикселей вокруг элемента(ов) холста, создавая расстояние между холстом и другими элементами.
Создайте файл CSS с именем style.css и вставьте данные строки кода в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
Шаг 3 (код JavaScript)
Наконец, нам нужно создать функцию в JavaScript. Код использует элемент HTML5 «canvas» для создания игры, в которой спрайт птицы должен перемещаться по коридору с движущимися трубами. Ниже написано объяснение основных компонентов и функций в коде.
- Настройка холста:
- var ctx = myCanvas.getContext(‘2d’);: извлекает контекст 2D-рендеринга элемента холста с идентификатором «myCanvas». Этот контекст используется для рисования графики на холсте.
- Переменные игры: различные переменные, такие как FPS, jump_amount, max_fall_speed, acceleration, pipe_speed и другие, инициализируются для управления игровой механикой и поведением.
- Класс спрайтов — «MySprite»:
- этот класс определяет общий объект спрайта с такими свойствами, как положение (x, y), видимость, скорость (velocity_x, Velocity_y), изображение (MyImg), вращение (angle) и отражение (flipV, flipH),
- функция-прототип Do_Frame_Things отвечает за отрисовку спрайта на холсте, применяя такие преобразования, как вращение и масштабирование.
- Функция — ImagesTouching(thing1, thing2): проверяет, соприкасаются ли два спрайта друг с другом, сравнивая их положения и размеры.
- Функция — Got_Player_Input(MyEvent):
- обрабатывает события ввода игрока, такие как касание, щелчок мышью и нажатие клавиши,
- переходы между различными режимами игры: ‘prestart’, ‘running’, and ‘over’.
- Event Listeners: настраивает event listeners для событий касания, щелчка мыши и нажатия клавиш для запуска функции Got_Player_Input.
- Функции игровой логики:
- make_bird_slow_and_fall(): регулирует скорость падения птицы, проверяет на столкновение с верхней и нижней границами и обрабатывает условие окончания игры,
- add_pipe(x_pos, top_of_gap, gap_width): добавляет в игру пару труб с указанным положением и размерами зазора,
- make_bird_tilt_appropriately(): наклоняет спрайт птицы вверх, когда он поднимается, и постепенно возвращает его в горизонтальное положение, когда он спускается,
- show_the_pipes(): визуализирует все трубы на холсте,
- check_for_end_game(): проверяет наличие столкновения между птицей и любой из труб, вызывая состояние окончания игры,
- display_intro_instructions(): отображает инструкции по запуску игры,
- display_game_over(): отображает сообщение об окончании игры вместе со счетом игрока,
- display_bar_running_along_bottom(): визуализирует движущуюся нижнюю полосу на холсте,
- reset_game(): сбрасывает игру в исходное состояние, включая положение птицы и расположение труб.
- Loading Images: код загружает различные изображения для спрайтов, труб и полос с помощью класса Image.
- Main Loop — Do_a_Frame(): эта функция является сердцем игрового цикла. Она обрабатывает различные игровые режимы, очищает холст, обновляет и отображает спрайт птицы, обновляет положение труб, обрабатывает наклон и падение птицы, а также проверяет условия столкновения и окончания игры.
- Настройка интервала:
- setInterval(Do_a_Frame, 1000/FPS): вызывает функцию Do_a_Frame с заданным интервалом (управляемым переменной FPS) для создания цикла анимации для игры.
Создайте файл JavaScript с именем script.js, вставьте указанные коды в ваш файл JS и убедитесь, что он правильно связан с вашим HTML-документом, чтобы сценарии могли выполняться на странице. Помните, что вы должны создать файл с расширением .js.