Министерство науки и высшего образования Российской Федерации

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ

УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«Санкт-Петербургский государственный университет
промышленных технологий и дизайна»
ВЫСШАЯ ШКОЛА ПЕЧАТИ И МЕДИАТЕХНОЛОГИЙ

Институт: Полиграфических технологий и оборудования

Кафедра: Информационных и управляющих систем
Направление подготовки: 09.03.02 Информационные системы и технологии
Профиль подготовки: Информационные технологии в медиаиндустрии

КУРСОВАЯ РАБОТА

Дисциплина: Веб-программирование

Тема: Разработка игры в жанре Платформер с применением

технологии HTML5 Canvas

Выполнил:
студент группы 2-ТИД-3 Клепикова А.С.
(подпись)
Руководитель:
к.т.н., доцент Пасечник П.А.
(уч. степень, звание) (подпись)

Дата защиты работы 22.05.2023

Оценка отлично

Санкт-Петербург
2023
 Министерство науки и высшего образования Российской Федерации
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ
УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
ПРОМЫШЛЕННЫХ ТЕХНОЛОГИЙ И ДИЗАЙНА
ВЫСШАЯ ШКОЛА ПЕЧАТИ И МЕДИАТЕХНОЛОГИЙ
Институт полиграфических технологий и оборудования

Кафедра ИиУС
УТВЕРЖДАЮ: ________________
Зав. кафедрой Е. В. Горина

ЗАДАНИЕ
на курсовую работу

Дисциплина Web-программирование_____________________________________________________________
Студент Клепикова Анастасия Группа_2-ТИД-3___________________________
1. Тема проекта _Разработка игры в жанре Платформер с применением технологии HTML5 Canvas
2. Срок сдачи студентом законченного проекта 22.05.2023___________________________________________
3. Исходные данные к проекту список актуальных технологий в сфере web-программирования; примеры
исходного кода

4. Содержание расчетно-пояснительной записки (перечень подлежащих разработке вопросов)_Основные

технологии веб-разработки; верстка страниц
5. Перечень графического материала захват экрана; фрагменты исходного кода проекта__________________
______________________________________________________________________________
6. Литература и прочие материалы, рекомендуемые для изучения:
1. MDN Web Docs : [сайт].  Москва, 2023 ̶ .  URL:
https://developer.mozilla.org/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
2.Professor Web : [сайт].  Москва, 2023 ̶ .  URL: https://professorweb.ru/my/html/html5/level4/4_9.php (дата
обращения 01.05.2023).
Дата выдачи задания «13» марта 2023 г.

Студент __ _ (Клепикова А.С.)

Подпись Ф.И.О.
Руководитель ________________ (Пасечник П.А.)
Подпись Ф.И.О.

Заключение руководителя о качестве курсовой работы

Работа выполнена на высоком уровне, полностью описывает процесс разработки веб-сайта, соответствует
всем нормам _ _____________________________________________________________________________
_____________________________________________________________________________________________

Оценка ___отлично____ Руководитель ________________ (Пасечник П.А.)

подпись Ф.И.О.
 РЕФЕРАТ

Записка 25 с., 35 рис. 0 табл., 0 прил., 10 источн.

HTML, CSS, JAVASCRIPT, CANVAS, САЙТ, ВЕБ-СТРАНИЦА,
СТИЛИ, СКРИПТ, ИГРА
Цель курсовой работы: разработка игры в жанре Платформер с
применением технологии HTML5 Canvas.
Задачи курсовой работы:
1. Рассмотреть основные современные технологии веб-разработки
(HTML, CSS, JavaScript);
2. Рассмотреть технологию HTML5 Canvas;
3. Определить структуру разрабатываемого сайта в соответствии с
областью его применения;
4. Разработать игру на основе технологии HTML5 Canvas.
Результат курсовой работы: разработана игра в жанре Платформер,
основанная на технологии HTML5 Canvas .
 ОГЛАВЛЕНИЕ
ВВЕДЕНИЕ........................................................................................................................5

1 Применяемые технологии..............................................................................................6

1.1 Основные технологии веб-разработки..................................................................6

1.1.1 Язык разметки гипертекстовых документов HTML................................6

1.1.2 Каскадные таблицы стилей CSS................................................................7

1.1.3 Язык программирования JavaScript...........................................................9

1.2 Технология, применяемая для разработки игры................................................10

2 Разработка сайта...........................................................................................................13

2.1 Разработка структуры сайта и страниц сайта.....................................................13

2.1.1 Главная страница...........................................................................................13

2.1.2 Страницы уровней.........................................................................................13

2.2 Верстка страниц....................................................................................................13

2.2.1 Структуризация контента.............................................................................13

2.2.2 Разработка внешнего вида и функциональности сайта.............................16

2.2.3 Разработка уровней для игры с использованием HTML5 Canvas............18

ЗАКЛЮЧЕНИЕ................................................................................................................24

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ......................................................25

 ВВЕДЕНИЕ

В современном мире индустрия развлечений вышла на новый уровень,

так как уже не ограничивается театром и кино. Все больше людей проводят
свое время в Интернете и не знают, чем себя занять. Благодаря веб-
технологиям стало возможно создавать не сложные игры, которые могут
привлечь внимание пользователя. На протяжении многих лет игры в жанре
Платформер не теряют свою актуальность, например, «Mario Bros» уже 40
лет на рынке видеоигр. Поэтому создание игры в таком жанре на данный
момент является актуальным и перспективным решением для развития
навыков в разработки видеоигр.
Целью данной курсовой работы является разработка игры в жанре
Платформер с применением технологии HTML5 Canvas.
Для достижения этой цели требуется выполнить следующие задачи:
1. Рассмотреть основные современные технологии веб-разработки
(HTML, CSS, JavaScript);
2. Рассмотреть технологию HTML5 Canvas;
3. Определить структуру разрабатываемого сайта в соответствии с
областью его применения;
4. Разработать игру на основе технологии HTML5 Canvas.
Объект исследования: разработка игры.
Предмет исследования: разработка игры в жанре Платформер c
использованием технологий HTML, Canvas, CSS и JavaScript.
Теоретическая значимость данной работы заключается в изучении
современных технологий веб-разработки. Практическая значимость
заключается в применении полученных знаний в разработке сайта.

5
 1 Применяемые технологии

1.1 Основные технологии веб-разработки

1.1.1 Язык разметки гипертекстовых документов HTML

HTML (англ. HyperText Markup Language — «язык разметки
гипертекстовых документов») — это основной стандартизированный язык
разметки веб-страниц.
Документы HTML представляют собой основу внутренней
структуры сайта. Он нужен, чтобы отображать в браузере специальным
образом отформатированный документ с множеством вложенных элементов:
заголовками, абзацами, списками, гиперссылками, медиаисточникками,
изображений, видео и аудио. Также через HTML-документ подключаются
CSS- и JS-файлы.
В документе HTML выделяется два основных блока: головная часть
(head) и тело документа (body), и они хранятся в основном теге <html>,
сообщающий браузеру, что это за HTML-документ (рис. 1). В головной части
хранятся элементы, которые помогают браузеру в работе с данными, внутри
него есть метатеги, которые применяются, чтобы сохранять информацию для
браузеров и поисковых систем. В теле документа находятся все видимые
пользователю элементы. Язык HTML интерпретируется браузерами, и,
полученный в результате интерпретации, форматированный текст
отображается на экране монитора компьютера или мобильного устройства.

Рисунок 1 — Содержимое тегов head и body

6
 Язык HTML совместим с другими языками, такими как JavaScript и
CSS, которые отвечают за функциональность и внешний вид
разрабатываемого на основе HTML сайта.

1.1.2 Каскадные таблицы стилей CSS

CSS (англ. Cascading Style Sheets — «каскадные таблицы стилей») —
это формальный язык описания внешнего вида документа (веб-страницы),
написанного с использованием языка разметки.
Основной целью разработки CSS является ограждение и отделение
описания логической структуры веб-страницы от описания внешнего вида
этой страницы. Такое разделение может увеличить доступность документа,
предоставить большую гибкость и возможность управления его
представлением, а также уменьгить сложность и повторяемость в
структурном содержимом.
Стиль — это правило, которое определяет внешний вид того или иного
элемента в документе. Все объявления стилей называются правилами. Такие
правила состоят из селектора, CSS-свойства и его значения. (рис. 2).

Рисунок 2 — Правило CSS

Селектор – это метки, которые помогают браузеру понять, к какой части
HTML-кода нужно применить заданные параметры. CSS-свойства – это
определенные параметры оформления, например цвет или размер. Значение
выражается текстом или числом.
Стили могут быть подключены или внедрены в описываемый ими веб-
документ тремя способами: описание стилей находится в отдельном файле;
стили описаны внутри документа, они могут быть включены в элемент
<style> (рис. 4); стили описаны в теле документа, они располагаются в
атрибутах отдельного элемента (рис. 5).

7
 Описание стилей в отдельном документе является распространенным
способом изменения внешнего вида страницы. Отдельный CSS-файл, в
котором содержатся все стили страницы, подключается к HTML-документу
посредством элемента <link>, включенного в элемент <head> (рис. 3). Один
CSS-файл можно подключить к разным HTML-документам, и любое
изменении в файле применится к содержимому всех страниц. Поэтому
размещение всех стилей в одном файле значительно упрощает разработку
внешнего вида веб-страницы.

Рисунок 3 — Описание стиля в отдельном файле

Большим недостатком последних двух способов (рис. 4 и 5) является
отсутствие гибкости. Все созданные стили придется постоянно дублировать
на каждой новой странице, что увеличивает количество кода и снижает его
читабельность, а также производительность самого сайта.

Рисунок 4 — Описание стиля с помощью тега <style>

Рисунок 5 — Описание стиля в атрибуте

CSS основывается на принципах каскадного наследования и каскадного
приоритета. Каскадность — это механизм, который позволяет браузеру
определить, какие CSS правила должны применяться к конкретному элементу
веб-страницы. Это достигается путем определения того, как CSS правила
взаимодействуют между собой, а также описанием HTML элементов.

8
 Принцип каскадирования применяется в случае, когда элементу HTML
одновременно поставлено в соответствие более одного правила CSS или
происходит конфликт значений этих правил. Чтобы разрешить такие
конфликты, вводятся правила приоритета. Наиболее низким приоритетом
обладает стиль браузера. Следующим по значимости является стиль,
заданный пользователем браузера в его настройках. Наиболее высоким
приоритетом обладает стиль, заданный непосредственно автором страницы.
Самым высоким же приоритетом обладают стили, объявленные автором
страницы или пользователем, с помощью сопроводительного правила «!
important».
Существует множество различных типов селекторов, и они обладают
своим приоритетом. Наиболее приоритетным является стиль, записанный как
атрибут внутри тега, к которому применяется стиль. Далее идет селектор по
идентификатору, например «#button». На третьем месте – селектор по классу,
например «.text». Самым низким приоритетом обладает селектор по тегу,
например тег заголовка h1. Каждый селектор имеет вес, по которому и
определяется приоритет. Если два селектора имеют одинаковый вес, то
приоритетнее является тот стиль, который находится в коде последний.

1.1.3 Язык программирования JavaScript

JavaScript (JS) – это язык программирования, созданный для создания
интерактивных веб-страниц. Обычно он используется как встраиваемый язык
для программного доступа к объектам приложений. Наиболее широкое
применение находит в браузерах как язык сценариев для придания
интерактивности веб-страницам.
JavaScript сегодня является одним из наиболее часто использующихся
языков программирования в мире. Он чаще всего используется для создания
веб-сайтов и веб-приложений, расширений для браузеров, мобильных
приложений, серверных частей сайтов и программ, а также для создания игр.

9
 Код на JS можно написать непосредственно в самом HTML-документе.
Для добавления кода на старину используется парный тег <script>, который
рекомендуется помещать внутри контейнера <head> (рис. 6).

Рисунок 6 — Создание скрипта внутри HTML-документа

Однако, если написанный скрипт будет появляться и на других
страницах сайта или скрипт объемный, то следует создать отдельный JS-
файл. Этот файл подключается к HTML-документу с помощью тега <script>,
содержащий атрибут «src», внутри которого хранится путь к JS-файлу (рис.
7).

Рисунок 7 — Отдельный JS-файл

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

1.2 Технология, применяемая для разработки игры

Элемент <canvas>, добавленный в HTML5, предназначен для создания

графики с помощью JavaScript. <canvas> является базовой структурой для
рендеринга игры внутри.
Данный элемент записывается в тело HTML-документа, также задается
идентификатор и ширина с высотой (рис. 8). Все взаимодействия
пользователя с игрой прописывается в JS-файле.

10
 Рисунок 8  Определение элемента <canvas> в документе
Чтобы иметь возможность визуализировать игру в <canvas> элементе,
нужно сослаться на этот элемент в JS-файле (рис. 9). Таким образом, в
переменной «canvas» хранится ссылка на элемент <canvas>, а в переменной
«ctx» хранится 2D визуализация контекста – метода, используемого для
отрисовки в Canvas.

Рисунок 9  Создание переменных для работы элемента

Базовыми фигурами являются прямоугольник и круг. На рисунке 10
представлены инструкции для отрисовки прямоугольника, а на рисунке 11 –
круга.

Рисунок 10  Отрисовка прямоугольника

Рисунок 11  Отрисовка круга

11
 Все инструкции для отрисовки располагаются между методами
«beginPath()» и «closePath()». Определение прямоугольника происходит через
метод «rect()», а круга – метод «arc()». Свойство «fillStyle» хранит цвет,
которой будет использован методом «fill()» для отрисовки фигуры.
Также есть и другие методы для отрисовки, но эти являются базовыми
и самыми простыми.
Элемент <canvas> служит лишь холстом, на котором все элементы и
действия «рисуются» с помощью JavaScript.

12
 2 Разработка сайта

2.1 Разработка структуры сайта и страниц сайта

Разрабатываемый в рамках данной курсовой работы сайт нужен только

как основа для создания игры-платформера. Сайт является не адаптивным.
Были определены четыре основные страницы сайта: «Меню», «Уровень
1», «Уровень 2» и «Уровень 3».

2.1.1 Главная страница

Главная страница или «Меню» (index.html) предоставляет
пользователю возможность перейти на один из трёх уровней игры, каждый из
которых можно назвать основными разделами сайта. Она является
полноэкранной, на ней содержится заголовок, правила игры и навигация по
сайту.

2.1.2 Страницы уровней

Страницы уровней: «Уровень 1» (uroven1.html), «Уровень 2»
(uroven2.html) и «Уровень 3» (uroven3.html) представляют собой уровнями
игры. В верхней части страницы находится заголовок. Основной контент
страницы состоит из элемента <canvas>, в котором рисуется уровень игры, и
ссылки на главную страницу, выполненную в виде кнопки. Наполнение
каждого уровня отличается от предыдущего.

2.2 Верстка страниц

2.2.1 Структуризация контента

Для структурирования содержимого всех страниц сайта в соответствии
с разработанной ранее структурой была использована технология HTML.
Были созданы HTML-документы для главной страницы (рис.12), для страниц
«Уровень 1» (рис. 13 ), «Уровень 2» (рис. 14 ) и «Уровень 3» (рис. 15).

13
 Рисунок 12 — index.html

Рисунок 13 — uroven1.html

14
Рисунок 14 — uroven2.html

Рисунок 15 — uroven3.html

15
 2.2.2 Разработка внешнего вида и функциональности сайта
Затем разрабатывался внешний вид сайта. При помощи технологии CSS
были созданы стили для всех элементов сайта. Чтобы изменить цвет фона
страницы, используется атрибут bgcolor в теге <body> . Стиль для элемента
«canvas», а также общие настройки отступов сверху и снизу были заданы в
HTML-документе каждого из уровней.
На сайте присутствуют заголовки, абзаца и блоки-ссылки. Свойства
заголовков и абзацы записаны в файле text.css, а блоков-ссылок в button.css.
Основными элементами на главной странице являются блоки-ссылки,
заголовок и параграф, в котором прописаны правила (рис. 16). Свойства
текстов представлены на рисунке 17. Для анимации блоков-ссылок
используется псевдокласс «:hover», он срабатывает при наведении
пользователем на элемент мышью. Свойства данных блоков представлены на
рисунке 18.

Рисунок 16  Главная страница сайта

16
Рисунок 17  Описание стилей текста для главной страницы

Рисунок 18  Описание стилей для блоков-кнопок

17
 На страницах-уровнях также находятся заголовки и блоки-ссылки с
такими же свойствами, как и на главной странице (за исключением значений
внешних отступов). Свойства заголовков представлены на рисунке 19.

Рисунок 19  Описание стилей для заголовков на страницах уровней

2.2.3 Разработка уровней для игры с использованием HTML5 Canvas

Самым главным этапом разработки является создание уровней на языке
JavaScript. Структура JS-документов для уровней одинаковая, отличаются
только расположения объектов, на рисунках 20, 21, 22 представлены все три
уровня.

Рисунок 20 — Элемент <canvas> для первого уровня

18
 Рисунок 21 — Элемент <canvas> для второго уровня

Рисунок 22 — Элемент <canvas> для третьего уровня

Взаимодействие пользователя с игрой рассмотрим на примере третьего
уровня (uroven3.js).
Для создания уровня необходимы функции отрисовки препятствий и
перемещаемого объекта, для каждого «этажа» отрисовывается свой круг и
препятствия. Например, на рисунке 23 представлен код для 1 «этажа» 3
уровня.

19
 Рисунок 23  Код для отрисовки этажа и объекта для него
На третьем «этаже» в качестве ловушки вставлена картинка, функция
добавления этой картинки представлена на рисунке 24.

Рисунок 24  Вставка картинки

Также были добавлены очки, которые собираются при прохождении
заданной точки объектом и добавляются в счетчик в верху холста. Функция
отрисовки одного из очка и функция счета представлена на рисунках 25 и 26.

Рисунок 25  Отрисовка одного очка

Рисунок 26  Отрисовка счетчика

Для прыжка объекта необходима задать переменные, создать событие
для нажатия клавиши (пробела) и через функцию задать условие по

20
числовому коду «пробела» (рис. 27 ), создать две функции, одна из которых
работает на поверхности (рис. 28), по которой движется объекта, а вторая –
на препятствиях (рис. 29). В ходе написания программы возникла проблема,
что функция прыжка на третьем «этаже» перестает работать, поэтому были
заданы отдельные переменные и в общей функции «draw_ur3» прописаны
для как условия.

Рисунок 27  Функция, отслеживающая нажатие клавиши

Рисунок 28 – Функция прыжка для поверхности

Рисунок 29  Функция прыжка для препятствий

Чтобы <canvas> постоянно обновлялся, необходимо определить
функцию отрисовки, которая будет циклически запускаться с разными
параметрами, чтобы изменять позицию элемента. Функция запускается с
помощью временной функции «setInterval()» (рис. 30)

Рисунок 30  Функция для задания интервала обновления

21
 В основной функции (draw_ur3) для обновления кадра используется
метод для очистки <canvas> «clearRect()». Вызываем функции для отрисовки
«этажей», картинки и функции очков, которые исчезают после прохождения
объекта определенной точки (рис. 31).

Рисунок 31  Условия для существования очков

Отрисовка объекта-мяча начинается только при выполнении условия.
Также есть вложенные условия: для перезапуска программы и вывода
диалогового окна с сообщением «GAME OVER» (рис. 32), выполнения
функции «jump_ob» и «jump», также на последнем этаже после завершения
уровня выводится диалоговое окно с сообщением «YOU WIN» (рис. 33) и
совершается переход на главную страницу (на первом и втором уровне
переход совершается на страницу следующего уровня).

Рисунок 32  Диалоговое окно при поражении

Рисунок 33  Диалоговое окно при выигрыше

22
 В конце основной функции выполняется функция для вывода счета.
Продолжение основной функции представлено на рисунках 34 и 35.

Рисунок 34  Условия для отрисовки первого и второго этажей

Рисунок 35  Условия для отрисовки третьего и четвертого этажей

23
 ЗАКЛЮЧЕНИЕ

Целью данной курсовой работы являлась разработка игры в жанре

Платформер с применением технологии HTML5 Canvas. Относительно
выбранной темы была определена структура будущего сайта и содержимое
его страниц.
Для реализации данного сайта были рассмотрены современные
технологии веб-разработки. Технологии HTML, CSS и JavaScript являются
неотъемлемой частью современного веб-программирования. Благодаря языку
разметки HTML была получена возможность структурировать содержимое
сайта и подключить к нему CSS и JavaScript. Используя технологию CSS, был
разработан внешний вид сайта, а также его адаптивность. Функциональность
сайта же была обеспечена с помощью языка программирования JavaScript.
Для реализации сайта были рассмотрены современные технологии веб-
разработки, такие как HTML, CSS и JavaScript. С помощью HTML было
структурировано содержимое сайта и подключены CSS и JavaScript.
Благодаря CSS был разработан внешний вид сайта, а благодаря JavaScript
была написана игра в жанре Платформер.
Также была рассмотрена технология HTML5 Canvas, на основе которой
и была разработана игра.
В результате была разработана игра в жанре Платформер с
применением технологии HTML5 Canvas. В ходе выполнения работы все
поставленные задачи и цели были выполнены.

24
 СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Электронный учебник : [сайт].  Москва, 2023 ̶ .  URL:

https://www.tct.ru/upload/elekt_uchebnik/HTMLCSS/data/html1.html (дата
обращения 17.05.2023).
2. Codepen: [сайт].  Москва, 2023 ̶ .  URL:
https://codepen.io/lastuniverse/pen/gdNwXX (дата обращения 01.05.2023).
3. Code Basics : [сайт].  Москва, 2023 ̶ .  URL: https://code-
basics.com/ru (дата обращения 17.05.2023).
4. HTML5BOOK : [сайт].  Москва, 2023 ̶ .  URL:
https://html5book.ru/krasivye-knopki-dlya-sayta/ (дата обращения
01.05.2023).
5. HTMLbook: [сайт].  Москва, 2023 ̶ .  URL:
http://htmlbook.ru/html/td/bgcolor (дата обращения 10.05.2023).
6. JavaScript: [сайт].  Москва, 2023 ̶ .  URL:
https://learn.javascript.ru/position (дата обращения 17.05.2023).
7. MDN Web Docs : [сайт].  Москва, 2023 ̶ .  URL:
https://developer.mozilla.org/ru/docs/Games/Tutorials/2D_Breakout_game_
pure_JavaScript (дата обращения 01.05.2023).
8. Professor Web : [сайт].  Москва, 2023 ̶ .  URL:
https://professorweb.ru/my/html/html5/level4/4_9.php (дата обращения
01.05.2023).
9. SkillFactory Media : [сайт].  Москва, 2023 ̶ .  URL:
https://blog.skillfactory.ru/glossary/html/ (дата обращения 17.05.2023).
10. Wikipedia : [сайт].  Москва, 2023 ̶ .  URL:
https://ru.wikipedia.org/wiki/CSS (дата обращения 17.05.2023).

25