Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf

76

Глава 4

if(event.keyCode === 38) { // êëàâèøà «Ñòðåëêà ââåðõ»

// Âûçîâ ôóíêöèè «äâèãàòüñÿ ââåðõ»

}

// Ðåàëèçàöèÿ îñòàëüíûõ ôóíêöèé

}

Разработчик может использовать данный подход, но

он должен понимать, что при этом в программе условия
пишутся относительно кодов клавиш, и реализовать за
мену клавиш, если пользователю неудобно использовать
такую раскладку, будет непросто.

Предлагается использовать другой подход, который

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

var eventsManager = {

bind: [], // ñîïîñòàâëåíèå êëàâèø äåéñòâèÿì

action: [], // äåéñòâèÿ

setup: function (canvas) { // íàñòðîéêà ñîïîñòàâëåíèÿ

this.bind[87] = 'up'; // w – äâèãàòüñÿ ââåðõ

this.bind[65] = 'left'; // a – äâèãàòüñÿ âëåâî

this.bind[83] = 'down'; // s – äâèãàòüñÿ âíèç

this.bind[68] = 'right'; // d – äâèãàòüñÿ âïðàâî

this.bind[32] = 'fire'; // ïðîáå렖 âûñòðåëèòü

// êîíòðîëü ñîáûòèé «ìûøè»

canvas.addEventListener("mousedown", this.onMouseDown);

canvas.addEventListener("mouseup", this.onMouseUp);

// êîíòðîëü ñîáûòèé êëàâèàòóðû

document.body.addEventListener("keydown", this.onKeyDown);

document.body.addEventListener("keyup", this.onKeyUp);

},

onMouseDown: function (event) { // íàæàòèå íà êëàâèøó «ìûøè»

eventsManager.action["fire"] = true;

},

onMouseUp: function (event) { // îòïóñòèëè êëàâèøó «ìûøè»

eventsManager.action["fire"] = false;

},

onKeyDown: function (event) { // íàæàëè íà êíîïêó

// íà êëàâèàòóðå, ïðîâåðèëè, åñòü ëè ñîïîñòàâëåíèå äåéñòâèþ

äëÿ ñîáûòèÿ ñ êîäîì keyCode

Взаимодействие с пользователем

77

var action = eventsManager.bind[event.keyCode];

if (action) // ïðîâåðêà íà action === true

eventsManager.action[action] = true; // ñîãëàñèëèñü

// âûïîëíÿòü äåéñòâèå

},

onKeyUp: function (event) { // îòïóñòèëè êíîïêó íà êëàâèàòóðå

// ïðîâåðèëè, åñòü ëè ñîïîñòàâëåíèå äåéñòâèþ äëÿ ñîáûòèÿ

// ñ êîäîì keyCode

var action = eventsManager.bind[event.keyCode]; // ïðîâåðèëè

// íàëè÷èå äåéñòâèÿ

if (action) // ïðîâåðêà íà action === true

eventsManager.action[action] = false; // îòìåíèëè äåéñòâèå

}

};

Аналогичный подход и методы по созданию менедже

ра событий представлены в [9], [10], [12]. Массив bind ме
неджера событий предназначен для хранения соответ
ствия между кодом действия и клавишей, при нажатии
на которую должно выполняться это действие. Использо
вание массива bind позволяет при необходимости заменить
клавишу действия или использовать несколько клавиш
для одного и того же действия.

Массив action в качестве ключа использует строковое

поле (код действия), а в качестве значения true (действие
необходимо выполнить) или false (действие необходимо
прекратить).

Функция setup в качестве параметра принимает canvas,

чтобы настроить слушатели на действия мыши именно в
пределах canvas, а не всей страницы. В первых пяти стро
ках функции setup выполняется настройка соответствия
между кодами клавиш и действиями.
this.bind[87] = 'up';

Действие «up» должно выполняться при нажатии кла

виши «w». Разработчик может определить те действия,
которые соответствуют логике игры.

В следующих четырех строках выполняется настрой

ка слушателей мыши и клавиатуры, как в параграфах 4.1
и 4.2.
canvas.addEventListener("mousedown", this.onMouseDown);

78

Глава 4

Добавление к canvas слушателя нажатия клавиши мы

ши (mousedown), в качестве действия должна использовать
ся функция onMouseDown менеджера событий. В следую
щей строке настраивается «mouseup».
document.body.addEventListener("keydown", this.onKeyDown);

Добавление к элементу 

body слушателя события нажа

тия клавиш клавиатуры (keydown), в качестве действия
должна использоваться функция onKeyDown менеджера
событий. В следующей строке настраивается «keyup».

Содержимое функции onMouseDown:

eventsManager.action["fire"] = true;

В массив action менеджера событий в поле «fire» запи

сывается значение true, что означает необходимость вы
полнения действия «fire».

Содержимое функции onMouseUp:

eventsManager.action["fire"] = false;

В массив action менеджера событий в поле «fire» запи

сывается значение false, что означает необходимость пре
кращения выполнения действия «fire».

Содержимое функции onKeyDown:

var action = eventsManager.bind[event.keyCode];

if (action)

eventsManager.action[action] = true; // ñîãëàñèëèñü âûïîëíÿòü

// äåéñòâèå
Создается временная переменная action, в которую за

писывается значение, хранящееся в массиве bind для кода
event.keyCode. Затем проверяется, что action существует
(не принимает значение undefined), тогда в массив action
менеджера событий в поле с кодом action записывается
значение true. Если event.keyCode примет значение, для
которого в массиве bind ничего не присвоено, то в резуль
тате в action запишется undefined.

Функция onKeyUp отличается от onKeyDown только

тем, что в качестве значения в action записывается false.

Приведенная в данной главе реализация менеджера

событий позволяет применять его для полноценного управ

Взаимодействие с пользователем

79

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

· добавить поле mouse, которое будет хранить коорди

наты «мыши» (x, y);

· добавить к canvas слушатель на движение мыши

(mousemove);

· во всех методах обработки действий мыши (mouse

move, mousedown, mouseup) сохранять ее координаты
(event.clientX, event.clientY) в поле mouse;

· использовать координаты мыши для обработки необ

ходимых действий.

ВОПРОСЫ ДЛЯ САМОПРОВЕРКИ

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

странице контроля событий клавиатуры?

2. Чем контроль событий клавиатуры отличается от контроля

событий мыши?

3. Какие подходы возможны к реализации менеджера событий?
4. Зачем в одной из предложенных реализаций используется функ

ция setup?

5. Зачем в менеджере событий нужны массивы bind и action? Чем

они отличаются?

6. Что будет, если пользователь нажмет на клавиатуре клавишу,

которой не сопоставлено действия? Почему?

УПРАЖНЕНИЯ

1. В параграфе 4.1 приведено несколько вариантов про

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

2. В параграфе 4.2 приведено несколько вариантов про

граммы контроля событий мыши. Модифицируйте про
грамму так, чтобы она контролировала не только нажа
тия клавиш мыши, но и ее положение над холстом, она
должна выводить координаты мыши (x, y).

80

Глава 4

3. В параграфе 4.3 приведена программа менеджера

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