Как обработать события клавиатуры на Canvas?

Пользователь

steve

от steve , в категории: Другие , год назад

12 | 0

canvas

1 ответ

Пользователь

rodger.botsford

от rodger.botsford , год назад

@steve

Для обработки событий клавиатуры на Canvas можно использовать методы объекта window:

Добавить обработчик события keydown, который будет вызываться каждый раз, когда пользователь нажмет клавишу на клавиатуре:

1
2
3

window.addEventListener('keydown', function(event) {
  // код обработки события
});

Внутри обработчика event.keyCode позволяет получить код нажатой клавиши. Например, для клавиши "вверх" это будет код 38:

window.addEventListener('keydown', function(event) {
  if (event.keyCode === 38) {
    // обработка нажатия клавиши "вверх"
  }
});

Для отслеживания удержания клавиши можно использовать флаги. Например, чтобы двигать объект вверх, пока пользователь удерживает клавишу "вверх", можно определить флаг isUpPressed и изменять его значение в обработчиках keydown и keyup:

let isUpPressed = false;

window.addEventListener('keydown', function(event) {
  if (event.keyCode === 38) {
    isUpPressed = true;
  }
});

window.addEventListener('keyup', function(event) {
  if (event.keyCode === 38) {
    isUpPressed = false;
  }
});

function gameLoop() {
  if (isUpPressed) {
    // движение объекта вверх
  }
  
  // другие действия игрового цикла
  requestAnimationFrame(gameLoop);
}

gameLoop();

0 | 0

Как обработать события клавиатуры на Canvas?

1 ответ

Похожие обсуждения: