JavaScript/TypeScript游戏摇杆圆形区域方向检测方案咨询

核心思路 #

通过触摸点与摇杆中心的夹角划分圆形方向区域，结合内外圆边界判断，实现符合需求的四向扇形触发区域。核心步骤：

• 校验触摸点是否在有效区域（内圆死区外、外圆边界内）
• 计算触摸点相对中心的夹角
• 根据夹角区间匹配对应的移动方向

完整实现代码 #

private getPressedDirection(relX: number, relY: number): number {
    let dir = 0;
    const outerRadius = 75;
    const deadZoneRadius = 24;

    // 计算触摸点到中心的距离平方（避免开方，提升性能）
    const distanceSquared = relX * relX + relY * relY;
    const outerRadiusSquared = outerRadius * outerRadius;
    const deadZoneRadiusSquared = deadZoneRadius * deadZoneRadius;

    // 校验是否在有效区域内（死区外、外圆内）
    if (distanceSquared > deadZoneRadiusSquared && distanceSquared < outerRadiusSquared) {
        // 计算触摸点相对中心的弧度（范围 [-π, π]）
        const radians = Math.atan2(relY, relX);
        // 转换为 0 到 2π 的范围，方便区间判断
        const angle = (radians + 2 * Math.PI) % (2 * Math.PI);

        // 根据角度区间判断方向
        const quarterPi = Math.PI / 4;
        const threeQuarterPi = 3 * Math.PI / 4;
        const fiveQuarterPi = 5 * Math.PI / 4;
        const sevenQuarterPi = 7 * Math.PI / 4;

        if ((angle >= 0 && angle < quarterPi) || (angle >= sevenQuarterPi && angle < 2 * Math.PI)) {
            // 右方向（2）：315° 到 45° 区间
            dir = 2;
        } else if (angle >= quarterPi && angle < threeQuarterPi) {
            // 下方向（3）：45° 到 135° 区间
            dir = 3;
        } else if (angle >= threeQuarterPi && angle < fiveQuarterPi) {
            // 左方向（4）：135° 到 225° 区间
            dir = 4;
        } else if (angle >= fiveQuarterPi && angle < sevenQuarterPi) {
            // 上方向（1）：225° 到 315° 区间
            dir = 1;
        }
    }

    return dir;
}

关键细节说明 #

• 性能优化：用距离平方代替开方计算，避免Math.sqrt的性能开销，同时不影响边界判断
• 角度转换：将Math.atan2返回的[-π, π]弧度转换为[0, 2π]，简化区间判断逻辑
• 区间划分：每个方向对应90°的扇形区域，完全匹配你期望的圆形摇杆触发范围
• 边界校验：同时过滤死区（内圆）和外圆外的无效触摸，解决原方案的边界问题

可选优化 #

如果需要调整方向区域的灵敏度（比如让横向/纵向区域更宽/窄），可以修改角度区间的阈值，例如将quarterPi调整为Math.PI / 5（36°），缩小横向区域，扩大纵向区域，反之亦然。

内容的提问来源于stack exchange，提问作者AntumDeluge