向上和向下箭头不能与 JavaScript 中的 onkeydown 一起使用

Question

我正在构建一个简单的障碍游戏，我现在遇到的问题是我可以使用箭头键左右移动，但不能上下移动。我不明白为什么当上下具有与左右相同的逻辑时它们不起作用。我对自己开发东西还很陌生，所以如果很明显的话，请放轻松。:)

document.addEventListener("DOMContentLoaded", () => {

  // Grab the elements from the HTML

  const floppy = document.getElementById("floppyDisk");

  const gameBoard = document.querySelector(".gameBoard");

  let userScore = document.getElementById("userScore");

  let highscore = document.getElementById("highscore");

  // Set up variables to be used later

  let floppyPosX = 0;

  let floppyPosY = 0;

  let left = 20;

  let top = 190;

  // Use the arrows to move the floppy disk

  function moveFloppy(e) {

    if(e.keyCode == 39) {

      left += 2;

      floppy.style.left = floppyPosX + left + "px";

    }

    if(e.keyCode == 37) {

      left -= 2;

      floppy.style.left = floppyPosX + left + "px";

    }

    if(e.keycode == 38) {

      top += 2;

      floppy.style.top = floppyPosY + top + "px";

    }

    if(e.keycode == 40) {

      top -= 2;

      floppy.style.top = floppyPosY + top + "px";

    }

  }

  // Invoke the moveFloppy function

  document.onkeydown = moveFloppy;

  

  // Generate Obstacles

  

    // Function to move the obstacles

    // Set function to repeat

  // Call the function to generate the obstacles

})

Answer 1

您的问题是因为您使用的是已弃用（且定义不正确）KeyboardEvent.keyCode的属性而不是标准化code属性。将您的 JavaScript 更改为此，它应该可以工作：免责声明：小心，switch 因为它有 fallthrough，除非你使用break.left我还没有评估你/逻辑的正确性floppyPosX。我将您的if陈述更改为单一switch陈述。function moveFloppy(e) {    switch(e.code) {    case 'ArrowLeft':        left += 2;        floppy.style.left = floppyPosX + left + "px";        break;    case 'ArrowRight':        left -= 2;        floppy.style.left = floppyPosX + left + "px";        break;    case 'ArrowUp':        top += 2;        floppy.style.top = floppyPosY + top+ "px";        break;    case 'ArrowDown':        top -= 2;        floppy.style.top = floppyPosY + top + "px";        break;    default:        // TODO: Play a fart sound.        break;    }}document.addEventListener( 'keydown', moveFloppy );