本文旨在解决 JavaScript 游戏中 WASD 键盘控制角色移动时出现的“先小步后平滑移动”的问题。通过使用 setInterval 函数和记录按键状态，实现按键按下时持续移动，抬起时停止移动的效果，从而创建更流畅的游戏体验。
问题分析
在传统的 keydown 事件监听中，当用户按下键盘按键时，会触发一次事件。如果用户持续按住按键，浏览器会重复触发 keydown 事件，但这个重复触发是有延迟的，导致角色移动出现“先小步后平滑移动”的现象。
解决方案：使用 setInterval 实现持续移动
为了解决这个问题，我们可以使用 setInterval 函数。当用户按下按键时，启动一个定时器，定时器会以固定的时间间隔执行移动角色的函数。当用户抬起按键时，清除定时器，停止角色移动。
核心思路：
立即学习“Java免费学习笔记（深入）”；
- 记录按键状态： 使用一个对象 (keyPressed) 记录当前按下的按键。
- 启动定时器： 在 keydown 事件处理函数中，检查是否已经有定时器在运行。如果没有，则启动一个定时器 (playerMoving)，定时器以固定的时间间隔执行移动角色的函数。
- 移动角色： 在定时器中执行移动角色的函数。这个函数应该根据当前按下的按键来更新角色的位置。
- 停止定时器： 在 keyup 事件处理函数中，清除定时器，停止角色移动。
示例代码：
var playerMoving;
var keyPressed = {};
function keyDown(e) {
// 检查按键是否发生变化，如果变化，则清除之前的定时器
if (e.which !== keyPressed[e.key]) {
if (playerMoving) {
clearInterval(playerMoving);
playerMoving = null;
}
}
// 记录当前按下的按键
keyPressed[e.key] = e.which;
// 如果没有定时器在运行，则启动定时器
if (!playerMoving) {
playerMoving = setInterval(() => {
// 在这里执行移动角色的逻辑
// 例如：根据 keyPressed 对象中的按键状态来更新角色的位置
// document.body.innerHTML += "+"; // 示例：添加 "+" 符号，模拟移动
movePlayer(); // 调用自定义的移动函数
}, 10); // 设置定时器间隔为 10 毫秒
}
}
function keyUp(e) {
// 清除定时器，停止角色移动
clearInterval(playerMoving);
playerMoving = null;
delete keyPressed[e.key]; // 移除按键记录
}
function movePlayer() {
// 假设 Player 是你的游戏角色元素
var Player = document.getElementById("Player");
const SpeedX = 35;
const SpeedY = 20;
var x = parseInt(getComputedStyle(Player).marginLeft);
var y = parseInt(getComputedStyle(Player).marginTop);
if (keyPressed['w']) {
y -= SpeedY;
}
if (keyPressed['s']) {
y += SpeedY;
}
if (keyPressed['a']) {
x -= SpeedX;
}
if (keyPressed['d']) {
x += SpeedX;
}
Player.style.marginLeft = x + "px";
Player.style.marginTop = y + "px";
}
window.addEventListener("keydown", keyDown);
window.addEventListener("keyup", keyUp);代码解释：
- playerMoving: 用于存储定时器的 ID。
- keyPressed: 用于存储当前按下的按键，键为按键的 key 值，值为按键的 which 值。
- keyDown(e): keydown 事件处理函数。
- 首先，检查按键是否发生变化，如果发生变化，则清除之前的定时器。
- 然后，记录当前按下的按键。
- 最后，如果当前没有定时器在运行，则启动一个定时器，定时器以 10 毫秒的间隔执行移动角色的逻辑。
- keyUp(e): keyup 事件处理函数。清除定时器，停止角色移动。
- movePlayer(): 移动角色的函数。你需要根据你的游戏逻辑来实现这个函数。在这个例子中，我们假设 Player 是你的游戏角色元素，并根据按下的 WASD 按键来更新 Player 元素的位置。
注意事项：
- 定时器间隔： 定时器间隔越小，角色移动越平滑，但会消耗更多的 CPU 资源。需要根据实际情况调整定时器间隔。
- 性能优化： 如果你的游戏场景比较复杂，移动角色的逻辑比较耗时，可能会导致性能问题。可以考虑使用 requestAnimationFrame 来优化性能。
- 边界处理： 在 movePlayer() 函数中，需要对角色的位置进行边界处理，防止角色超出游戏边界。
- 组合按键： 上面的代码只处理了单个按键的情况。如果需要支持组合按键（例如同时按下 W 和 D），需要在 movePlayer() 函数中根据 keyPressed 对象中的按键状态来更新角色的位置。
总结
通过使用 setInterval 函数和记录按键状态，我们可以实现平滑键盘控制的游戏角色移动。这种方法可以有效地解决 keydown 事件的重复触发延迟问题，从而创建更流畅的游戏体验。 记住，根据你的游戏需求调整定时器间隔和移动逻辑，以获得最佳的性能和效果。
