14 февр. 2015 г.

Удобство управления

Управлять игровым персонажем гораздо удобнее с помощью клавиатуры. Для реагирования на нажатия кнопок добавляются параметры 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) такое условие: если нажата стрелка вверх, вызвать сообщение "Вверх!".

Следующий урок >>

5 комментариев:

  1. Именно и только стрелки никак не воспринимаются через onkeypress....

    ОтветитьУдалить
  2. .onkeyup и e.keyCode для стрелок под Хромом только помогли почему-то ?

    ОтветитьУдалить
  3. Почему .onkeypress НЕ работает для стрелок??? а e.charCode ??? использую Chrome

    ОтветитьУдалить
  4. почитал еще здесь
    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

    ОтветитьУдалить
  5. -"Откройте файл в браузере, смотрите в консоль и нажимайте разные кнопки."
    А какие кнопки нажимать?

    ОтветитьУдалить