Файл: колледж цифровых и педагогических технологий.docx

JavaScript также позволяет создавать многопользовательские игры, которые могут быть играны в режиме реального времени. Это делает его идеальным языком для создания онлайн-игр, таких как многопользовательские игры в жанре MMORPG или онлайн-шутеры.
Одним из главных преимуществ JavaScript в создании браузерных игр является его мультиплатформенность. Это означает, что игры, созданные на JavaScript, могут быть запущены на любом устройстве с поддержкой браузера, включая настольные компьютеры, мобильные устройства и планшеты.
JavaScript также имеет множество инструментов для отладки и тестирования игр, таких как Chrome DevTools, Phaser Inspector и другие. Эти инструменты позволяют разработчикам быстро находить и исправлять ошибки в своих играх, а также оптимизировать их производительность.
JavaScript также имеет множество инструментов для создания графики и анимации в играх. Одним из наиболее популярных инструментов является Canvas API, который позволяет создавать 2D и 3D графику в браузере. Другими инструментами для создания графики и анимации в играх на JavaScript являются WebGL, SVG и CSS3.
JavaScript также имеет множество инструментов для создания звуковых эффектов и музыки в играх. Некоторые из наиболее популярных инструментов включают Web Audio API и Howler.js. Эти инструменты позволяют создавать звуковые эффекты и музыку в играх, что делает их более интерактивными и увлекательными для игроков.
JavaScript также позволяет создавать игры с использованием различных устройств ввода, таких как мышь, клавиатура, сенсорный экран и геймпады. Это делает его универсальным языком для создания игр, которые могут быть играны на различных устройствах.
В целом, JavaScript является мощным и гибким языком программирования для создания браузерных игр. Он имеет множество инструментов и библиотек, которые облегчают создание игр, а также позволяет создавать игры различных жанров и уровней сложности.

Глава 2. Разработка игры 2048

2.1 Анализ существующих игр

Существует огромное множество игр 2048, написанных как профессиональными разработчиками, так и начинающими программистами для изучения того или иного языка программирования. Игры 2048 имеют различные дополнительные характеристики, элементы соревнования, игры на счет или время, или даже бесконечный режим. Так же они имеют различные виды написания и платформы, стили и др. отличительные черты. Поэтому в своей игре я решил тоже добавить отличительную черту – таймер который бы регулировал сложность игры.

Рассмотрим некоторые примеры ниже

Игра 2048 от Яндекса в Яндекс Играх:

https://clck.ru/34AXpx

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

Ещё один пример браузерная версия игры 2048:

https://play2048.pro/

Здесь есть меню игры, в котором можно зарегистрироваться игры или выбрать режим, которых тут целых 4. Забегая вперёд в этой версии некорректно отображается картинка, возможно приложение разрабатывалось на мобильные устройства.

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

Далее мы попадаем во вкладку с Мультиплеером, где есть два под-режима – это королевская битва и дуэли, но из-за того, что люди почти не играют, запустить их не удалось.

Последний режим – спидран создан для быстрого прохождения игры на время и там считается таблица рекордов по времени, а не по очкам. Поэтому здесь есть функция таймера для замера времени и ведется счет времени.

2.2 Требования к игре

Каждое приложение должно соответствовать определенным требованиям, которые обоснованы задачами, выполняемыми приложением.

Игра 2048, в первую очередь, должно выполнять математические вычисления, складывать при перемещении плитки с числами. Также игра в моем случае должна иметь таймер с возможностью регулирования уровня сложности по окончании, которого игра бы заканчивалась.

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

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

Должно быть, окончание игры при полном проигрыше.

После составления требования можно приступать к написанию приложения.

2.3 Выбор языка и среды программирования

Прежде чем приступить к написанию приложения, необходимо определить какая среда разработки, окружение и библиотеки будут использованы при написании приложения. Средой разработки является – Replit, также будут использоваться HTML – для работы с версткой сайта, CSS – для декорирования игры и JavaScript для работы с её логикой.

2.4 Описание программы

Первым шагом необходимо создать repl для html (рис. 2.1) который будет являться основой для работы в Replit.

Рисунок 2.1 Окно создания проекта в Replit
После создания проекта в папке проекта создается 3 файла с расширениями .html, .css, .js в которых и будет записан весь код (рис 2.2).

Рисунок 2.2 Создание файлов

После создания файлов можно приступать к разработке. Для начала нужно сделать верстку сайта и выбрать места для всех компонентов. Создаем пространство для игрового поля (game-board) и таймера с смешными названиями (timer) (рис. 2.3)

Рисунок 2.3 Верстка страницы
Затем заходим в файл .css и создаем декорации для нашей игры не забывая про анимации появления элементов, их размер форму и цвет, а так же кнопки для таймера. Используя не фиксированный размер в px, а в vmin, мы создаем адаптацию под разные виды экранов для более удачного опыта использования. (рис. 2.4)

Рисунок 2.4 Часть кода создание оформления

Добавляем самый простенький таймер и интегрируем в сайт с помощью заготовленной верстки. (рис. 2.5)

Рисунок 2.5 Часть кода создание таймера

.

Устанавливаем значение в плитки с помощью функции setValue и через это значение устанавливаем цвет плиточек. Создаем рандомное появление плиток после каждого хода. (рис. 2.6)

Рисунок 2.6 Часть кода создание значений плиточек
Создаем логику объединения плиточек на игровом поле, а также привязка и отвязка плиток. В частности логика сложения чисел двух плиток и появление новой. (рис. 2.7)

Рисунок 2.7 Часть кода объединения плиточек
Настройка сетки и всех движений по ней находится в этом блоке grid.js с помощью неё создаются методы в будущем передвижения плиток по игровому полю. (рис. 2.8)

Рисунок 2.8 Часть кода объединения плиточек

А теперь будет самый обширный и основной блок кода. Тут присутствует вызов появления рандомных плиточек. Создание функции setupInputOnce() которая позволяет продолжать вводить данные несколько раз. (рис 2.9) Функция ввода данных с клавиатуры async function handleInput(event). (рис 2.10) Проверка возможности движения и окончание игры при невозможности хода. (рис. 2.11) А так же функции движения плиточек и проверяющие возможность их движения. (рис. 2.12)

Рисунок 2.9 Вызов появления рандомных плиточек и функции setupInputOnce()

Рисунок 2.10 Функция ввода данных с клавиатуры

Рисунок 2.11 Окончание игры при невозможности хода

Рисунок 2.12 Функции движения плиточек

2.5 Тестирование программы

Начинаем игру и запускаем по очереди таймера, проверяя их работу и обновление страницы после его завершения. Также пытаемся проиграть, заполнив все свободные плитки, и проверяем обновление страницы после выполнения условий – все отлично работает, без багов и ошибок. Тестирование игры прошло успешно (рис. 2.13 и рис. 2.14).

Рисунок 2.13 Часть кода объединения плиточек

Рисунок 2.14 Часть кода объединения плиточек

Заключение

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

Список литературы

Википедия
Гавриков М. М., Иванченко А. Н., Гринченков Д. В. Теоретические основы разработки и реализации языков программирования. — КноРус, 2013. — 178 с.
Братчиков И. Л. Синтаксис языков программирования. — Наука, 1975. — 230 с.