Инструкции по выполнению шага
На данный момент страниц а выглядит не очень похожей на игру. Все картинки расположены бок о бок, при этом мячик выглядит каким-то уж совсем большим. А хоста canvas и вовсе нигде не видно. Да и белый фон как-то не очень сочетается с добавленными картинками.
Все эти проблемы можно решить с помощью каскадных таблиц стилей (Cascading Style Sheets, CSS). Главной задачей CSS является описание внешнего вида HTML страниц. При этом его можно использовать как напрямую внутри HTML с помощью элемента <style>, так и через вспомогательные внешние файлы, которые затем можно добавить на страницу при помощи элемента <link>. Такой способ позволяет структурировать кодовую базу, поэтому разобраться в нём и найти нужные фрагменты в дальнейшем будет проще.
Создадим папку assets, в которой будем хранить все вспомогательные файлы, отвечающие за стилистику игры. Перетащим в неё наши картинки и не забудем указать новое расположение в атрибутах src. Создадим файл style.css.
Вот так будет выглядеть наша папка проекта после создания файла style.css:
ping-pong
├── index.html
└── assets
├── ball.png
├── paddle.png
├── background.jpg
└── style.css
Внесём в style.css него базовые настройки стиля нашей игры: цвет фона, выравнивание элементов по центру и масштаб. В дальнейшем будем добавлять в этот файл новые настройки отображения HTML-элементов по мере необходимости. В результате получим такой перечень стилей:
html,
body {
height: 100%;
margin: 0;
}
body {
background: black;
display: flex;
align-items: center;
justify-content: center;
}
После чего можем успешно привязать их к главному файлу с игрой index.html сразу после элемента title:
<!-- Начало места, которое мы изменяем -->
<head>
<title>Ping-Pong JavaScript</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<!-- Конец редактирования -->
Итоговый результат выполнения шага можно скачать тут.