JavaScript 键盘控制移动

guokanglun2024-12-05 8:32

如果你想通过 JavaScript 实现键盘控制对象（比如一个方块）的移动，下面是一个简单的示例，展示如何监听键盘事件并根据按下的键来移动一个元素。

HTML 和 CSS：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Keyboard Movement</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }

        #movableBox {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="movableBox"></div>

    <script>
        const box = document.getElementById('movableBox');
        let boxX = 0;
        let boxY = 0;
        const moveStep = 10; // 每次移动的步长

        // 监听键盘事件
        document.addEventListener('keydown', function (event) {
            switch (event.key) {
                case 'ArrowUp':
                    boxY -= moveStep;
                    break;
                case 'ArrowDown':
                    boxY += moveStep;
                    break;
                case 'ArrowLeft':
                    boxX -= moveStep;
                    break;
                case 'ArrowRight':
                    boxX += moveStep;
                    break;
            }

            // 更新方块的位置
            box.style.transform = `translate(${boxX}px, ${boxY}px)`;
        });
    </script>
</body>
</html>

说明：

#movableBox 是要移动的元素。
使用 keydown 事件监听器捕获键盘输入。
根据按下的箭头键（ArrowUp, ArrowDown, ArrowLeft, ArrowRight），更新方块的 X 或 Y 坐标。
每次按键时，方块会按照设定的步长（moveStep）移动。
使用 transform: translate() 来更新元素的位移。

这个代码实现了基本的键盘控制，你可以根据需要修改样式和步长，或者添加其他键的控制（如 WASD 控制）。