如何实现按下双按键时让页面元素向指定方向移动？

开发页面方块移动功能时遇到问题：按下W/A/S/D单个按键时方块能正常移动，但想实现同时按下两个按键（比如W+A）让方块斜向移动，尝试用&&判断两个keyCode的if语句完全无效，无法确认x、y轴位移逻辑是否正常。

原代码核心问题 #

1. 单个keydown事件只能捕获一个按键，event.keyCode不可能同时等于两个值，所以event.keyCode == 87 && event.keyCode == 65永远不会触发
2. 按键状态检测逻辑错误，多按键同时按下需要持续跟踪当前所有按下的按键，而非单次事件判断
3. 重复绑定keyup事件，代码冗余

修复方案 #

改用按键状态集合跟踪当前按下的所有按键，配合定时器持续更新方块位置，天然支持多按键组合：

修改后的完整代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方块移动测试</title>
    <link rel="stylesheet" href="css.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
    <div id="keyboard">
        <div class="top-row"></div>
        <div class="button-key button" id="w-key">W</div>
        <div id="bottom-row">
            <div class="button-key button" id="a-key">A</div>
            <div class="button-key button" id="s-key">S</div>
            <div class="button-key button" id="d-key">D</div>
        </div>
    </div>
    <div class="square" id="square"></div>
    <div class="squareStartPos"></div>
    <script src="html.js"></script>
</body>
</html>

CSS

#square {
    width: 10px;
    height: 10px;
    background-color: black;
    left: 50%;
    bottom: 50%;
    position: absolute;
}

.squareStartPos {
    width: 8px;
    height: 8px;
    border: 1px solid black;
    left: 50%;
    bottom: 50%;
    position:absolute;
}

.button-key {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    margin: 5px;
    text-align: center;
    line-height: 50px;
    background-color: white;
    cursor: pointer;
}

JavaScript

// 记录当前按下的按键code集合
const pressedKeys = new Set();
// 方块位置变量
let squarePosX = 0;
let squarePosY = 0;
const square = document.getElementById('square');

// 更新按键高亮状态
function updateKeyHighlight() {
    ['w-key', 'a-key', 's-key', 'd-key'].forEach(keyId => {
        const keyEl = document.getElementById(keyId);
        const keyCode = keyId === 'w-key' ? 87 : 
                        keyId === 'a-key' ? 65 : 
                        keyId === 's-key' ? 83 : 68;
        keyEl.style.backgroundColor = pressedKeys.has(keyCode) ? 'yellow' : 'white';
    });
}

// 持续更新方块位置
function updateSquarePosition() {
    let dx = 0;
    let dy = 0;
    
    // 检测所有按下的按键，计算位移
    if (pressedKeys.has(87)) dy -= 5; // W 上移
    if (pressedKeys.has(83)) dy += 5; // S 下移
    if (pressedKeys.has(65)) dx -= 5; // A 左移
    if (pressedKeys.has(68)) dx += 5; // D 右移

    // 如果有位移，更新位置并执行动画
    if (dx !== 0 || dy !== 0) {
        squarePosX += dx;
        squarePosY += dy;
        anime({
            targets: '#square',
            translateX: squarePosX,
            translateY: squarePosY,
            duration: 50 // 动画时长适配持续移动
        });
    }
}

// 初始化事件监听
function initControls() {
    document.addEventListener('keydown', (event) => {
        pressedKeys.add(event.keyCode);
        updateKeyHighlight();
    });

    document.addEventListener('keyup', (event) => {
        pressedKeys.delete(event.keyCode);
        updateKeyHighlight();
    });

    // 每50ms更新一次位置，实现流畅移动
    setInterval(updateSquarePosition, 50);
}

// 页面加载后初始化
window.addEventListener('load', initControls);

关键修改说明 #

1. 按键状态跟踪：用Set集合pressedKeys记录当前按下的所有按键code，完美解决多按键同时检测的问题
2. 持续位置更新：通过setInterval定时检查按键状态，计算位移并更新方块位置，自然支持斜向移动
3. 代码优化：合并keyup事件处理，统一更新按键高亮逻辑，消除冗余代码
4. 动画适配：调整anime.js的动画时长，适配持续移动的流畅性

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