JavaScript游戏脚本中角色移动与碰撞检测的代码实现

作者：交互手记

时间：2026-10-30

深入解析在JavaScript 2D游戏脚本中如何实现平滑角色移动、按键状态管理、AABB轴对齐包围盒碰撞检测以及分轴位移响应阻挡的完整代码与工程实现。

文章目录

在基于JavaScript的网页游戏开发中，角色的平滑移动与精准碰撞检测是构建玩法机制的核心基石。实现这一目标的关键路径在于：通过高精度主循环解耦渲染与计算、利用按键状态哈希字典消除原生事件连击延迟、借助向量归一化消除斜向加速，并采用分轴AABB（轴对齐包围盒）算法完成重叠判定与阻挡回退。本文将从底层逻辑出发，逐层实现可直接运行的游戏物理脚本。

一、游戏主循环与输入状态采集机制

很多初学者在编写角色移动时，容易直接在 window.addEventListener('keydown', callback) 的回调函数中直接增加角色的坐标值。这种做法会导致两大典型缺陷：一是操作系统在初次触发按键到连续触发之间存在几百毫秒的输入停顿；二是按键触发频率受操作系统控制，无法与画面的实际渲染帧率同步，导致位移断续卡顿。

标准的解决方式是将“输入状态捕获”与“逻辑帧更新”彻底分离。我们定义一个全局的键位状态对象，在 keydown 与 keyup 事件发生时仅记录按键的布尔状态，实际的位移计算则统一交给基于 requestAnimationFrame 驱动的游戏主循环。

图1展示了游戏输入、物理计算、碰撞拦截与画面重绘在每帧中的单向流转关系

如下代码展示了输入监听器的标准初始化形式：

// 键盘输入监听容器
const keys = {};

window.addEventListener('keydown', (e) => {
  keys[e.code] = true;
});

window.addEventListener('keyup', (e) => {
  keys[e.code] = false;
});

二、角色平滑移动与向量归一化处理

在二维平面中，玩家可能同时按下两个方向键（例如“W”和“D”进行右上方向移动）。如果不加处理，角色沿X轴移动的速度为 speed，沿Y轴移动的速度也为 speed。根据勾股定理，合成合速度将达到 √(speed² + speed²) ≈ 1.414 × speed，即斜向移动速度快了约41.4%，这在动作游戏和射击游戏中会严重破坏平衡性。

为了保证所有方向的移动合速度恒定，我们需要对移动方向向量进行“归一化（Normalize）”操作。同时，为了避免高刷新率屏幕（如144Hz）与普通屏幕（60Hz）因帧率差异导致运动速度不一致，每次位移计算必须乘以两帧之间的时间差 deltaTime。

图2展示了角色移动向量由输入信号转化为确定性位移增量的逐步推导过程

对应在角色类中的向量计算方法如下：

function calculateMovement(keys, speed, deltaTime) {
  let moveX = 0;
  let moveY = 0;

  if (keys['KeyW'] || keys['ArrowUp']) moveY -= 1;
  if (keys['KeyS'] || keys['ArrowDown']) moveY += 1;
  if (keys['KeyA'] || keys['ArrowLeft']) moveX -= 1;
  if (keys['KeyD'] || keys['ArrowRight']) moveX += 1;

  // 向量模长计算
  const length = Math.hypot(moveX, moveY);
  if (length > 0) {
    // 归一化处理，防止斜向合速度膨胀
    moveX /= length;
    moveY /= length;
  }

  return {
    vx: moveX * speed * deltaTime,
    vy: moveY * speed * deltaTime
  };
}

三、AABB轴对齐包围盒碰撞检测原理

在2D网格或平面动作游戏中，绝大多数角色、障碍物和墙体都可以抽象为不发生旋转的矩形，这种碰撞体被称为AABB（Axis-Aligned Bounding Box，轴对齐包围盒）。因为矩形的边永远与坐标轴平行，判定两个矩形是否发生碰撞具有极高的数学效率。

判定准则遵循“分离轴定理”的简化形式：当且仅当两个矩形在水平X轴与垂直Y轴上的投影区间均存在重叠时，两者必然相交；只要在任意一个轴向上完全分离，两者就绝不可能相碰。

图3展示了AABB轴对齐包围盒在分离与重叠两种临界条件下的空间投影关系

在JavaScript中，判断两个AABB矩形是否重叠的纯函数可以精简表达为四条边界的交集判断：

function checkAABB(rectA, rectB) {
  return (
    rectA.x < rectB.x + rectB.width &&
    rectA.x + rectA.width > rectB.x &&
    rectA.y < rectB.y + rectB.height &&
    rectA.y + rectA.height > rectB.y
  );
}

四、碰撞响应：分轴移动与“贴墙滑动”实现

检测到碰撞只是第一步。在实际游戏中，如果仅仅写出“一旦碰撞就放弃位移”，玩家会遭遇极其糟糕的操作手感：

卡死现象：当角色斜向冲向一堵垂直墙壁时，由于X和Y方向同时被拦截，角色会直接停在原地，无法贴着墙壁向没有阻碍的垂直方向滑动。
穿模下陷：如果位移过大且直接修改坐标，角色可能嵌在障碍物内部，下一帧无论往哪个方向走都处于碰撞状态，从而被永远卡住。

彻底解决该问题的工业级标准方案是分轴移动与检测（Separated Axis Movement）。其核心逻辑分为两步：

X轴预测与更新：先只给角色增加 vx，立即与场景所有障碍物进行AABB碰撞检测。若检测到碰撞，则说明横向受阻，将角色X坐标紧贴障碍物边缘对齐（或回退至移动前的X坐标），并将 vx 归零。
Y轴预测与更新：在已校正好的X坐标基础上，再增加 vy，同样立即与场景障碍物进行碰撞检测。若发生碰撞，将角色Y坐标紧贴障碍物边缘对齐（或回退至移动前的Y坐标），并将 vy 归零。

通过这种X轴与Y轴解耦的处理机制，当角色斜切撞墙时，受阻的轴被阻挡截断，而无阻碍的轴依然能自由位移，从而自然呈现流畅的“贴墙滑动”物理反馈。

避坑提示：必须确保障碍物集合的遍历顺序或者回退策略具有一致性。如果地图障碍物较多，可以先根据角色当前所在的区块粗筛临近障碍物，再进行精准分轴计算。

五、完整可运行脚本整合与实现

下面是一个集成游戏主循环、按键管理、角色类、AABB碰撞检测及分轴贴墙滑动的完整单文件代码。你只需在浏览器中打开包含该脚本的HTML文件，即可直接使用键盘 WASD 或方向键操控角色测试碰撞体验：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 角色移动与碰撞演示</title>
  <style>
    body {
      margin: 0;
      background: #1e293b;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    canvas {
      background: #f8fafc;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="500"></canvas>

  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // 1. 输入捕获状态字典
    const keys = {};
    window.addEventListener('keydown', (e) => keys[e.code] = true);
    window.addEventListener('keyup', (e) => keys[e.code] = false);

    // 2. AABB 检测工具函数
    function checkAABB(a, b) {
      return (
        a.x < b.x + b.width &&
        a.x + a.width > b.x &&
        a.y < b.y + b.height &&
        a.y + a.height > b.y
      );
    }

    // 3. 场景障碍物定义
    const obstacles = [
      { x: 180, y: 120, width: 140, height: 100, color: '#64748B' },
      { x: 450, y: 180, width: 180, height: 80, color: '#64748B' },
      { x: 260, y: 320, width: 200, height: 60, color: '#64748B' }
    ];

    // 4. 角色对象模型
    const player = {
      x: 80,
      y: 80,
      width: 40,
      height: 40,
      speed: 240, // 移动速度 (像素/秒)
      color: '#6B88A6',

      update(dt) {
        // 计算原始按键输入
        let mx = 0;
        let my = 0;
        if (keys['KeyW'] || keys['ArrowUp']) my -= 1;
        if (keys['KeyS'] || keys['ArrowDown']) my += 1;
        if (keys['KeyA'] || keys['ArrowLeft']) mx -= 1;
        if (keys['KeyD'] || keys['ArrowRight']) mx += 1;

        // 向量归一化
        const len = Math.hypot(mx, my);
        if (len > 0) {
          mx /= len;
          my /= len;
        }

        const moveStepX = mx * this.speed * dt;
        const moveStepY = my * this.speed * dt;

        // --- 核心分轴移动与检测 ---
        // 第一阶段：更新 X 轴
        this.x += moveStepX;
        // 边界限制
        if (this.x < 0) this.x = 0;
        if (this.x + this.width > canvas.width) this.x = canvas.width - this.width;

        // 障碍物碰撞检测 (X轴)
        for (const obs of obstacles) {
          if (checkAABB(this, obs)) {
            if (moveStepX > 0) {
              // 往右撞墙，贴合左侧
              this.x = obs.x - this.width;
            } else if (moveStepX < 0) {
              // 往左撞墙，贴合右侧
              this.x = obs.x + obs.width;
            }
          }
        }

        // 第二阶段：更新 Y 轴
        this.y += moveStepY;
        // 边界限制
        if (this.y < 0) this.y = 0;
        if (this.y + this.height > canvas.height) this.y = canvas.height - this.height;

        // 障碍物碰撞检测 (Y轴)
        for (const obs of obstacles) {
          if (checkAABB(this, obs)) {
            if (moveStepY > 0) {
              // 往下撞墙，贴合上侧
              this.y = obs.y - this.height;
            } else if (moveStepY < 0) {
              // 往上撞墙，贴合下侧
              this.y = obs.y + obs.height;
            }
          }
        }
      },

      draw(context) {
        context.fillStyle = this.color;
        context.fillRect(this.x, this.y, this.width, this.height);
        // 绘制标识眼睛以直观区分朝向
        context.fillStyle = '#FFFFFF';
        context.fillRect(this.x + 10, this.y + 10, 6, 6);
        context.fillRect(this.x + 24, this.y + 10, 6, 6);
      }
    };

    // 5. 游戏主循环 (requestAnimationFrame)
    let lastTime = performance.now();

    function gameLoop(currentTime) {
      const deltaTime = (currentTime - lastTime) / 1000;
      lastTime = currentTime;

      // 限制单帧最大时间步长，避免切后台唤醒后大幅穿模
      const safeDt = Math.min(deltaTime, 0.1);

      // 更新物理状态
      player.update(safeDt);

      // 渲染画布
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制所有障碍物
      for (const obs of obstacles) {
        ctx.fillStyle = obs.color;
        ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
        ctx.strokeStyle = '#475569';
        ctx.strokeRect(obs.x, obs.y, obs.width, obs.height);
      }

      // 绘制角色
      player.draw(ctx);

      requestAnimationFrame(gameLoop);
    }

    requestAnimationFrame(gameLoop);
  </script>
</body>
</html>

六、系统架构全景与进阶问题处理

为了在更复杂的实际项目中运用这套体系，我们需要全面了解整个模块在游戏系统中的层级架构以及处理潜在边界异常的原则。

图4全面梳理了2D角色运动与碰撞检测脚本的完整技术模块与执行依赖

常见边界情况与应对方案

隧道效应（Tunneling）：当物体速度极快（例如高速子弹或瞬移技能），或者由于卡顿导致 deltaTime 激增时，单帧的移动步长可能大于障碍物的厚度。此时角色在上一帧处于墙前，下一帧已经越过墙后，AABB检测完全被跳过。
解决方案：对于高速物体，使用固定子步长更新（Sub-stepping），将单帧的大位移拆分为若干个小于障碍物尺寸的微小步长，逐步检测推进；或者使用线段与矩形相交的射线投射（Raycasting）。
大量实体的检测性能瓶颈：若场景中有 $N$ 个动态角色和 $M$ 个静态墙体，每帧如果进行暴力的 $O(N \times M)$ 次遍历，当对象增加到成百上千时会导致严重的掉帧。
解决方案：引入空间分区技术（例如基于网格的网格哈希 Grid Hashing 或四叉树 QuadTree），角色每帧仅需与同属于邻近网格内的障碍物进行精准AABB计算，复杂度可降至近似 $O(1)$。

通过本文介绍的按键状态采集、向量归一化、时间步长约束、AABB几何投影判定以及分轴碰撞响应体系，你已经掌握了2D游戏移动控制的核心工程实现。这套逻辑不仅适用于Canvas 2D原生开发，也是迁移至PixiJS、Phaser甚至3D物理引擎底层时的核心通用思维模型。