Файл: Беляев С А - Разработка игр на языке JavaScript - 2016.pdf
Добавлен: 25.10.2018
Просмотров: 7604
Скачиваний: 136
Взаимодействие с пользователем
71
document.getElementById("result").innerHTML =
"Íàæàòà: " + event.keyCode;
}
function keyUp(event) {
document.getElementById("result").innerHTML =
"Îòïóùåíà: " + event.keyCode;
}
document.body.onkeydown = keyDown;
document.body.onkeyup = keyUp;
</script>
</body>
</html>
Отличия приведенного кода от способа 1 в том, что тег
body не содержит атрибутов. А в JavaScript добавились две
дополнительные строки.
document.body.onkeydown = keyDown;
document.body.onkeyup = keyUp;
В обеих строках используется обращение к встроен
ному объекту document и его полю body, указывающему
на тег body, затем в первой строке указателю на функцию
onkeydown присваивается имя функции keyDown, а
obkeyup — имя функции keyUp.
Результат способа 2 не отличается от результата пер
вого.
Способ 3. Настройка в JavaScript с использованием
событий.
В JavaScript поддерживается механизм управления
событиями, поэтому есть возможность настроить контроль
событий клавиатуры с помощью встроенного механизма
управления событиями.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="result">Íàæìèòå êëàâèøó íà êëàâèàòóðå</div>
<script>
function keyDown(event) {
72
Глава 4
document.getElementById("result").innerHTML =
"Íàæàòà: " + event.keyCode;
}
function keyUp(event) {
document.getElementById("result").innerHTML =
"Îòïóùåíà: " + event.keyCode;
}
document.body.addEventListener("keydown", keyDown);
document.body.addEventListener("keyup", keyUp);
</script>
</body>
</html>
Отличия приведенного кода от способа 2 в подходе к
настройке document.body.
document.body.addEventListener("keydown", keyDown);
document.body.addEventListener("keyup", keyUp);
В обеих строках с использованием встроенной функ
ции addEventListener для объекта document.body добав
ляется слушатель, который принимает два параметра: имя
слушателя («keydown», «keyup») и функцию для обработ
ки (keyDown, keyUp).
Результат способа 3 не отличается от результатов пер
вых двух способов.
Описанные способы позволяют разработчику создать
методы, которые будут контролировать нажатые клави
ши, остается только реализовать обработку нажатых кла
виш в зависимости от их кода.
4.2.
ВЗАИМОДЕЙСТВИЕ
С ИСПОЛЬЗОВАНИЕМ МЫШИ
Способы организации взаимодействия с использовани
ем мыши идентичны способам взаимодействия с исполь
зованием клавиатуры.
Способ 1. Настройка в HTML.
<html>
<head>
<meta charset="UTF-8">
Взаимодействие с пользователем
73
</head>
<body onmousedown="mouseDown(event);"
onmouseup="mouseUp(event);">
<div id="result" style="width: 100vw; height: 100vh">
Êëèêíèòå â ëþáîì ìåñòå â îêíå áðàóçåðà</div>
<script>
function mouseDown(event) {
document.getElementById("result").innerHTML =
"Íàæàòà: (" + event.clientX + ", " + event.clientY + ")";
}
function mouseUp(event) {
document.getElementById("result").innerHTML =
"Îòïóùåíà: (" + event.clientX + ", " + event.clientY + ")";
}
</script>
</body>
</html>
Приведенный код очень похож на код для способа 1 по
взаимодействию с клавиатурой. Здесь будут рассмотрены
только отличия.
<body onmousedown="mouseDown(event);"
onmouseup="mouseUp(event);">
Настраиваются события для нажатия клавиши «мы
ши» (onmousedown) и отпускания клавиши «мыши» (on
mouseup):
<div id="result" style="width: 100vw; height:
100vh">Êëèêíèòå â ëþáîì ìåñòå â îêíå áðàóçåðà</div>
В элементе div изменен текст и добавлен стиль (style).
В стиле указаны требования к ширине (width) и высоте
(height), в данном случае 100vw означает, что ширина долж
на быть 100% от ширины окна браузера, а 100vh означа
ет, что высота должна быть 100% от высоты окна браузе
ра, правда, с учетом полос прокрутки.
Функции mouseDown и mouseUp идентичны, отличия
только в тексте. Рассмотрим текст, устанавливаемый при
вызове mouseDown:
Íàæàòà: (" + event.clientX + ", " + event.clientY + ")"
74
Глава 4
В приведенном фрагменте кода используются другие,
в отличие от параграфа 4.1, поля объекта event: коорди
ната события по горизонтали (clientX) и координата по
вертикали (clientY) (рис. 4.2).
Следует обратить внимание, что координаты нажатия
и отпускания клавиш мыши могут быть разные.
Способ 2. Настройка в JavaScript.
Настройка контроля событий мыши в JavaScript иден
тична способу 2 контроля событий клавиатуры.
<html>
<head> <meta charset="UTF-8"> </head>
<body>
<div id="result" style="width: 100vw; height: 100vh">
Êëèêíèòå â ëþáîì ìåñòå â îêíå áðàóçåðà</div>
<script>
function mouseDown(event) {
document.getElementById("result").innerHTML =
"Íàæàòà: (" + event.clientX + ", " + event.clientY + ")";
}
function mouseUp(event) {
document.getElementById("result").innerHTML =
"Îòïóùåíà: (" + event.clientX + ", " + event.clientY + ")";
}
document.body.onmousedown = mouseDown;
document.body.onmouseup = mouseUp;
</script>
</body>
</html>
Рис. 4.2
Контроль событий мыши
Взаимодействие с пользователем
75
Способ 3. Настройка в JavaScript с использованием
событий.
Настройка контроля событий мыши в JavaScript с ис
пользованием событий идентична способу 3 контроля со
бытий клавиатуры.
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="result" style="width: 100vw; height: 100vh">
Êëèêíèòå â ëþáîì ìåñòå â îêíå áðàóçåðà</div>
<script>
function mouseDown(event) {
document.getElementById("result").innerHTML =
"Íàæàòà: (" + event.clientX + ", " + event.clientY + ")";
}
function mouseUp(event) {
document.getElementById("result").innerHTML =
"Îòïóùåíà: (" + event.clientX + ", " + event.clientY + ")";
}
document.body.addEventListener("mousedown",
mouseDown);
document.body.addEventListener("mouseup", mouseUp);
</script>
</body>
</html>
4.3.
РЕАЛИЗАЦИЯ МЕНЕДЖЕРА СОБЫТИЙ
Для взаимодействия с пользователем создадим менед
жер событий (eventsManager). С использованием программ,
приведенных в параграфе 4.1, можно выяснить клавиши,
на которые следует добавить события и соответствующим
образом их обработать. Например:
function onKeyDown(event) {
if(event.keyCode === 32) { // êëàâèøà «Ïðîáåë»
// Âûçîâ ôóíêöèè «âûñòðåëèòü»
}