Создают дети

Создание игры Flappy Bird с использованием HTML, CSS и JavaScript

«Flappy Bird», любимая многими классическая игра для мобильных устройств, очаровала игроков всех возрастов своим простым, но захватывающим геймплеем. В этом всеобъемлющем руководстве мы отправляемся в увлекательное путешествие в мир разработки игр, создавая собственную версию «Flappy Bird» с использованием динамического трио веб-технологий — HTML, CSS и JavaScript.

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

Flappy Bird как создать игру

По мере того, как мы будем углубляться в процесс создания этой культовой игры, вы поймете, как HTML обеспечивает структурную основу, CSS добавляет визуальное восприятие, а JavaScript вдыхает жизнь в каждое движение вашей пиксельной птицы.

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

Шаг 1 (HTML-код)

Для начала вам нужно создать базовый HTML-файл. В этот файл мы включим основную структуру нашей игры Flappy Bird. После создания файлов просто вставьте строки кода в свои документы. Обязательно сохраните HTML-документ с расширением .html, чтобы его можно было просматривать в веб-браузере. Разберем код шаг за шагом.

  1. < !DOCTYPE html >: объявляет тип документа и используемую версию HTML.
  2. < html >: это открывающий тег HTML-документа.
  3. < 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» к веб-странице.
  4. < 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 для оформления нашей игры.

Вот пояснение того, что делает код:

  1. body: этот селектор нацелен на все тело веб-страницы,
  2. font-family: ‘Pacifico’;: Эта строка устанавливает семейство шрифтов для текстового содержимого внутри тела шрифта с именем «Pacifico»,
  3. display: flex;: эта строка устанавливает для свойства отображения тела значение «flex», что является режимом макета, позволяющим гибко размещать элементы,
  4. justify-content: center;: Эта линия центрирует flex items (элементы) горизонтально внутри тела. Предметы будут распределены таким образом, чтобы с обеих сторон оставалось одинаковое пространство,
  5. canvas: этот селектор нацелен на элемент(ы) < canvas > на странице,
  6. border: 1x solid #0a3cda;: эта строка добавляет границу к элементу (элементам) холста с шириной 1x (что должно быть «1px» для одного пикселя) и стилем сплошной линии. Цвет рамки установлен на оттенок синего (#0a3cda),
  7. margin: 10px;: Эта строка добавляет поле в 10 пикселей вокруг элемента(ов) холста, создавая расстояние между холстом и другими элементами.

Создайте файл CSS с именем style.css и вставьте данные строки кода в свой файл CSS. Помните, что вы должны создать файл с расширением .css.

Шаг 3 (код JavaScript)

Наконец, нам нужно создать функцию в JavaScript. Код использует элемент HTML5 «canvas» для создания игры, в которой спрайт птицы должен перемещаться по коридору с движущимися трубами. Ниже написано объяснение основных компонентов и функций в коде.

  1. Настройка холста:
    • var ctx = myCanvas.getContext(‘2d’);: извлекает контекст 2D-рендеринга элемента холста с идентификатором «myCanvas». Этот контекст используется для рисования графики на холсте.
  2. Переменные игры: различные переменные, такие как FPS, jump_amount, max_fall_speed, acceleration, pipe_speed и другие, инициализируются для управления игровой механикой и поведением.
  3. Класс спрайтов — «MySprite»:
    • этот класс определяет общий объект спрайта с такими свойствами, как положение (x, y), видимость, скорость (velocity_x, Velocity_y), изображение (MyImg), вращение (angle) и отражение (flipV, flipH),
    • функция-прототип Do_Frame_Things отвечает за отрисовку спрайта на холсте, применяя такие преобразования, как вращение и масштабирование.
  4. Функция — ImagesTouching(thing1, thing2): проверяет, соприкасаются ли два спрайта друг с другом, сравнивая их положения и размеры.
  5. Функция — Got_Player_Input(MyEvent):
    • обрабатывает события ввода игрока, такие как касание, щелчок мышью и нажатие клавиши,
    • переходы между различными режимами игры: ‘prestart’, ‘running’, and ‘over’.
  6. Event Listeners: настраивает event listeners для событий касания, щелчка мыши и нажатия клавиш для запуска функции Got_Player_Input.
  7. Функции игровой логики:
    • 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(): сбрасывает игру в исходное состояние, включая положение птицы и расположение труб.
  8. Loading Images: код загружает различные изображения для спрайтов, труб и полос с помощью класса Image.
  9. Main Loop — Do_a_Frame(): эта функция является сердцем игрового цикла. Она обрабатывает различные игровые режимы, очищает холст, обновляет и отображает спрайт птицы, обновляет положение труб, обрабатывает наклон и падение птицы, а также проверяет условия столкновения и окончания игры.
  10. Настройка интервала:
    • setInterval(Do_a_Frame, 1000/FPS): вызывает функцию Do_a_Frame с заданным интервалом (управляемым переменной FPS) для создания цикла анимации для игры.

Создайте файл JavaScript с именем script.js, вставьте указанные коды в ваш файл JS и убедитесь, что он правильно связан с вашим HTML-документом, чтобы сценарии могли выполняться на странице. Помните, что вы должны создать файл с расширением .js.

Читайте также

Попробуйте школу бесплатно

Бесплатно Онлайн 1 час
  • Познакомитесь с программой

  • Пообщаетесь с будущим преподавателем

  • Ребенок создаст свой первый IT-проект

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