JavaScript для детей. Самоучитель по программированию. Ник Морга. Москва Манн, Иванов и Фербер 2016

226
Часть III. Графика нажатия клавиш. Теперь понажимайте клавиши на клавиатуре — в консоль будут выводиться соответствующие этим клавишам коды.
Например, если вы напечатаете «привет», в консоли появится нечто вроде:
71 72 66 68 84 78
У каждой нажатой клавиши свой код — для «П» это 71, для «Р» это 72 и т. д.
ПОПР ОБУ ЙТЕ !
Понажимайте разные клавиши, чтобы узнать их коды. Какие значения соответствуют стрелкам вверх, вниз, влево и вправо? А клавишам SHIFT и ENTER?
У каждой буквенной и цифровой клавиши тоже есть свой уникальный код.
Перевод кодов в названия с помощью объекта
Чтобы работать с клавиатурой было проще, воспользуемся объектом для перевода кодов клавиш в их названия. В следующем примере мы создадим объект keyNames, ключи которого соответствуют кодам клавиш, а значения — их англоязычным названиям. Замените в файле
keyboard.html прежний JavaScript-код на вот такой:
var keyNames
=
{
32:
"space"
,
//пробел
37:
"left"
,
//влево
38:
"up"
,
//вверх
39:
"right"
,
//вправо
40:
"down"
//вниз
};
$
(
"body"
).keydown(
function
(event) {

console log
(keyNames[
event
.keyCode]);
});
Сначала мы создали объект keyNames, добавив ему в качестве свойств числа 32, 37, 38, 39 и 40. Это пары «ключ-значение», где ключами являются коды клавиш (такие как 32, 37 и т. д.), а соответствующими
Key name
— название клавиши

15. Управление анимациями с клавиатуры
227
значениями — названия клавиш (например,
"space" для «пробела» и "left" для стрелки влево).
Теперь этот объект можно использовать для поиска названия клавиши по ее коду. Например, чтобы узнать название для кода 32, введите keyNames[32] и получите строку "space".
В строке

мы используем объект keyNames в теле обработчика событий, чтобы найти название только что нажатой клавиши. Если находящийся в event.keyCode код есть среди ключей объекта keyNames, обработчик выведет в консоль соответствующее название, иначе он напечатает undefi ned.
Загрузите файл keyboard.html вбраузер. Откройте консоль, кликните по основному окну браузера и понажимайте разные клавиши. При нажатии на любую из пяти клавиш, перечисленных в объекте keyNames
(то есть стрелок или пробела), программа напечатает их название. Иначе она выведет undefi ned.
ПОПР ОБУ ЙТЕ !
Добавьте в объект keyNames дополнительные пары «ключ-значение», чтобы можно было получить названия других клавиш. Пусть это будут коды и названия для SHIFT, ENTER/RETURN, и ALT/OPTION.
Управляем мячом с клавиатуры
Теперь, зная, как определить нажатую клавишу, мы можем написать программу для управления мячом с клавиатуры. Наша программа будет рисовать мяч и перемещать его вправо. Нажатия клавиш-стрелок будут менять направление мяча, а нажатие на «пробел» остановит его движение.
Если мяч уйдет за границу «холста», он появится с противоположной стороны. Например, если мяч уйдет за правую границу, он снова появится у левой границы, продолжая двигаться в прежнем направлении, как показано на рис. 15.1.
Мы воспользуемся объектом под названием keyActions, чтобы определять, какая клавиша нажата, и использовать эту информацию для смены направления полета мяча. А для периодического обновления позиции мяча и перерисовки его в новых координатах мы воспользуемся функцией setInterval.
Рис. 15.1. Если мяч
вылетит за правую
границу «холста»,
он опять появится слева
Actions
—
действия

228
Часть III. Графика
Настройка «холста»
Сначала нам нужно найти элемент canvas и получить контекст рисования. Откройте файл keyboard.html
изамените весь JavaScript внутри второй пары тегов

перейти в каталог файлов