使用 JavaScript 实现平滑键盘控制的游戏角色移动-js教程-PHP中文网

使用 JavaScript 实现平滑键盘控制的游戏角色移动

碧海醫心

发布： 2025-07-12 17:22:10

原创

843人浏览过

使用 javascript 实现平滑键盘控制的游戏角色移动

本文旨在解决 JavaScript 游戏中 WASD 键盘控制角色移动时出现的“先小步后平滑移动”的问题。通过使用 setInterval 函数和记录按键状态，实现按键按下时持续移动，抬起时停止移动的效果，从而创建更流畅的游戏体验。

问题分析

在传统的 keydown 事件监听中，当用户按下键盘按键时，会触发一次事件。如果用户持续按住按键，浏览器会重复触发 keydown 事件，但这个重复触发是有延迟的，导致角色移动出现“先小步后平滑移动”的现象。

解决方案：使用 setInterval 实现持续移动

为了解决这个问题，我们可以使用 setInterval 函数。当用户按下按键时，启动一个定时器，定时器会以固定的时间间隔执行移动角色的函数。当用户抬起按键时，清除定时器，停止角色移动。

核心思路：

立即学习“Java免费学习笔记（深入）”；

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

176

查看详情

记录按键状态： 使用一个对象 (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 对象中的按键状态来更新角色的位置。