СОЗДАНИЕ ИНТЕРАКТИВНОЙ СРЕДЫ В ВИДЕ ИГРЫ-СТРАТЕГИИ ДЛЯ ИЗУЧЕНИЯ JAVASCRIPT

CREATING AN INTERACTIVE ENVIRONMENT AS A STRATEGY GAME FOR LEARNING JAVASCRIPT

Alexey Petrov

student, Department of Informatics and Programming, Saratov State University,

Russia, Saratov

Marina Ogneva

scientific supervisor, PhD, Assistant Professor, Department Chair, Department of Informatics and Programming, Saratov State University,

Russia, Saratov

АННОТАЦИЯ

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

ABSTRACT

The article is devoted to improving the quality of teaching the JavaScript programming language using interactive gaming environments. The currently available software analogues were considered. The shortcomings are identified and the creation of your own application is justified. A list of tasks and a description of their solution are presented. As a result, an interactive software environment was obtained and tested. The results of the work carried out are formulated, its practical significance and prospects for the subsequent use of the resulting software product and its improvement are determined.

Ключевые слова: обучение программированию, JavaScript, интерактивная среда.

Keywords: learning to programing, JavaScript, interactive environment.

1. Введение

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

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

Одной из наиболее известных и популярных интерактивных сред является Кумир, разработанный по заказу Российской Академии Наук и предназначенный для поддержки начальных курсов информатики и программирования в средней и высшей школе. Однако данная среда не является игровой, что делает ее мало привлекательной с точки зрения обучающихся детей и подростков.

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

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

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

Язык JavaScript входит в первую десятку самых популярных языков программирования по мнению индекса TIOBE [3]. Это высокоуровневый мультипарадигменный интерпретируемый язык программирования с динамической типизацией, который вместе с HTML и CSS входит в базовый набор инструментов Web-разработки. На JavaScript создаются приложения, которые исполняются в браузере на стороне клиента и обеспечивают интерактивность сайтов [4].

Поставленная цель определила следующие задачи работы:

1. Изучение существующих игровых приложений для изучения языков программирования;
2. Демонстрация возможностей языка JavaScript для создания интерактивной игровой среды;
3. Создание программных сред и программного интерфейса для взаимодействия с ними;
4. Продумывание простых путей расширения возможностей и функционала приложения без существенного переписывания кода среды;
5. Создание набора уроков для созданных сред;
6. Проведение опроса с целью тестирования и выяснения уровня привлекательности изучения языка с созданной средой и без нее.

2. Выбор инструментария разработки

Для написания проекта было решено использовать платформу Node.js –среду для выполнения кода JavaScript на стороне сервера. В основе Node.js лежит разработанный Google* движок V8, который используется в браузере Chrome и отвечает за компиляцию кода JavaScript во внутренний код машины [5].

Для создания графического приложения было решено использовать Electron – это фреймворк, разработанный GitHub, который позволяет разрабатывать нативные графические приложения для операционных систем с помощью веб-технологий, комбинируя возможности Node.js для работы с back-end и библиотеки веб-рендеринга Chromium [6].

При написании кода используется TypeScript – это строго типизированный и компилируемый язык программирования, расширяющий возможности JavaScript. Строгая типизация уменьшает количество потенциальных ошибок, которые могли бы возникнуть при разработке на JavaScript [7].

Для сборки модулей проекта используется Webpack. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке. Webpack также предоставляет встроенный сервер для разработки, который можно использовать в качестве HTTP-сервера для обслуживания файлов во время разработки с возможностью горячей замены модулей [8].

3. Разработка

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

Рисунок 1. Схема работы интерактивной среды

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

4. Тестирование продукта

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

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

Для подтверждения данной теории требуется проведение отдельных статистических исследований, которые могут быть темой отдельной научной работы.

5. Заключение

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

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

* (По требованию Роскомнадзора информируем, что иностранное лицо, владеющее информационными ресурсами Google является нарушителем законодательства Российской Федерации – прим. ред.)

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

1. Роль программирования в современной цивилизации. [Электронный ресурс]. URL: https://www.gramota.net/materials/1/2009/6/48.html (дата обращения: 13.10.2021)
2. Интерактивное образование и интерактивное обучения: в чем смысл понятий? [Электронный ресурс]. URL: https://interactiv.su/2022/02/23/интерактивное-образование-и-интерак/#:~:text=Интерактивность%20оборудования%20и%20программных%20средств,использовать%20специфические%20формы%20мотивации%20обучающихся. (дата обращения: 25. 02.2022)
3. Январский рейтинг языков программирования TIOBE. [Электронный ресурс]. URL: https://www.opennet.ru/opennews/art.shtml?num=56477#:~:text=В%20январском%20рейтинге%20PYPL%2C%20в,%2C%20Abap%2C%20Groovy%20и%20Haskell. (дата обращения: 15.01.2022)
4. Стоит ли учить JavaScript. [Электронный ресурс]. URL: https://ru.hexlet.io/blog/posts/stoit-li-uchit-javascript-perspektivy-situatsiya-na-rynke-truda-mneniya-ekspertov (дата обращения: 03.03.2022)
5. Документация Node.js. [Электронный ресурс]. URL: https://nodejsdev.ru/doc/ (дата обращения: 07.03.2022)
6. Electron. Документация. [Электронный ресурс]. URL: https://www.electronjs.org/ru/docs/latest/ (дата обращения: 10.03.2022)
7. Metanit. Введение в TypeScript. [Электронный ресурс]. URL: https://metanit.com/web/typescript/1.1.php (дата обращения: 18.03.2022)
8. Habr. Webpack: руководство для начинающих. [Электронный ресурс]. URL: https://habr.com/ru/post/514838/ (дата обращения: 24.03.2022)