Основы программирования на JavaScript. Учебное пособие

Функции add и multiply экспортируются из файла-модуля. Для экспорта функций или объектов из модуля нужно определить соответствующее свойство на специальном объекте export.

Exports

Свойства, которые устанавливаются на exports, будут видны при импорте модуля в другие файлы. Например:

function add (a,b) { return a + b;

}

function multiply (a,b) { return a * b;

}

exports.add = add; exports.multiply = multiply;

Require

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

var math = require('./math.js'); console.log(math.add(2, 2)); // 4 console.log(require('./math.js').multiply(2, 3)) // 6

Встроенные модули Node.js

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

Например, используем встроенный модуль os, который предоставляет информацию об окружении и операционной системе:

var os = require('os');

// получим имя текущего пользователя let userName = os.userInfo().username; console.log(userName);

Если передано название модуля и он не является встроенным, тогда идет подключение модуля из папки node_modules. В данной папке находятся все модули, которые добавлены с помощью npm.

Node.js Package Manager

NPM (Node.js Package Manager) – менеджер пакетов, поставляемый с Node.js. В npm можно найти пакеты, предназначенные для решения практически любых задач. Изначально npm создавался как система управления пакетами для Node.js, но в наши дни он используется и при разработке фронтенд-проектов на JavaScript.

71

Для установки модуля npm достаточно ввести в командной строке команду:

npm install <package-name>

Например:

npm install lodash

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

var lodash = require('lodash'); lodash.isNumber(3); // true lodash.isNumber({n: 3}); // false

Для обновления пакетов служит команда npm update.

Получив эту команду, npm проверит все пакеты на наличие их новых версий и, если найдет их новые версии, соответствующие ограничениям на версии пакетов, заданным в package.json, установит их.

Обновить можно и отдельный пакет: npm update <package-name>

Файл package.json

Файл package.json является важнейшим элементом множества проектов Node.js. Package.json представляет собой нечто вроде файламанифеста для проекта. Он дает в распоряжение разработчика множество разноплановых возможностей. Например, он представляет собой центральный репозиторий настроек для инструментальных средств, используемых в проекте. Кроме того, он является тем местом, куда npm [7] и yarn [8] записывают сведения об именах и версиях установленных пакетов.

Поскольку файл package.json содержит многочисленные свойства, может быть затруднительно создавать его вручную без копирования и вставки шаблона из другого места. Чтобы упростить процесс, npm предоставляет команду init, которая задает ряд вопросов и создает файл package.json на основе ваших ответов. На каждом шаге можно пропустить вопрос, нажав ENTER, тогда установится значение «по умолчанию», показанное в скобках ().

package name: Сначала вам будет предложено ввести имя нового проекта. По умолчанию команда предполагает, что это имя текущей папки.

version: Следующее значение, которое нужно ввести – версия. Как и в случае с именем, это поле требуется, если ваш проект будет размещаться вместе с другими проектами в репозитории пакетов npm.

description: Далее необходимо заполнить поле описание, чтобы объяснить, что делает ваш модуль Node.js.

72

entry point: Следующая строка запросит у вас точку входа. Если кто-то осуществляет установку и нуждается в вашем модуле, то указанное вами в точке входа значение будет первой частью вашей загружаемой программы. Значение должно быть относительным местом расположения файла JavaScript и будет добавлено в свойство main

файла package.json.

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

git repository: Затем команда init запросит репозиторий GitHub

проекта.

keywords: Далее команда запросит ключевые слова. Это свойство представляет собой массив строк с полезными терминами, которые можно использовать для поиска репозитория. Лучше всего иметь небольшой набор слов, которые наиболее актуальны для вашего проекта, чтобы обеспечить более целенаправленный поиск.

author: Следующее поле в командной строке – автор. Это полезно для пользователей вашего модуля, которые хотят связаться с вами. Например, если кто-то обнаружит средство эксплуатации уязвимостей в вашем модуле, они смогут использовать это поле, чтобы сообщить о проблеме, чтобы вы смогли ее исправить. Поле представляет собой строку в следующем формате: Name \<Email\> (Website). Электронная почта и веб-сайт являются опциональными данными, т.е. значение может состоять только из имени.

license: В заключение вам будет предложено ввести лицензию. Это определяет юридические разрешения и ограничения, которые будут у пользователей при использовании вашего модуля. Многие модули Node.js имеют открытый исходный код, поэтому npm задает значение ISC по умолчанию.

В результате команда init отобразит файл package.json, который она будет создавать:

PS C:\project> npm init

This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields

and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and

save it as a dependency in the package.json file. Press ^C at any time to quit.

package name: (project)

73

version: (1.0.0) description: node.js project entry point: (index.js)

test command: git repository:

keywords: node.js, javascript author: Ivan Ivanov

license: (ISC)

About to write to C:\project\package.json:

{

"name": "project", "version": "1.0.0",

"description": "node.js project", "main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" &&

exit 1"

}, "keywords": [

"node.js",

"javascript"

],

"author": "Ivan Ivanov", "license": "ISC"

}

Is this OK? (yes)

Нажмите ENTER, чтобы завершить этот процесс и создать файл package.json. С этим файлом вы можете хранить записи о модулях, которые вы установили для вашего проекта.

dependencies: Свойство, которое содержит список npm-модулей, установленных в виде зависимостей файла. Модули автоматически добавляются в этот список после использования команды npm install <package-name>.

Например, после подключения модуля lodash свойство dependencies примет следующий вид:

"dependencies": { "lodash": "^4.17.21"

}

Практические задания

1. Создайте в корневой директории файл app.js. Далее создайте директорию models. В папке models создайте файл {fname}. В данном модуле опишите и экспортируйте функцию-конструктор {fname}, которая принимает аргумент {name} и выводит в консоль «My name is

74

{name}». Импортируйте данный модуль в файле app.js и создайте экземпляр {fname}.

Имя файла / функции-конструктора / экземпляра {fname} выберите из табл. 14 в соответствии с вариантом. Аргументы {name} придумайте самостоятельно.

Таблица 14. Варианты задания

Пример:

var Cat = require(‘./models/Cat’);

var catLeo = new Cat(‘Leo’); // My name is Leo

2.Создайте файл Calculator, в котором опишите калькулятор, который может выполнять операции сложения, вычитания, деления, умножения (используйте заготовки из прошлых лабораторных работ). Импортируйте данный файл в файл app.js.

Пример:

var Сalculator = require(‘./Сalculator’); const calc = Сalculator();

calc.add(1) // 1 calc.multiply(5) // 5

3.Создайте папку math, а в ней следующие файлы: add.js, multiply.js и index.js. В файлах add.js и multiply.js опишите соответствующие функции сложения и умножения двух чисел и экспортируйте их.

Вфайле index.js сделайте результирующий экспорт обоих модулей. Затем в файле app.js сделайте импорт модуля math, который содержит в себе функции add и multiply.

Пример:

var math = require(‘./math’); math.add(1,2); // 3 math.multiply(3,2); // 6

4.Создайте директорию Forest и создайте в нем файл forest.js, а также директории {animal1} и {animal2} которые содержат соответствующие файлы {animal1}.js и {animal2}.js. Файлы {animal1}.js и {animal2}.js должны экспортировать функцию-конструктор, которая принимает аргумент {name} и выводит в консоль “Hi! I’m {animal1/animal2}. My name is {name}”. Импортируйте данные модули в

75

файл forest.js. В forest.js создайте функцию-конструктор Forest, в которой выводится сообщение «This is a forest and here live:», а также со-

здаются экземпляры {animal1} и {animal2}.

Имена директорий / файлов / экземпляров {animal1} и {animal2} выберите из табл. 15 в соответствии с вариантом. Аргументы {name} придумайте самостоятельно.

Таблица 15. Варианты задания

Пример:

var fox = new Fox(‘Tricky fox’); var wolf = new Wolf(‘Old wolf’);

Импортируйте модуль Forest в файл app.js и создайте экземпляр Forest. Структура импортов должна быть следующая (рис. 3).

Рис. 3. Структура импортов

Пример:

var Forest = require(‘./models/ Forest); var forest = new Forest();

//This is a forest and here live:

//Hi! I’m fox. My name is Tricky Fox.

//Hi! I’m wolf. My name is Old Wolf.

5.Инициализируйте package.json, используя npm команду.

6.Используя npm команду, установите модуль lodash. Импортируйте его в файле app.js и используйте как минимум 2 функции,

например isArray, isNumber, add, sort или любые другие.

76

2.8. Лабораторная работа и практическое занятие № 8. Основы разработки игр на JavaScript

Mario.JS – это игровой 2D-движок, написанный с использованием Javascript и HTML5 Canvas API, предназначенный для обучения основам разработки игр [9].

В рамках данного занятия рассматриваются такие задачи, как:

–создание игровых персонажей (сущностей);

–настройка управления игровым персонажем (сущностью) с клавиатуры;

–симулирование физики (силы тяжести, коллизии);

–анимация персонажей с помощью спрайтов;

–добавление игровому порсонажу взаимодействия с другими сущностями;

–добавление в игру звуков.

Подготовка к работе

Чтобы скачать и установить движок Mario.JS [10], выполните следующее:

git clone https://github.com/lvl5hm/mariojs cd mariojs

npm install

Для работы понадобятся:

–веб-браузер (например, Google Chrome);

–консоль (например, cmd или powershell);

–текстовый редактор.

Рекомендуется использовать Visual Studio Code.

Чтобы приступить к выполнению заданий, необходимо открыть папку Mario.JS в консоли.

Чтобы сделать это в Visual Studio Code, выполните следующее:

–откройте приложение;

–выберите папку mariojs с помощью «Файл» - «Открыть»;

–нажмите комбинацию клавиш «ctrl + ~»;

–введите команду npm start.

Откройте браузер и перейдите по адресу localhost:8080.

Если все сделано правильно, на экране отобразятся кирпичные блоки на сером фоне (рис. 4).

77

const asciiMapRows = [

];

Рис. 5. Появление персонажа Марио в игре

Базовое движение

Откройте файл src/entities/mario.js, чтобы настроить поведение Марио.

//#region imports...

export function updateMario(mario) { drawSprite(assets.sprMarioIdle, mario);

}

Когда игра запущена, функция updateMario выполняется каждый кадр и рисует спрайт Марио на экране с помощью функции drawSprite.

function drawSprite( sprite, entity,

animationSpeed = 0, scaleX = 1, scaleY = 1, ) {...}

79

Функция drawSprite рисует спрайт по координатам заданной сущности. Параметры функции:

–sprite (object) – спрайт, который будет нарисован на экране;

–entity (object) – игровая сущность, по координатам x и y которой будет нарисован спрайт;

–animationSpeed (number) – скорость смены кадров спрайта;

–scaleX (number) – масштаб по оси x (например, если этот параметр равен -1, то спрайт будет отражен по горизонтали);

–scaleY (number) – масштаб по оси y.

Параметры animationSpeed, scaleX и scaleY опциональны, так как у них есть значения по умолчанию.

Чтобы Марио начал двигаться, функция updateMario должна изменять его координаты mario.x и mario.y. Добавьте движение Марио по оси x (рис. 6):

export function updateMario(mario) { drawSprite(assets.sprMarioIdle, mario);

> mario.x += 10 * time.deltaTime;

}

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

Рис. 6. Движение Марио по оси x

Значение time.deltaTime означает промежуток времени, прошедший за один кадр. Теперь каждый кадр mario.x будет увеличиваться на небольшое значение. Чтобы проверить свои изменения, сохрани-

80