XIII Международная студенческая научная конференция Студенческий научный форум - 2021

Разработана игра "Покатушки", представляющая собой машину, которая должна уклониться от надвигающегося на нее потока других машин. Во время игры должна звучать музыка на тему движения. Помимо машин на экране возникают:

мигалка - при ее наличии можно нажать клавишу пробел и очистить игровое поле от объектов;

топливная канистра, увеличивающая количество бензина в баке на 50%.

Игра может закончится в трех случаях:

Машина игрока врежется в одни из машин набегающего потока.

У машины игрока закончится топливо.

Игрок сам закончит игру.

Для полноценной работы программы необходимо, чтобы браузер поддерживал HTML5, это связано с тем, что в файле используется холст Canvas [2].

В игре использованы два файла формата html. Хотелось бы обойтись одним, но простой способ подключения звука натолкнулся на некоторые ограничительные правила браузеров. Дело в том, что современные браузеры не дают запустить звук без клика пользователем на странице. Поэтому в главном файле была создана кнопка для запуска игры. Ну и придумана некоторая шуточная предыстория, как в большинстве игр (Рисунок 1).

Рисунок 1 - Главная страница

Управление игрой производится стрелками клавиатуры: вверх, вниз, влево, вправо, а также клавишей пробел.

Во время создания игры долго выбирали: чтобы при использовании мигалки удалялось все кроме машины игрока, или оставались полезные вещи, такие как мигалка и топливо. Все-таки решили, что такая вещь как мигалка - она уже является большим подспорьем пользователю и это достаточно для него. Мигалка убирает все объекты, кроме главной машины.

После нажатия на кнопку «Поехали» на главной странице будет открыт файл game.html, куда подключается основной файл с кодом на JavaScript.

Единственный звуковой файл находится в каталоге sounds и называется m10.mp3. При желании можно заменить мелодию на свою, главное, чтобы имя совпадало.

Файл game.html открывается во фрэйме, занимающим максимальное количество места на экране. Для этого удаляется контейнер div c id txt, где располагалась вся приветственная информация, высвобождая все пространство для игры.

Если пользователь по какой-то причине использует браузер, не поддерживающий HTML5, ему будет выдано сообщение об этом. Такая ситуация произошла, когда пытались запустить игру на браузере Microsoft Internet Explorer 8. Все современные браузеры воспроизводили игру.

Для оформления главной страницы и холста применялись каскадные стили, помещенные в файл style.css.

В каталоге images находятся 6 картинок, используемых в игре. Все файлы имеют формат png. Это сделано специально, т.к. данный формат обладает хорошими цветовыми характеристиками, поддерживается браузерами и, самое главное, позволяет делать прозрачные области, что позволяет избегать неуместных белых полей по краям изображений. Картинки представлены на рисунке 2.2.

Рисунок 2 - Картинки игры

Возникла идея создать движущееся изображение в качестве дорожного полотна, но проявилось сильно мерцание на всех проверяемых браузерах даже на самых мощных компьютерах. Глаза пользователя сильно утомлялись, и было принято решение обойтись дружелюбным цветом фона, который прописали в каскадной таблице стилей.

Рассмотрим главный файл в программе - это game.js. Для всех объектов игры был создан класс ObjectMovingTowardsYou, при создании в конструкторе задавались его координаты, изображение, указывался тип объекта, участвующего в движении и принимающий одно из следующих значений:

1 - машинка;

2 - заправка;

3 - мигалка.

Пример основного интерфейса игры, формируемого программным файлом, представлен на рисунке 2.3.

Рисунок 3 - Основой интерфейс игры

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

В зависимости от типа объекта выполнялось соответствующее действие:

если 1, то конец игры, если 2, то увеличение топлива на 50% и если 3, то получение еще одной расчищающей дорогу мигалки.

Последней функцией конструктора была функция с говорящим название «move», отвечающая за движение объекта по вертикали и горизонтали.

В файле скрипта использовано три константы:

const UPDATE_TIME = 1000 / 60;

const RANDOM_TIME_OBJECT = 10000;

const FUEL_MAX = 5000;

Первая для ежесекундного обновления содержимого экрана. С учетом того, что обновление телевизионной картинки всего 24 кадра в секунду, 60 это комфортное обновление.

Вторая константа нужная для работы с рандомными (случайными) значениями, отвечающими за появление объектов.

Третья переменная нужная для контроля количества топлива в машине игрока.

В программе использованы шесть глобальных переменных.

После объявления класса шли строки, отвечающие за положение и вид холста. Была использована двумерная графика, помещенная в заранее подготовленный контейнер div с id canvas.

В процессе программирования была поставлена цель - увеличение числа машин, движущихся на встречу и уменьшение числа мигалок и баков с горючим. Все это создается в самой большой функции кода Update. Начало этой функции посвящено созданию объектов по следующему приоритету с использованием функции получения случайного числа в заданном диапазоне:

пытаемся создать элемент Топливо;

если не был создан элемент Топливо, то пытаемся создать элемент Мигалка;

если не был создан элемент Мигалка пытаемся создать элемент Встречная машинка;

может быть не создан ни один из перечисленных выше элементов:

На встречу игроку движутся машинки с окончанием название файла на F и номер файла. Случайным образом происходит выбор каждой из них.

В правом верхнем углу выводится текущая статистика. Игрок видит количество топлива, количество мигалок и общее количество пройденных машин (Рисунок 4).

Рисунок 4 - Информация для игрока

Следует отметить, что при падении уровня топлива до 30% цвет сообщения меняется на красный (Рисунок 5). За это отвечает элемент кода в функции Update:

Рисунок 5 - Топлива мало

Начальная скорость искусственно уменьшается при уменьшении холста.

Для анализа получаемых случайных значений и основных коэффициентов в некоторых местах добавлял функции console.log. В последствии они были закомментированы, но поиск оптимальных настроек еще не закончен и будет продолжен.

При программировании старался применять английский язык для комментариев, однако в начала и в конце игры выводится сообщение на русском языке (Рисунок 6).

Рисунок 6 - Окончание игры.

СПИСОК ЛИТЕРАТУРЫ

Богданов М. Р. Разработка клиентских приложений Web-сайтов [Электронный ресурс]: учебние для вузов http://biblioclub.ru/index.php?page=book_red&id=233745 Москва: Интернет -Университет Информационных Технологий, 2010 (дата просмотра: 05.11.2020).

Климов, Александр JavaScript на примерах / Александр Климов. - М.: БХВ-Петербург, 2018.

Макфарланд, Дэвид JavaScript. Подробное руководство / Дэвид Макфарланд. - М.: Эксмо, 2015.

Слепцова, Л. Д. JavaScript. Самоучитель / Л.Д. Слепцова, Ю.М. Бидасюк. - М.: Вильямс, 2017.