本文旨在解决 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 事件的重复触发延迟问题，从而创建更流畅的游戏体验。 记住，根据你的游戏需求调整定时器间隔和移动逻辑，以获得最佳的性能和效果。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
