基于手势识别的 AI 点球守门挑战

一：项目背景

有一次在和朋友玩足球游戏时，我发现一个很有意思的地方：明明游戏里最紧张的是点球和扑救，但真正操作起来，最后还是回到了按方向键、拨摇杆。那一刻我就在想，如果守门员的动作不是靠按键触发，而是直接由玩家自己的动作来控制，会不会更有参与感？

正好手头有一块支持手势识别和手部关键点检测的AI视觉手势与姿态传感器，于是我开始尝试把“人的动作”直接变成“游戏指令”。玩家不需要记复杂按键，也不需要拿手柄，只要张开手掌，根据足球飞行方向变化手掌朝向，屏幕里的守门员就会做出对应扑救。这样一来，点球游戏就不再只是“看着角色动”，而是变成了“我看到球飞过来，我自己做动作去扑”。也正是从这个想法出发，我做了这个基于手势识别的AI点球守门员小游戏。

二：快速体验扑球游戏

这个游戏的玩法很简单，玩家不需要键盘、鼠标或者游戏手柄，更不需要复杂的编程和需要算力的主控，先在电脑上打开传感器自带的软件（附件1）进行扑球手势学习，然后打开我的html链接网页后（附件2），与手势识别传感器连接，选择自己想玩的游戏模式，就可以体验点球带来的身临其境感觉。

2.1 认识扑球方向与手势对应关系

可以在进入游戏之前，可以先了解一下手掌方向分别对应守门员的扑球位置，当手掌向左倾斜，控制守门员扑向左侧；手掌保持竖直，控制守门员防守中路；手掌向右倾斜，则控制守门员扑向右侧。

选择一个想玩的模式之后，只需要将手放在手势传感器前，张开一只手掌，就可以参与点球守门挑战。左侧会显示传感器实时画面和手部关键点，玩家可以看到自己的手掌是否进入识别范围，以及当前手掌被判断为什么方向，左下方也会根据你的手掌方向实时反馈出对应的动作。

2.2 游戏效果展示

以下是整个游戏的体验过程，你可以下载文末附件，根据此视频的步骤快速体验基于手势的点球守门游戏。

三：如何实现基于手势识别的扑球游戏

3.1 什么是手势识别

手势识别就是让机器通过摄像头或者传感器，判断人当前做了什么手部动作。系统会先获取手部图像或关键点，再根据动作特征判断属于哪一种手势。

常见手势识别方式：

通过前面的比较可以看出，基于传感器和基于计算机视觉的手势识别方案各有局限。能不能有一款价格相对实惠，并且不需要在电脑上搭建视觉环境和算力要求的传感器，我注意到了SEN0670 AI 视觉手势与姿态传感器：https://www.dfrobot.com.cn/goods-4346.html 。

它属于基于计算机视觉的手势识别方案：通过摄像头获取画面，再利用 AI 视觉算法分析人的手部动作。不同的是，它把手势识别、手部关键点检测等功能集成到了传感器端，把两者的优势结合，因此电脑不需要再从零搭建一套视觉识别环境，直接本地AI处理,使用时更加方便。并且这个传感器自带三种识别模式，自定义手势识别（可支持8种），自定义姿态识别（可支持8种），固定手势识别（13种）, 学习者可轻松学习上手，并且在手势识别的过程中会输出手部关节点的坐标信息。

3.2 如何使用手势传感器学习手势

在开始设计游戏控制方式时，我首先考虑的是：怎样才能让玩家的手部动作和守门员的扑救方向建立一种比较自然的对应关系？

最开始，我考虑过分别学习多个手势，例如用不同手势分别对应左侧、中路和右侧三个扑救方向。这种方法实现起来比较直接，但实际体验后发现，玩家在观察足球运动方向的同时，还需要刻意切换不同手势，动作与真实扑救之间的对应关系并不自然。实际上，真实的扑球动作通常是张开手掌，区别主要在于手掌朝向和运动方向的不同。

因此，我将思路从“识别多个不同手势”调整为“识别一个基础手势，再分析这个手势的方向变化”。

我选择“张开手掌”作为基础手势后发现，即使将手掌向不同方向倾斜或摆动，模型仍然能够将其识别为同一种“张开手掌”手势。这样一来，就可以保持手势类别不变，再进一步分析手掌的朝向变化，将其映射为左扑、中扑或右扑三个不同的扑救方向。

在进一步了解 DFRobot SEN0670 AI视觉手势和姿态传感器后，我发现它不仅能够识别已经学习过的手势，还能够在识别过程中获取手掌各个关键点的坐标信息。这让我想到：与其学习多个不同的手势，不如利用这些手部关键点之间的坐标关系，计算手掌的倾斜方向，从而建立“手掌姿态—扑球方向”之间的对应关系。

因此，最终我选择“张开手掌”作为基础控制手势。当传感器识别到张开的手掌时，程序首先判断玩家已经进入有效控制状态；随后读取手掌关键点的坐标，通过分析关键点之间的位置关系判断手掌的倾斜方向，并将其进一步映射为左侧、中路或右侧三个扑救方向。这样设计后，玩家不需要学习和切换不同的控制手势，只需要像真实守门员一样张开手掌，并自然地向对应方向扑动，就可以完成游戏控制。

1. 首先使用下载SEN0670AI视觉手势和姿态传感器自带的官方软件（附件1），解压后双击.exe文件，打开之后电脑连接传感器，会自动识别设备端口号，然后打开串口即可看到画面。

2. 在模式中选择手势识别模式，在距离传感器大概50-60cm左右的距离摆出“张开手掌”的手势，左边画面会显示当前摆出手势的关节点和外框，没学习之前是绿色。

3. 摆出“张开手掌”手势后，点击学习按钮，保持手掌不动3秒左右，待手指关节点颜色由绿色变成其他颜色时，表示学习成功，然后可以自定义手势名称，命名为“Plam”，留作后续扑球识别的基础手势。下方的实时数据显示的各个关节点的坐标。

下面是具体的手势学习过程。也可以参考官方手势学习教程：https://wiki.dfrobot.com/sen0670/docs/23979

3.3 手势扑球游戏程序实现

完整的手势扑球游戏见文章最后附件2。可以查看HTML文件的源代码，如下图。

整个 AI 手势守门员程序代码可以分为接入层、感知层、判断层和表现层四个部分。

3.4 基于手势关键点实现扑球方向判断

在游戏中，当识别到“张开手掌”手势后，程序进一步读取 SEN0670AI视觉手势与姿势传感器输出的 21 个手部关键点。其中选取 0 号关键点作为手腕位置，12 号关键点作为中指指尖位置。

核心程序以“手腕 → 中指指尖”建立二维方向向量，并通过计算该向量的角度，随后根据角度范围将手掌方向映射为左侧、中路和右侧三个扑救指令。

// 获取12号关键点：中指指尖
const middleTip = p[12];

// 计算手腕指向中指指尖的二维方向向量
let dx = middleTip[0] - wrist[0];
let dy = -(middleTip[1] - wrist[1]);

程序将角度划分为三个区间：22°～70° 判断为右侧，70°～110° 判断为中路，110°～158° 判断为左侧。例如，当手掌基本竖直时，方向向量接近 90°，程序就会输出“中路”；当手掌向右倾斜时，角度逐渐接近 45°，则判断为“右侧”；向左倾斜时接近 135°，则判断为“左侧”。

/* 方向按键 去抖动处理：右 / 中间 / 左 */
// 手掌区域基准角度定义：右=45°，中间=90°，左=135°
const PALM_ZONE_CENTER = {right:45,center:90,left:135};

/**
 * 计算两个角度之间的最小差值（0~180度）
 * @param {number} a 角度1
 * @param {number} b 角度2
 * @returns {number} 最小角度差
 */
function angleDiff(a,b){
    // 取绝对值，对360取模，得到环形角度差值
    let d = Math.abs(a - b) % 360;
    // 如果差值大于180，取反向小角度（环形角度）
    return d > 180 ? 360 - d : d
}

/**
 * 根据输入角度判断当前手掌所在区域（右/中间/左）
 * 三个上半区宽区域，使用滞回防抖，保持长按方向稳定，防止区域来回跳变
 * @param {number} angle 当前检测到的角度
 * @param {string|null} lastZone 上一次判定的区域，用于滞回防抖
 * @returns {string|null} 区域标识：right右 / center中间 / left左 / null超出有效范围
 */
function palmZoneFromAngle(angle,lastZone=null){
    // ===== 滞回保持逻辑：如果上一个区域没变，放宽角度阈值，防止抖动跳区 =====
    // 上一次是【右区】，角度在18~78之间，继续判定为右区
    if(lastZone==='right'  && angle>=18  && angle<=78) return 'right';
    // 上一次是【中区】，角度在62~118之间，继续判定为中区
    if(lastZone==='center' && angle>=62  && angle<=118)return 'center';
    // 上一次是【左区】，角度在102~162之间，继续判定为左区
    if(lastZone==='left'   && angle>=102 && angle<=162)return 'left';

    // ===== 首次判定/区域切换：使用更窄的阈值，只有进入新区才切换状态 =====
    if(angle>=22  && angle<70)   return 'right';   // 右区：22° ~ 70°
    if(angle>=70  && angle<=110) return 'center';  // 中区：70° ~ 110°
    if(angle>110  && angle<=158) return 'left';    // 左区：110° ~ 158°

    // 不在任何有效区域内，返回null
    return null;
}

四：总结

通过这个项目，我对手势识别有了更直观的理解。SEN0670 AI视觉手势与姿态传感器不仅可以识别不同手势，还能输出手部关键点和姿态数据。通过进一步分析这些数据，我们可以把手掌方向、动作轨迹等信息转化为游戏中的控制指令。

在这个点球守门游戏中，我利用“张开手掌”作为基础手势，再通过 21 个手部关键点计算手掌方向，实现了左、中、右三个扑救方向的控制。

这也让我发现，手势识别不只是“识别手势”，更可以成为连接真实动作与虚拟世界的一种交互方式。

这次的点球守门游戏只是一个开始，你也可以利用 SEN0670 的手势识别、姿态识别和关键点数据，尝试把更多真实动作变成游戏中的控制方式，创造属于自己的互动游戏。