如何通过Keydown和Keyup事件实现对象斜向移动（JavaScript）

我完全懂你的困扰——想让对象同时响应多个按键实现斜向移动，但现在的代码只能处理单个方向，对吧？问题的核心在于你代码里的else if逻辑，它让程序每次只会执行一个分支，没法同时处理多个按键的状态。

问题分析 #

你的keysPressed函数里，用了一串else if：当同时按下"A"和"W"时，程序只会执行第一个匹配的分支（比如"A"的左移），然后就跳过了后面的"W"上移逻辑，自然没法实现斜向移动。另外还有个小问题：初始时newLeft和newTop可能没被赋值，会导致报错，而且如果body没有设置position属性，left和top样式是不会生效的。

修改后的代码 #

// 先给body设置初始定位，不然left/top样式无效
document.body.style.position = 'absolute';
document.body.style.left = '0px';
document.body.style.top = '0px';

window.addEventListener("keydown", keysPressed, false);
window.addEventListener("keyup", keysReleased, false);

var keys = [];

function keysPressed(e) {
  keys[e.keyCode] = true;
  
  // 获取当前位置，处理初始值可能为NaN的情况
  var currentLeft = parseInt(getComputedStyle(document.body).left) || 0;
  var currentTop = parseInt(getComputedStyle(document.body).top) || 0;
  
  // 初始化新位置为当前位置，没触发的方向保持不变
  var newLeft = currentLeft;
  var newTop = currentTop;

  // 用独立的if，而不是else if，这样多个条件可以同时满足
  if (keys[65]) { // A键：左移
    newLeft -= 10;
  }
  if (keys[68]) { // D键：右移
    newLeft += 10;
  }
  if (keys[87]) { // W键：上移
    newTop -= 10;
  }
  if (keys[83]) { // S键：下移
    newTop += 10;
  }

  // 更新元素位置
  document.body.style.left = newLeft + 'px';
  document.body.style.top = newTop + 'px';
  
  e.preventDefault();
}

function keysReleased(e) {
  keys[e.keyCode] = false;
}

关键改进点 #

• 替换else if为独立if：这样多个按键的状态会被同时检测，比如同时按"S"和"D"时，两个if分支都会执行，同时修改newTop和newLeft，实现斜向移动。
• 初始化新位置为当前位置：确保没有按下的方向不会改变位置，避免出现未定义的数值。
• 处理初始位置的NaN问题：用|| 0处理parseInt可能返回的NaN，保证初始位置正常。
• 设置body的定位属性：position: absolute是left和top样式生效的前提，不然浏览器会忽略这些属性。

工作原理简单解释 #

• keys数组用来记录每个按键的按下状态：按下时keys[keyCode] = true，松开时设为false。
• 每次keydown触发时，我们检查所有方向键的状态，分别更新X轴（左右）和Y轴（上下）的位置。因为是独立的if判断，多个按键的状态可以同时生效，最终计算出斜向的新位置。

内容的提问来源于stack exchange，提问作者Perezo123