如何輸入鍵盤事件

Question

我正在研究這個 UFO 項目，現在我想使用箭頭鍵向上、向下、向左、向右移動這個 UFO。 我不能這樣做

function Up() {
    if ((pos) >=10) {
      pos -= 5;
      document.querySelector
      document.querySelector(`img`).style.top = pos + "px";
    }
  }

  function Down() {
    if ((pos) <=870) {
      pos += 5;
      document.querySelector(`img`).style.top = pos + "px";
    }
  }
  function Left() {
    if ((posLeft) >= 10) {
      posLeft -= 5;
      document.querySelector(`img`).style.left = posLeft + "px";
    }
  }
  function Right() {
    if ((posLeft) <= 1880) {
      posLeft += 5;
      document.querySelector(`img`).style.left = posLeft + "px";
    }
  }

Answer 1

要添加鍵盤事件處理程序，您可以在函數聲明之后執行以下操作：

document.addEventListener("keydown", (e) => {
  switch(e.code){
    case "ArrowUp":
      Up();
      break;
    case "ArrowLeft":
      Left();
      break;
    case "ArrowRight":
      Right();
      break;
    case "ArrowDown":
      Down();
      break;
  }
})

許多在線教程或文章會將您指向KeyboardEvent.keyCode ，但它已被棄用，因此不應使用。

Answer 2

為了防止最初按住某個鍵時出現煩人的延遲，您可以將當前鍵添加到數組中，並在完成后將其刪除。 這是你可以做到的......

// Array of currently pressed keys
const keys = [];

// Attempt to add pressed key
document.addEventListener("keydown", (e) => {
  if (!keys.includes(e.key)) { // If key isn't already pressed
    keys.push(e.key); // Add key to array
  }
});

// Attempt to remove pressed key
document.addEventListener("keyup", (e) => {
  if (keys.includes(e.key)) { // If key is already pressed
    keys.splice(keys.indexOf(e.key), 1); // Remove key from array
  }
});

// Move UFO based on current pressed keys every 100ms
setInterval(() => {   
  if (keys.includes("w")) { // If the 'keys' array contains 'w', then move up
    // Move up!
    Up();
  }
  if (keys.includes("s")) {
    // Move down!
    Down();
  }
  if (keys.includes("a")) {
    // Move left!
    Left();
  }
  if (keys.includes("d")) {
    // Move right!
    Right();
  }
}, 100);