js实现按键

监听键盘事件

使用 addEventListener 监听键盘事件，常见的事件类型包括 keydown、keyup 和 keypress。keydown 在按键按下时触发，keyup 在按键释放时触发，keypress 在按键按下并产生字符时触发。

document.addEventListener('keydown', function(event) {
  console.log('按键按下:', event.key);
});

document.addEventListener('keyup', function(event) {
  console.log('按键释放:', event.key);
});

获取按键信息

事件对象 event 包含按键的详细信息，如 key、code、keyCode（已废弃）。key 返回按键的字符串表示（如 "Enter"、"a"），code 返回物理按键的代码（如 "KeyA"、"Space"）。

document.addEventListener('keydown', function(event) {
  console.log('按键:', event.key);
  console.log('物理按键代码:', event.code);
});

检测组合键

通过检查 event.ctrlKey、event.shiftKey、event.altKey 和 event.metaKey 可以检测是否按下了修饰键（如 Ctrl、Shift 等）。

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault(); // 阻止默认行为
    console.log('Ctrl + S 按下');
  }
});

阻止默认行为

某些按键会触发浏览器的默认行为（如 F5 刷新页面），调用 event.preventDefault() 可以阻止这些行为。

document.addEventListener('keydown', function(event) {
  if (event.key === 'F5') {
    event.preventDefault();
    console.log('阻止了页面刷新');
  }
});

游戏中的按键处理

在游戏开发中，通常需要持续检测按键状态。可以通过记录按键的按下和释放状态来实现。

const keys = {};

document.addEventListener('keydown', function(event) {
  keys[event.key] = true;
});

document.addEventListener('keyup', function(event) {
  keys[event.key] = false;
});

// 在游戏循环中检测按键状态
function gameLoop() {
  if (keys['ArrowUp']) {
    console.log('向上移动');
  }
  requestAnimationFrame(gameLoop);
}
gameLoop();