在Javascript中有没有一种通过按键调用函数的方法？

是否有一种在按键时调用函数的方法。 我的目标是制作一个可移动的块，我想知道您是否可以调用该函数来移动

块。我也有一个问题，使人物可见，所以这将有助于帮助我

JavaScript

//variables
var player = document.getElementById('player');

var character = {
left: player.style.left + 1,
right: player.style.right + 1,
top: player.style.top + 1,
bottom: player.style.bottom + 1,
body: document.createElement('div'),
}


//functions
 function running() {
    console.log("Running");
    console.log("Program running");
    document.appendChild('div');
 }

 function loop() {
    running();
 }

function moveRight() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.right = right + 2 + "px";
}

function moveLeft() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.left = left + 2 + "px";
}

function moveup() {
    character.style.position = absolute;
    character.style.top = top + "px";
    character.style.right = right + 2 + "px";
}



//functions called
 loop();

HTML

角色扮演游戏

也许这可以引导你走向正确的方向。它是使用箭头键移动对象的链接

---

关于如何在javascript中处理密钥处理事件，有很多示例，这应该可以让您开始：

document.addEventListener('keydown', function(event) {
    switch (event.keyCode) {
        case 37:
            //left function
            break;
        case 38:
            //Up function
            break;
        case 39:
            //Right function
            break;
    }
});

编辑：

.keyCode

，

。其中
，
.charCode
是不推荐使用的属性：
因此，您应该使用
event.key

例如：

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "Up": // IE/Edge specific value
    case "ArrowUp":
      //Up function
      break;

    case "Left": // IE/Edge specific
    case "ArrowLeft":
      //left function
      break;

    case "Right": // IE/Edge specific
    case "ArrowRight":
      //Right function
      break;
   
    default:
      return; // No key event
  }

  event.preventDefault(); // Avoid key handling twice
}, true);

如果你在网上搜索如何做到这一点，有很多例子可以说明如何做到这一点……我试过了，但找不到太多，我得到的最好的是mobzilla
window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "Up": // IE/Edge specific value
    case "ArrowUp":
      //Up function
      break;

    case "Left": // IE/Edge specific
    case "ArrowLeft":
      //left function
      break;

    case "Right": // IE/Edge specific
    case "ArrowRight":
      //Right function
      break;
   
    default:
      return; // No key event
  }

  event.preventDefault(); // Avoid key handling twice
}, true);