如果你想通过 JavaScript 实现键盘控制对象（比如一个方块）的移动，下面是一个简单的示例，展示如何监听键盘事件并根据按下的键来移动一个元素。
HTML 和 CSS：
<!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 控制）。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
