Министерство науки и высшего образования Российской Федерации Федеральное государственное автономное образовательное учреждение высшего образования «СЕВЕРО-ВОСТОЧНЫЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ ИМЕНИ М.К. АММОСОВА» Институт математики и информатики Кафедра «Многоканальные телекоммуникационные системы» КУРСОВАЯ РАБОТА по дисциплине «Web-программирование» на тему: «Проектирование и создание игры с помощью HTML, CSS и JavaScript» Выполнил: Мярикянов Валерий Эрнестович студент 3 курса БП-ИВТПО-17 группы научный руководитель: преподаватель Петрова Евгения Анатольевна г. Якутск 2020 г. Содержание Введение ................................................................................................................... 3 Глава 1. Todo-лист ................................................................................................... 4 Глава 2. Верстка веб-страницы .............................................................................. 5 Глава 3. Работа с JavaScript .................................................................................... 9 Заключение ............................................................................................................ 21 Список литературы ............................................................................................... 22 2 Введение Обоснование актуальности темы исследования, отражение объекта, предмета, цели задачи. Современный мир невозможно представить без Интернета. Интернет стал для многих людей одним из важнейшим аспектом в жизни. С помощью Всемирной Паутины люди развлекаются, самообразовываются, работают и конечно же общаются с родными, близкими, друзьями и т. д. Актуальность темы исследования заключается в том, что такие инструменты как «HTML», «CSS» и «JavaScript» играют исключительно большую роль в работе web-сайтов и в других областях Интернета, а также, долгое время будут стандартами веба. Разработка веб-игры с помощью данных инструментов, особенно хорошо и всесторонне позволит изучить сценарный язык программирования «JavaScript», что является несомненным плюсом. Объект исследования – Web-программирование Предмет исследования – HTML, CSS и JavaScript Цель работы – анализ и разработка игры на основе «HTML», «CSS» и «JavaScript». Задачи работы: - систематизация, закрепление, углубление и расширение теоретических знаний и практических умений по дисциплине «Web-программирование»; - формирование компетенций, связанных деятельностью. 3 с профессиональной Глава 1. Todo-лист Начинаем свой проект с составления так называемого todo-листа. Todoлист – это простой список дел или же список задач. В него можно записать все свои задумки, это помогает не забывать их. А также, это позволяет лучше сконцентрироваться на задаче и продумать её. Изображение 1. Todo-list 4 Глава 2. Верстка веб-страницы После составления todo-листа можно приступить к работе. Первой задачей является создание .html файла и её верстка. Верстка веб-страниц – это создание структуры гипертекстового документа на основе HTML разметки, как правило, при использовании таблиц стилей и клиентских сценариев, таким образом, чтобы элементы дизайна выглядели аналогично макету. Изображение 2. Начало работы с index.html Создаем файл с названием «index» и расширением «.html». Его можно открыть через любой текстовый редактор, например «Блокнот», однако рекомендуется установить специальное редакторы кода, такие как «Visual Studio Code», «Sublime Text» или «Notepad++». Они подсвечивают синтаксис и имеют богатый функционал, полезный при написании веб-страниц, таблиц стилей и программ. После создания файла начинаем его заполнять. В первой строке, мы декларируем тип документа: «<!DOCTYPE html>». Это позволяет браузеру определить версию HTML и правильно отобразить страницу. Во второй строке пишем «<html lang=”ru”>». Это позволит правильно отображать и обрабатывать символы русского алфавита. Далее, в следующих строках открываем тег head таким образом: «<head>» и закрываем его вот так: «</head». Внутри тега head мы напишем другие элементы, которые помогут браузеру корректно показать нашу веб-страницу. Русские символы можно кодировать через UTF-8, для этого добавляем соответствующую строку, см. 5 изображение 2. Чтобы установить заголовок окна веб-страницы, пишем внутри тега «title» название веб-страницы. После этого можно приступить к тегу «body». Внутри «body» мы пишем содержимое веб-страницы. Так как мы проектируем игру через canvas, напишем «<canvas id=”canvas” width=”900” height=”700”> </canvas>». «id=”canvas”» пригодится в будущем, при работе с JavaScript. Параметр «width» задает ширину, а «height» высоту. Окно canvas будет иметь размер 900x700. Этого для нашей игры будет достаточно. Проверим, как теперь выглядит наше окно. Откроем файл «index.html» с помощью браузера. Мы увидим лишь страницу с белым фоном и линию квадрата. Почему? Потому что canvas пуст, там ничего не происходит. Изображение 3. Пустой canvas Перед началом работы с JavaScript, стоит разместить canvas по центру веб-страницы для удобства. Для этого создаем файл с названием «style» и расширением «.css». В этом файле мы будем писать таблицы стилей. Добавим новую строчку. Смотреть изображение 4, шестую строку. 6 Изображение 4. Подключение .css файла Внутри «.css» файла впишем строки, показанные на изображении 5. Изображение 5. Таблицы стилей 7 Суть этих изменений состоит в том, чтобы у тега «div» класса «parent» задать стили псевдо-элементу «before», а именно 100% высоту, выравнивание по центру и модель строчного блока. Чтобы блок не падал под псевдоэлемент, когда размеры первого больше, чем у «parent», указываем «parent» следующие параметры: «white-space: nowrap» и «font-size: 0», после чего у блока отменяем эти стили следующими –«white-space: normal». «font-size: 0» нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. В итоге всех этих манипуляций canvas находится ровно по центру веб-страницы, даже если менять соотношение сторон окна браузера. Изображение 6. Итог верстки 8 Глава 3. Работа с JavaScript 3.1 Функция Mouse() Создание мышей через конструктор позволяет с легкостью создавать разных мышей и уменьшить повторение одного и того же кода, что повышает читабельность кода. Конструктор создает объект со следующими свойствами: name – название мыши, используется для создания отличающихся типов мышей; reward – награда в виде очков за клик на мышь. bonus – награда в виде бонусного времени за клик на мышь. pos_x – текущая позиция мыши по оси x на canvas. pos_y – текущая позиция мыши по оси y на canvas. final_x – позиция по оси x на которую мышь стремится. final_y – позиция по оси y на которую мышь стремится. img – ссылка изображение мыши. size – размер мыши. width – ширина мыши. height – высота мыши. speed – скорость мыши. radian – угол в радианах. Необходима для поворота мышки при движении. iframe – переменная, необходимая для анимации. animFlag – переменная, необходимая для анимации. 9 Изображение 7. Конструктор мышей 3.2. Функция menu() Изображение 8. Главное меню в игре 10 Изображение 9. Код главного меню Главное меню вызывается функцией «menu()». Свойства «fillStyle», «textBaseline», «textAlign» и «font» объекта «ctx» задают стиль надписи, а метод «fillText» рисует надписи. 3.3 Функция recordWriteMenu() Изображение 10. Запись рекорда при прохождении условия Изображение 11. Альтернатива при завале условия 11 Изображение 12. Исходный код Меню записи рекордов открывается, если игрок проходит условие «score > bestScoreCookie», то есть, если ставит новый рекорд. В этом меню игрок может напечатать своё имя или прозвище, чтобы сохранить рекорд. Если же игрок не смог побить предыдущий рекорд, то он может только начать новую попытку. 3.4 Keyboard event listener и nameTyping() Изображение 13. Прослушка клавиш и события 12 В главе 3.3 разбиралось меню записи рекордов, в котором говорилось о возможности писать своё имя. В канвасе, к сожалению, нет готовых решений вроде input-форм как в HTML, поэтому пришлось «слушать» и реагировать на клавиатурные события. В изображении 13 приведен код. Чтобы переменная «playerName» не заполнялась в течении всей игры, был создан флаг, который имеет значение «true» только в меню записи рекорда. Второе условие было создано для удобства, третье условие позволяет стирать символы, если была совершена опечатка, а четвертая закрывает меню записи рекордов и начинает новую игру, по пути сохранив новый рекорд. 3.5 Mouse event listener и mouseClick() В главе 3.2 была доступна кнопка «Начать игру», а также в самом начале говорилось о конструкторе Mouse(), собирающего мышей на которых нужно кликать. В этой главе разберемся в одной из важнейшей части игры. Это, собственно, кликание компьютерной мышкой и реакция игры на это. Изображение 14. Часть кода ответственная за реакции на клики Начинаем «слушать» и реагировать на событие «mousedown», что соответствует нажатию/удерживании кнопки мыши. Если такое событие произошло, то открывается функция mouseClick(), в которой мы начинаем 13 проверять все возможные кликабельные зоны. Например, если игра не началась и не открыто меню записи рекордов, разблокируются кликабельная зона для кнопки «Начать игру». Если в зоне видимости канваса находятся мышки, то на них можно нажать. Это провоцирует их телепортироваться в одну из зон вне зоны канваса, что дает эффект появления «новой» мышки взамен кликнутой старой. Там же даются бонусы и очки, в зависимости от кликнутой мышки. 3.6 Функция startGame() Изображение 15. Функция запуска игры 14 Данная функция, как говорится в её названии, начинает игру. Она вызывается только один раз, когда нажимают на кнопку «Начать игру». Она создает 15 объектов – мышей трех разных типов. У каждого типа мыши разная вероятность появления. Вероятность появления большой мыши – 0.3, обычной 0.55, а маленькой 0.15. Внутри свитча, в зависимости от значения переменной «state», настраиваются характеристики мыши: вознаграждения за клик по мыши в виде очков и бонусного времени, её размер, скорость и изображение. Затем создается в функции «randomSpawn()» задается место случайного появления мыши за канвасом, а в функции «randomPoint()» задается место, куда мышь должна пойти. Затем, новосозданная мышь отправляется в массив объектов методом «push()». И так продолжается, пока не закончится цикл. 3.7 Функции randomSpawn() и randomPoint() Изображение 16. Функции randomSpawn() и randomPoint() Внутри функции «randomSpawn()» случайно генерируется число от 1 до 4 и, в зависимости от полученного числа, выбирается место появления мыши. 15 В изображении 17 показаны эти места красным цветом, черным показана видимая зона канваса. Изображение 17. Зоны появления мышей Функция «randomPoint()» работает очень просто. Для свойства «final_x» выбирается случайное число от 50 до 850, а также, число от 50 до 650 для свойства «final_y». Таким образом, мышь начинает двигаться в случайных направлениях. 3.8 Функция move() Изображение 18. Код функции move() 16 Данная функция отвечает за движение мыши в указанную свойствами final_x и final_y точку. Переменные «center_x» и «center_y» указывают точку центра изображения мыши, а с помощью метода «translate()» меняем начальную позицию канваса. Теперь, начало канваса находится ровно у центра мыши. Находим угол наклона мыши в радианах и так как мышь у нас находится в вертикальном положении, добавляем ещё 90 градусов в радианах. Полученный угол используем, чтобы повернуть канвас, а затем возвращаем последний в обратное положение. Изображение 19. Пример нахождения угла Внутри условия «if()» обрабатывается движение мыши в указанную точку. Если мышь не добралась до пункта назначения, то мы изменяем её положение на канвасе на число четыре, помноженное на разные коэффициенты вроде «speed» и угла в радианах. Это позволяет дойти до любой точки прямой линией. Сперва, предполагалось реализовать передвижение с помощью кривых Безье, но, в итоге, попасть по таким мышам было сложно, и конструкция получалось очень громоздкой. Нынешнее решение простое и хорошо читаемое. 17 3.9 Функция drawMouse() Изображение 20. Функцию drawMouse() Первые две строки задают ширину и длину мышки. Они понадобятся для метода «drawImage()». Метод «save()» сохраняет состояния канваса, он нужен для того, чтобы обратно повернуть канвас после работы функции «move()» с помощью метода «restore()». В свитче, в зависимости от имени мыши, загружается следующий кадр для анимации виляния хвостом. Потом всё это отрисовывается методом «drawImage()». В следующих условиях идет смена свойства «iframe» и «animFlag» объекта «mouse», это нужно для смены кадров анимации. 18 3.10 Функция draw() Изображение 21. Функция draw() Эта функция отвечает за отрисовку фонового изображения, показа главного меню, меню записи рекорда, отрисовки оставшегося времени, счета и вызова функции отрисовки каждой мышки во время игры. 3.11 Функция countdown() Изображение 22. Функция countdown() Данная функция отсчитывает время до конца игры. Если переменная «time» достигает значения ниже нуля, то игра заканчивается, в противном случае функция вызывается ещё раз, а переменную «time» каждый декрементируют (отнимают от значения целое число 1). 19 3.12 Функция get_cookie() Изображение 23. Функция get_cookie() Эта функция позволяет загружать «cookies» из браузера, что позволяет загружать сохраненные рекорды. 3.13 Загрузка медиа Изображение 24. Загрузка изображений Изображения загружаются в игру с помощью конструктора «Image()». Пример загрузки показан на изображении 24. Изображение 25. Загрузка аудио Аудио загружается аналогичным образом. Однако запускается с помощью метода «play()». 20 Заключение В заключении проведенной разработки игры в рамках курсовой работы можно сделать следующие выводы: Во время курсовой работы были достигнуты все цели и задачи, поставленные программой: изучены «HTML», «CSS» и «JavaScript», закреплены, углублены и расширены теоретические знания и практические умения, сформированы компетенции, связанные с профессиональной деятельностью. При разработке игры стоит составлять задачи и подзадачи, которые необходимо достигнуть. В противном случае разработка игры может стать путанной и затруднительной, можно и вовсе потерять всякое желание разрабатывать из-за чувства отсутствия прогресса. Иными словами, не стоит создавать нечто сложное сразу, можно сделать всё постепенно, увеличивая сложность с каждым этапом. Это позволяет сэкономить время и работать больше. 21 Список литературы 1. Беляев С. А. Разработка игр на языке JavaScript: Учебное пособие. – СПб.: Издательство «Лань», 2016. 2. HTML5 Canvas Tutorials [Электронный ресурс]. —: http://www.html5canvastutorials.com/ 3. Линейная алгебра для разработчиков игр [Электронный ресурс]. — 2015. — https://habr.com/ru/post/131931/, свободный. 22
