本文旨在解决使用 JavaScript 开发游戏时，通过 WASD 键控制角色移动时出现的“初始移动缓慢，之后快速重复”的问题。我们将探讨如何使用 setInterval 函数来创建一个连续移动的循环，并优化键盘事件处理，从而实现平滑流畅的角色移动效果。
在开发基于键盘控制的 JavaScript 游戏时，经常会遇到按键重复延迟的问题。用户按下 W、A、S、D 等方向键后，角色通常会先小步移动一下，然后才开始流畅地连续移动。这是因为浏览器的键盘事件机制导致的。本文将介绍一种使用 setInterval 函数来解决此问题，实现平滑的角色移动的方法。
问题分析
传统的 keydown 事件监听方式，依赖于浏览器默认的按键重复行为。浏览器在检测到按键持续按下时，会先触发一次 keydown 事件，然后经过一段延迟后，开始重复触发 keydown 事件。这个延迟就是导致初始移动缓慢的原因。
解决方案：使用 setInterval
为了解决这个问题，我们可以使用 setInterval 函数来创建一个定时器，每隔一段时间就执行一次角色移动的逻辑。通过这种方式，我们可以绕过浏览器默认的按键重复行为，实现更精细的控制。
立即学习“Java免费学习笔记（深入）”；
实现步骤：
-
记录按键状态： 使用一个对象 keysPressed 来记录当前按下的按键。在 keydown 事件中，将对应的按键设置为 true；在 keyup 事件中，将对应的按键设置为 false。
var keysPressed = {}; document.addEventListener("keydown", (e) => { keysPressed[e.key] = true; }); document.addEventListener('keyup', (event) => { delete keysPressed[event.key]; }); -
创建移动函数： 定义一个函数 movePlayer()，该函数根据 keysPressed 对象中的按键状态来更新角色的位置。
function movePlayer() { if (keysPressed['w']) { // 向上移动的逻辑 y -= SpeedY; Player.style.marginTop = y + "px"; } if (keysPressed['a']) { // 向左移动的逻辑 x -= SpeedX; Player.style.marginLeft = x + "px"; } if (keysPressed['s']) { // 向下移动的逻辑 y += SpeedY; Player.style.marginTop = y + "px"; } if (keysPressed['d']) { // 向右移动的逻辑 x += SpeedX; Player.style.marginLeft = x + "px"; } } -
使用 setInterval 启动移动循环： 在 keydown 事件中，当检测到方向键被按下时，启动 setInterval 定时器，每隔一段时间调用 movePlayer() 函数。在 keyup 事件中，当检测到方向键被释放时，清除 setInterval 定时器。
var playerMoving; document.addEventListener("keydown", (e) => { if (!playerMoving && (e.key === 'w' || e.key === 'a' || e.key === 's' || e.key === 'd')) { playerMoving = setInterval(movePlayer, 10); // 每 10 毫秒移动一次 } }); document.addEventListener('keyup', (event) => { if (event.key === 'w' || event.key === 'a' || event.key === 's' || event.key === 'd') { clearInterval(playerMoving); playerMoving = null; } });
完整示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Smooth Movement</title>
<style>
#Player {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="Player"></div>
<script>
var Player = document.getElementById("Player");
const SpeedX = 5;
const SpeedY = 5;
var x = parseInt(getComputedStyle(Player).marginLeft);
var y = parseInt(getComputedStyle(Player).marginTop);
var keysPressed = {};
var playerMoving;
function movePlayer() {
if (keysPressed['w']) {
y -= SpeedY;
Player.style.marginTop = y + "px";
}
if (keysPressed['a']) {
x -= SpeedX;
Player.style.marginLeft = x + "px";
}
if (keysPressed['s']) {
y += SpeedY;
Player.style.marginTop = y + "px";
}
if (keysPressed['d']) {
x += SpeedX;
Player.style.marginLeft = x + "px";
}
}
document.addEventListener("keydown", (e) => {
keysPressed[e.key] = true;
if (!playerMoving && (e.key === 'w' || e.key === 'a' || e.key === 's' || e.key === 'd')) {
playerMoving = setInterval(movePlayer, 10);
}
});
document.addEventListener('keyup', (event) => {
delete keysPressed[event.key];
if (event.key === 'w' || event.key === 'a' || event.key === 's' || event.key === 'd') {
clearInterval(playerMoving);
playerMoving = null;
}
});
</script>
</body>
</html>注意事项
- 性能优化： setInterval 定时器会持续执行，即使角色没有移动。为了优化性能，可以在 movePlayer() 函数中判断是否需要移动，如果不需要移动，则清除定时器。
- 多按键同时按下： 上述代码已经支持多按键同时按下，实现斜向移动。
- 边界检测： 在 movePlayer() 函数中，需要进行边界检测，防止角色超出屏幕范围。
- 可变的速度： 可以根据游戏的需求，调整 SpeedX 和 SpeedY 的值，实现不同的移动速度。
- 帧率： setInterval 的第二个参数（时间间隔）决定了移动的帧率。较小的值会使移动更平滑，但会占用更多的 CPU 资源。根据实际情况调整该值，找到一个平衡点。
总结
通过使用 setInterval 函数和优化键盘事件处理，我们可以有效地解决 JavaScript 游戏中键盘重复延迟的问题，实现平滑流畅的角色移动效果。这种方法不仅可以应用于简单的 2D 游戏，还可以扩展到更复杂的游戏场景中。记住，性能优化和边界检测是保证游戏体验的关键。
