Помогите с клавишами

[ctpz]

Не получается выполнять действия с данными событиями. Можете подсказать, как минимальными средствами определить нажатую или зажатую кнопку.

[Veseloff]

Ссылку в студию.

[ctpz]

Это разрабатывается на компьютере. Есть вариант с onkeypress/onkeydown. Однако я не могу указать при каком коде клавиши передается true.

Вот код (но он почему-то нерабочий):

document.body.onkeypress = function(e) {
e = e || event;
var chr = getChar(e);
if (chr == null){return};
if (chr == 33){
space();
}
}

function getChar(event) {
if (event.which == null) {
if (event.keyCode < 32) return null;
return String.fromCharCode(event.keyCode)
}
if (event.which!=0 && event.charCode!=0) {
if (event.which < 32) return null;
return String.fromCharCode(event.which)
}
return null;
}

function space(){

}

Edited May 28, 2012 by ctpz

[Great Rash]

http://jsfiddle.net/RsTPH/1/

[ctpz]

Great Rash, не подскажешь, как подружить вторую часть с if-ом?

[Great Rash]

Опишите условие подробней. Есть подозрение, что .fromCharCode() тут вообще не нужен.

[ctpz]

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

if(pressKeyCode() == 65){
goLeft();
}

[Great Rash]

var keys = {
  LEFT: false,
  RIGHT: false,
  UP: false,
  DOWN: false,
  SPACE: false,
  ENTER: false
};

function handleKeydown(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;

  if (key == 13) {
    keys.ENTER = true;
  }

  if (key == 32) {
    keys.SPACE = true;
  }

  if (key == 37) {
    keys.LEFT = true;
  }

  if (key == 38) {
    keys.UP = true;
  }

  if (key == 39) {
    keys.RIGHT = true;
  }

  if (key == 40) {
    keys.DOWN = true;
  }
}

function handleKeyup(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;

  if (key == 13) {
    keys.ENTER = false;
  }

  if (key == 32) {
    keys.SPACE = false;
  }

  if (key == 37) {
    keys.LEFT = false;
  }

  if (key == 38) {
    keys.UP = false;
  }

  if (key == 39) {
    keys.RIGHT = false;
  }

  if (key == 40) {
    keys.DOWN = false;
  }
}

document.onkeydown = function(e) {
  handleKeydown(e);

  if (keys.LEFT) console.log('left');
  if (keys.UP) console.log('up');
  if (keys.RIGHT) console.log('right');
  if (keys.DOWN) console.log('down');
  if (keys.ENTER) console.log('enter');
  if (keys.SPACE) console.log('space');
}

document.onkeyup = function(e) {
  handleKeyup(e);
}

[ctpz]

огромное спасибо

[nerv]

Great Rash, switch не? )

[Great Rash]

Не, switch дает выбрать только одну клавишу. А если я наискосок побежать хочу? Можно конечно убрать break, но тогда клавиши придется расставлять в порядке возрастания. Хотя, в принципе, можно и switch. По тексту чуток короче получится.

[s0rr0w]

var keys = {
  LEFT: false,
  RIGHT: false,
  UP: false,
  DOWN: false,
  SPACE: false,
  ENTER: false
};

function handleKey(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;

  switch (key){
    case 13: keys.ENTER = true; break;
    case 32: keys.SPACE = true; break;
    case 37: keys.LEFT = true; break;
    case 38: keys.UP = true; break;
    case 39: keys.RIGHT = true; break;
    case 40: keys.DOWN = true; break;
  }

  console.debug( keys );
}

document.onkeydown = handleKey;
document.onkeyup = handleKey;

Улучшим чуток

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

Хотя, нет, программно таки можно.

[Great Rash]

Это ухудшение. В таком случае нельзя обработать нажатие более одной кнопки одновременно. Например если это платформер и мне надо одновременно бежать и прыгать, или, например бежать наискосок. Я могу зажать одну кнопку и, не отпуская, нажать еще одну. Так же, я могу отпустить какую-то кнопку, но оставить нажатой другую.

Поэтому два независимых обработчика: на нажатие, на отпускание.

[s0rr0w]

Это ухудшение. В таком случае нельзя обработать нажатие более одной кнопки одновременно. Например если это платформер и мне надо одновременно бежать и прыгать, или, например бежать наискосок. Я могу зажать одну кнопку и, не отпуская, нажать еще одну. Так же, я могу отпустить какую-то кнопку, но оставить нажатой другую.

Поэтому два независимых обработчика: на нажатие, на отпускание.

Мое предыдущее решение неправильное было. Забыл состояние менять.

var keys = {
  LEFT: false,
  RIGHT: false,
  UP: false,
  DOWN: false,
  SPACE: false,
  ENTER: false
};

function handleKey(e) {
  e = e || window.event;
  var key = e.which || e.keyCode;

  var state = (e.type == "keydown");

  switch (key){
    case 13: keys.ENTER = state; break;
    case 32: keys.SPACE = state; break;
    case 37: keys.LEFT = state; break;
    case 38: keys.UP = state; break;
    case 39: keys.RIGHT = state; break;
    case 40: keys.DOWN = state; break;
  }

  console.debug( keys );
}

document.onkeydown = handleKey;
document.onkeyup = handleKey;

На каждое нажатие кнопки срабатывает свое собственное событие. keyCode не массив и не может хранить более одной клавиши. Поэтому break тут работает как положено.

Запусти код и посмотри, что пишется в консоли

Object { LEFT=true, RIGHT=false, UP=false, more...}
Object { LEFT=true, RIGHT=false, UP=true, more...}
Object { LEFT=true, RIGHT=true, UP=true, more...}
Object { LEFT=true, RIGHT=false, UP=true, more...}
Object { LEFT=true, RIGHT=false, UP=false, more...}
Object { LEFT=false, RIGHT=false, UP=false, more...}

Обрати внимание на третью строку, там LEFT=true, RIGHT=true, UP=true

Edited May 29, 2012 by s0rr0w

[nerv]

В таком случае нельзя обработать нажатие более одной кнопки одновременно. Например если это платформер и мне надо одновременно бежать и прыгать, или, например бежать наискосок. Я могу зажать одну кнопку и, не отпуская, нажать еще одну. Так же, я могу отпустить какую-то кнопку, но оставить нажатой другую.

Поэтому два независимых обработчика: на нажатие, на отпускание.

ну да. Хотя для простых игр вроде этой я использовал один.

[Great Rash]

2s0rr0w: да такой код рабочий. Правда менее понятен при чтении. А вообще согласен, switch тут тоже подойдет.

[nerv]

А вообще согласен, switch тут тоже подойдет.

Я бы сказал, что в данном случае он является предпочтительным.

Насчет стиля, пишу так:

switch( key ) {
    case 13:
        keys.ENTER = state;
        break;
    case 32:
        keys.SPACE = state;
        break;
    case 37:
        keys.LEFT = state;
        break;
    case 38:
        keys.UP = state;
        break;
    case 39:
       keys.RIGHT = state;
       break;
    case 40:
       keys.DOWN = state;
       break;
}

строчек больше, но воспринимаются они лучше (для меня).

Edited May 29, 2012 by nerv

[Great Rash]

Я бы сказал, что в данном случае он является предпочтительным.

Ну на счет предпочтительности я бы поспорил.

[s0rr0w]

2s0rr0w: да такой код рабочий. Правда менее понятен при чтении. А вообще согласен, switch тут тоже подойдет.

Ну, кто к чему привык. Тут уже от стилистики зависит. Преимущество моего подхода в том, что он написан один раз, а не два. При добавлении новых клавиш не потребуется его два раза записывать. Хотя опять же, это все очень субъективно. Идеальных решений не существует, бывают только компромисы и нюансы.

строчек больше, но воспринимаются они лучше (для меня).

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

[Great Rash]

Я скорей про завороты типа:

var state = (e.type == "keydown");

[s0rr0w]

Я скорей про завороты типа:

var state = (e.type == "keydown");

Я к такому привычный, мне глаз не режет.

[Great Rash]

Я конечно понимаю, что правила существуют для того чтобы их нарушать, но во всех книгах по программированию учат, что код надо писать как можно понятнее. Даже ценой компактности. Это облегчит его понимание в дальнейшем (когда откроешь свой код года через 2 или когда другой человек будет разбираться).

Так что свитч конечно хорошо, но вариант сорроу не самый наглядный.

[s0rr0w]

Я конечно понимаю, что правила существуют для того чтобы их нарушать, но во всех книгах по программированию учат, что код надо писать как можно понятнее. Даже ценой компактности. Это облегчит его понимание в дальнейшем (когда откроешь свой код года через 2 или когда другой человек будет разбираться).

Так что свитч конечно хорошо, но вариант сорроу не самый наглядный.

Доля правды есть в словах.