Управлять игровым персонажем гораздо удобнее с помощью клавиатуры. Для реагирования на нажатия кнопок добавляются параметры onkeypress="..." или onkeyup="...", работающие также как onclick="...": при каждом нажатии клавиш клавиатуры будет выполняться заданный код. Но такой параметр можно назначить только сразу на весь документ, внутри тега <body>.
Создайте html-файл с простым кодом:
<body onkeypress="console.log(1)" onkeyup="console.log(2)"> </body>
Откройте файл в браузере, смотрите в консоль и нажимайте разные кнопки. При надавливании пишется единичка, при отпускании — двойка. Обычно хватает даже одного из этих способов, в дальнейшем выбирайте любой на свое усмотрение.
Наша следующая задача — понять, какая именно клавиша была нажата. Для этого изменим код следующим образом:
<body onkeypress="console.log( arguments[0].charCode )"> </body>
Теперь при нажатии клавиш в консоли будут появляться соответствующие числовые коды. Если выводится ноль, попробуйте arguments[0].keyCode
Давайте разберемся, как этот код работает. Начнем с arguments. Это массив, в котором хранятся посланные (в абсолютно любую функцию) данные. Например, если написать такую функцию:
function ПосланиеСМарса( текст ){
alert( текст );
console.log( arguments );
}
— то посылаемые данные внутри функции имеют название текст и их можно использовать по этому имени. Допустим, так:
ПосланиеСМарса( 'Сдавайтесь, примитивные создания!' );
Следите, что выводится в консоли. А теперь попробуйте так:
ПосланиеСМарса( 'Сдавайтесь!', 'Это розыгрыш' );
В консоли выводится массив (обычный, в квадратных скобках) с двумя элементами. Это и есть arguments. Как мы помним, из массива можно достать нужный элемент по номеру начиная с нуля. arguments[0] достает самую первую переменную из переданных данных.
Вообще, arguments используется редко. Но сейчас он был нужен, чтобы показать посылаемые данные. Когда вызывается код из onkeypress="..." или onkeyup="..." или onclick="..." и т.п., компьютер посылает дополнительную информацию о том, что произошло. Эта информация представлена ассоциативным массивом, в котором хранится переменная .charCode, где лежит код нажатой кнопки.
Мы помним, что перемешивать HTML-код с JS-программой — плохо, поэтому разделим код по файлам. Этот html-файлик сохраните на память, он больше не понадобится.
Возьмем файлы из урока Разделяем на файлы. HTML-файл не трогаем, а в js-программе добавим следующее:
window.onkeypress = keyProgram;
function keyProgram(e){
console.log( 'Это весь ассоциативный массив события:' );
console.log( e );
console.log( 'Код клавиши charCode и keyCode:' );
console.log( e.charCode );
console.log( e.keyCode );
}
Готово. При нажатии клавиш будет запускаться указанная в .onkeypress функция, в которую компьютер автоматически посылает ассоциативный массив. Мы даем этому массиву имя e и используем как захочется.
Самостоятельно добавьте в функцию keyProgram(e) такое условие: если нажата стрелка вверх, вызвать сообщение "Вверх!".
Создайте html-файл с простым кодом:
<body onkeypress="console.log(1)" onkeyup="console.log(2)"> </body>
Откройте файл в браузере, смотрите в консоль и нажимайте разные кнопки. При надавливании пишется единичка, при отпускании — двойка. Обычно хватает даже одного из этих способов, в дальнейшем выбирайте любой на свое усмотрение.
Наша следующая задача — понять, какая именно клавиша была нажата. Для этого изменим код следующим образом:
<body onkeypress="console.log( arguments[0].charCode )"> </body>
Теперь при нажатии клавиш в консоли будут появляться соответствующие числовые коды. Если выводится ноль, попробуйте arguments[0].keyCode
Давайте разберемся, как этот код работает. Начнем с arguments. Это массив, в котором хранятся посланные (в абсолютно любую функцию) данные. Например, если написать такую функцию:
function ПосланиеСМарса( текст ){
alert( текст );
console.log( arguments );
}
— то посылаемые данные внутри функции имеют название текст и их можно использовать по этому имени. Допустим, так:
ПосланиеСМарса( 'Сдавайтесь, примитивные создания!' );
Следите, что выводится в консоли. А теперь попробуйте так:
ПосланиеСМарса( 'Сдавайтесь!', 'Это розыгрыш' );
В консоли выводится массив (обычный, в квадратных скобках) с двумя элементами. Это и есть arguments. Как мы помним, из массива можно достать нужный элемент по номеру начиная с нуля. arguments[0] достает самую первую переменную из переданных данных.
Вообще, arguments используется редко. Но сейчас он был нужен, чтобы показать посылаемые данные. Когда вызывается код из onkeypress="..." или onkeyup="..." или onclick="..." и т.п., компьютер посылает дополнительную информацию о том, что произошло. Эта информация представлена ассоциативным массивом, в котором хранится переменная .charCode, где лежит код нажатой кнопки.
Мы помним, что перемешивать HTML-код с JS-программой — плохо, поэтому разделим код по файлам. Этот html-файлик сохраните на память, он больше не понадобится.
Возьмем файлы из урока Разделяем на файлы. HTML-файл не трогаем, а в js-программе добавим следующее:
window.onkeypress = keyProgram;
function keyProgram(e){
console.log( 'Это весь ассоциативный массив события:' );
console.log( e );
console.log( 'Код клавиши charCode и keyCode:' );
console.log( e.charCode );
console.log( e.keyCode );
}
Готово. При нажатии клавиш будет запускаться указанная в .onkeypress функция, в которую компьютер автоматически посылает ассоциативный массив. Мы даем этому массиву имя e и используем как захочется.
Самостоятельно добавьте в функцию keyProgram(e) такое условие: если нажата стрелка вверх, вызвать сообщение "Вверх!".
Именно и только стрелки никак не воспринимаются через onkeypress....
ОтветитьУдалить.onkeyup и e.keyCode для стрелок под Хромом только помогли почему-то ?
ОтветитьУдалитьПочему .onkeypress НЕ работает для стрелок??? а e.charCode ??? использую Chrome
ОтветитьУдалитьпочитал еще здесь
ОтветитьУдалитьhttp://www.bloggingdeveloper.com/post/KeyPress-KeyDown-KeyUp-The-Difference-Between-Javascript-Key-Events.aspx
http://stackoverflow.com/questions/2217553/detecting-arrow-key-press-in-ie-via-javascript-jquery?lq=1
http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript?rq=1
http://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown
http://stackoverflow.com/questions/14674414/javascript-up-arrow-keypress-not-firing
-"Откройте файл в браузере, смотрите в консоль и нажимайте разные кнопки."
ОтветитьУдалитьА какие кнопки нажимать?