Перейти к основному содержимому

Инструкции по выполнению шага

Начнем с того, что создадим папку, в которую мы будем размещать все файлы для нашего проекта. Например, создадим папку ping-pong. Перейдем в эту папку и будет в ней работать.

На начальном шаге создадим файл index.html. Это центральный файл, который будет связующим звеном для всех остальных вспомогательных скриптов и графических элементов. На данном этапе ограничимся простым заголовком страницы с помощью элемента <title>. Этот элемент указывается в элементе <head>, так как он не используется при отображении HTML страницы, а содержит лишь мета-информацию.

Вот так будет выглядеть наш index.html после добавления заголовка страницы:

<!DOCTYPE html>
<html>

<head>
    <title>Ping-Pong JavaScript</title>
</head>

<body>
</body>

</html>

В элемент <body>, который содержит сам контент для отображения, добавим элемент холста <canvas>. Этот элемент является нововведением HTML5 и предназначен для создания растрового двухмерного изображения при помощи скриптов. Его мы и будем использовать как "экранчик", на котором будет отображаться весь игровой процесс. Размеры "экранчика" задаются через параметры height и width.

Наконец, необходимо подгрузить картинки, которые будут использованы при построении игровой сцены. Это можно сделать при помощи элемента <img> и его атрибута src.

Ко всем этим элементам хорошо бы добавить какой-то идентификатор, чтобы к ним было удобнее обращаться через скрипты в дальнейшем. Сделать это можно при помощи атрибута id.

Вот так будет выглядеть структура нашей папки, когда мы добавим картинки для игровой сцены:

ping-pong
├── index.html
├── ball.png
├── paddle.png
└── background.jpg

Вот как сейчас выглядит содержимое файла index.html:

<!DOCTYPE html>
<html>

<head>
    <title>Ping-Pong JavaScript</title>
</head>

<body>
    <!-- Рисуем игровое поле -->
    <canvas width="750" height="585" id="game"></canvas>
    <img src="ball.png" id="ball"></img>
    <img src="paddle.png" id="paddle"></img>
    <img src="background.jpg" id="background"></img>
</body>

</html>
к сведению

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