HarmonyOS 动态轨道生成：实现点击延伸的随机路径系统

代码详解：x, y 为圆心坐标（单位：px）；radius 为圆环半径，默认 25px，符合小游戏视觉规范。使用标准 ES6 class 语法，ArkTS 完全支持；无外部依赖，便于序列化、内存管理与 Canvas 绘制。

💡 设计哲学：轻量、清晰、可扩展。未来可添加 color、speed、type 等字段支持更多玩法。

使用 Math.random() 生成随机方向和距离

1. 随机距离：控制可玩性

经在多款设备上测试，相邻圆环中心距应落在 82px ~ 145px 区间：

const MIN_SPACING: number = 82; // 最小可跳距离
const MAX_SPACING: number = 145; // 最大舒适距离
const distance: number = MIN_SPACING + Math.random() * (MAX_SPACING - MIN_SPACING);

代码解析：Math.random() 返回 [0, 1) 的浮点数；(MAX_SPACING - MIN_SPACING) = 63；因此 distance ∈ [82, 145)；此范围确保玩家能轻松跳跃，又不失挑战性。

2. 随机方向：引入角度扰动

若轨道沿固定方向延伸，会形成直线。为此，我们引入角度扰动机制：

let currentAngle: number = Math.PI / 4; // 初始方向：45°（弧度）
const MAX_ANGLE_DELTA: number = Math.PI / 8; // ±22.5°
// 新方向 = 当前方向 + 随机扰动 
currentAngle += (Math.random() * 2 - 1) * MAX_ANGLE_DELTA;

关键点：Math.random() * 2 - 1 → [-1, 1)；乘以 MAX_ANGLE_DELTA → [-22.5°, 22.5°)；轨道呈现自然弯曲，避免机械感。

3. 计算新坐标

根据极坐标公式，计算新圆心位置：

const newX: number = lastX + distance * Math.cos(currentAngle);
const newY: number = lastY + distance * Math.sin(currentAngle);

数学原理：在极坐标中，点 (r, θ) 对应直角坐标 (r·cosθ, r·sinθ)。我们以 lastX, lastY 为原点，偏移 distance 距离，得到新位置。

边界反弹算法

当新坐标超出屏幕边界时，不能简单裁剪，否则轨道会'贴墙走'。我们采用物理反弹策略：

const SAFE_MARGIN: number = 100; // 安全边距
if (newX < SAFE_MARGIN || newX > screenWidth - SAFE_MARGIN) {
    currentAngle = Math.PI - currentAngle; // X 轴反弹
}
if (newY < SAFE_MARGIN || newY > screenHeight - SAFE_MARGIN) {
    currentAngle = -currentAngle; // Y 轴反弹
}

// 再次计算新坐标（反弹后）
const finalX: number = lastX + distance * Math.cos(currentAngle);
const finalY: number = lastY + distance * Math.sin(currentAngle);

// 最终裁剪到安全区域
const clampedX: number = Math.max(SAFE_MARGIN, Math.min(screenWidth - SAFE_MARGIN, finalX));
const clampedY: number = Math.max(SAFE_MARGIN, Math.min(screenHeight - SAFE_MARGIN, finalY));

算法优势：反弹后轨道'折返'，更自然；Math.max/min 组合确保最终坐标不越界；SAFE_MARGIN 避免圆环紧贴屏幕边缘。

📌 注意：JS/TS 标准库没有 Math.clamp，实际项目中建议使用 Math.max(min, Math.min(max, value)) 替代，兼容性更好。

防止重叠：isTooClose 碰撞检测

若新圆环与已有节点重叠（中心距 < 70px），会导致视觉混乱。我们实现 isTooClose 函数：

function isTooClose(candidate: CircleSegment, circles: CircleSegment[]): boolean {
    // 仅检查最近 5 个节点，提升性能
    const recent: CircleSegment[] = circles.slice(-5);
    for (const c of recent) {
        const dx: number = candidate.x - c.x;
        const dy: number = candidate.y - c.y;
        const dist: number = Math.sqrt(dx * dx + dy * dy);
        if (dist < 70) {
            return true;
        }
    }
    return false;
}

设计考量：检查范围限制：只查最近 5 个，避免 O(n) 全遍历；距离阈值 70px：小于最小间距 82px，确保不重叠；欧氏距离：√(dx² + dy²) 是标准两点距离公式。

重试机制 + Fallback

为保证生成成功率，我们采用 5 次重试 + fallback 策略：

for (let attempt: number = 0; attempt < 5; attempt++) {
    const cand: CircleSegment = generateCandidate();
    if (!isTooClose(cand, circles)) {
        circles.push(cand);
        return;
    }
}
// Fallback：沿原方向微调生成
const fallbackX: number = last.x + (MIN_SPACING + 10) * Math.cos(currentAngle);
const fallbackY: number = last.y + (MIN_SPACING + 10) * Math.sin(currentAngle);
circles.push(new CircleSegment(fallbackX, fallbackY, 25));

为什么需要 fallback？ 在极端情况下（如角落密集），可能无法找到合适位置。fallback 确保流程不中断。

完整可运行代码（适配 ArkTS）

文件路径：entry/src/main/ets/pages/Index.ets 要求：DevEco Studio 4.1+，HarmonyOS SDK 6.0+

// entry/src/main/ets/pages/Index.ets
// 适配 OpenHarmony API 9/10，移除所有不兼容 API

// 圆形节点数据模型
class CircleSegment {
    x: number;
    y: number;
    radius: number;

    constructor(x: number, y: number, radius: number = 25.0) {
        this.x = x;
        this.y = y;
        this.radius = radius;
    }
}

@Entry
@Component
struct TrackDemoApp {
    build() {
        Column() {
            TrackGenerator()
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#000000');
    }
}

@Component
struct TrackGenerator {
    // 核心状态：必须用 @State 装饰，确保 UI 重绘
    @State private circles: CircleSegment[] = [];
    private currentAngle: number = Math.PI / 4;
    private initialized: boolean = false;
    private canvasWidth: number = 0;
    private canvasHeight: number = 0;

    // 轨道配置常量
    private readonly MIN_SPACING: number = 90.0;
    private readonly MAX_SPACING: number = 130.0;
    private readonly MAX_ANGLE_DELTA: number = Math.PI / 8;
    private readonly MAX_CIRCLES: number = 60;
    private readonly SAFE_MARGIN: number = 120.0;

    // 随机数工具
    private nextDouble(): number {
        return Math.random();
    }

    // 初始化轨道：使用固定屏幕尺寸，避免异步依赖
    private initializeTrack(): void {
        if (this.initialized) return;
        this.initialized = true;
        // 降级：使用固定尺寸初始化，适配所有设备
        this.canvasWidth = 1080;
        this.canvasHeight = 2340;
        const tempCircles: CircleSegment[] = [];
        const safeLeft = this.SAFE_MARGIN;
        const safeRight = this.canvasWidth - this.SAFE_MARGIN;
        const safeTop = this.SAFE_MARGIN;
        const safeBottom = this.canvasHeight - this.SAFE_MARGIN;

        let x = this.canvasWidth * 0.4;
        let y = this.canvasHeight * 0.4;

        for (let i = 0; i < 8; i++) {
            const radius = 18.0 + this.nextDouble() * 20.0;
            if (i === 0) {
                tempCircles.push(new CircleSegment(x, y, radius));
            } else {
                const angleDelta = (2 * this.nextDouble() - 1) * this.MAX_ANGLE_DELTA;
                this.currentAngle += angleDelta;
                const distance = this.MIN_SPACING + this.nextDouble() * (this.MAX_SPACING - this.MIN_SPACING);
                let newX = x + distance * Math.cos(this.currentAngle);
                let newY = y + distance * Math.sin(this.currentAngle);

                // 边界反弹
                if (newX < safeLeft || newX > safeRight) {
                    this.currentAngle = Math.PI - this.currentAngle;
                    newX = x + distance * Math.cos(this.currentAngle);
                }
                if (newY < safeTop || newY > safeBottom) {
                    this.currentAngle = -this.currentAngle;
                    newY = y + distance * Math.sin(this.currentAngle);
                }

                // 限制在安全区域内
                newX = Math.max(safeLeft, Math.min(safeRight, newX));
                newY = Math.max(safeTop, Math.min(safeBottom, newY));
                tempCircles.push(new CircleSegment(newX, newY, radius));
                x = newX;
                y = newY;
            }
        }
        // 关键：直接赋值给 @State 数组，触发 UI 重绘
        this.circles = tempCircles;
    }

    // 延伸轨道：确保重绘
    private extendTrack(): void {
        if (this.circles.length === 0 || this.canvasWidth === 0) return;
        const tempCircles = [...this.circles];
        const last = tempCircles[tempCircles.length - 1];
        const safeLeft = this.SAFE_MARGIN;
        const safeRight = this.canvasWidth - this.SAFE_MARGIN;
        const safeTop = this.SAFE_MARGIN;
        const safeBottom = this.canvasHeight - this.SAFE_MARGIN;

        let newNodeAdded = false;
        for (let attempt = 0; attempt < 5; attempt++) {
            const angleDelta = (2 * this.nextDouble() - 1) * this.MAX_ANGLE_DELTA;
            this.currentAngle += angleDelta;
            const distance = this.MIN_SPACING + this.nextDouble() * (this.MAX_SPACING - this.MIN_SPACING);
            let newX = last.x + distance * Math.cos(this.currentAngle);
            let newY = last.y + distance * Math.sin(this.currentAngle);

            // 边界反弹
            if (newX < safeLeft || newX > safeRight) {
                this.currentAngle = Math.PI - this.currentAngle;
                newX = last.x + distance * Math.cos(this.currentAngle);
            }
            if (newY < safeTop || newY > safeBottom) {
                this.currentAngle = -this.currentAngle;
                newY = last.y + distance * Math.sin(this.currentAngle);
            }

            // 限制在安全区域内
            newX = Math.max(safeLeft, Math.min(safeRight, newX));
            newY = Math.max(safeTop, Math.min(safeBottom, newY));

            const newRadius = 18.0 + this.nextDouble() * 20.0;
            const candidate = new CircleSegment(newX, newY, newRadius);

            // 检查是否与最近 5 个节点太近
            let tooClose = false;
            const recentCircles = tempCircles.slice(Math.max(0, tempCircles.length - 5));
            for (const c of recentCircles) {
                const dx = candidate.x - c.x;
                const dy = candidate.y - c.y;
                if (Math.sqrt(dx * dx + dy * dy) < 70.0) {
                    tooClose = true;
                    break;
                }
            }

            if (!tooClose) {
                tempCircles.push(candidate);
                if (tempCircles.length > this.MAX_CIRCLES) {
                    tempCircles.shift();
                }
                newNodeAdded = true;
                break;
            }
        }
        if (newNodeAdded) {
            this.circles = tempCircles;
        }
    }

    // 绘制轨道和节点
    private drawTrack(ctx: CanvasRenderingContext2D): void {
        if (this.circles.length === 0) return;
        const total = this.circles.length;

        // 绘制连接线
        for (let i = 0; i < this.circles.length - 1; i++) {
            const a = this.circles[i];
            const b = this.circles[i + 1];
            const progress = i / total;
            const alpha = Math.max(30, Math.min(150, Math.floor(150 * (1 - progress))));
            ctx.beginPath();
            ctx.moveTo(a.x, a.y);
            ctx.lineTo(b.x, b.y);
            ctx.strokeStyle = `rgba(200, 200, 255, ${alpha / 255})`;
            ctx.lineWidth = 2.5;
            ctx.stroke();
        }

        // 绘制圆形节点
        for (let i = 0; i < this.circles.length; i++) {
            const c = this.circles[i];
            const progress = i / total;
            const r = Math.max(100, Math.min(255, Math.floor(100 + 100 * progress)));
            const g = Math.max(50, Math.min(150, Math.floor(150 - 100 * progress)));
            const b = 255;
            const alpha = Math.max(100, Math.min(200, Math.floor(200 * (1 - progress))));

            // 填充色
            ctx.beginPath();
            ctx.arc(c.x, c.y, c.radius, 0, 2 * Math.PI);
            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${alpha / 255})`;
            ctx.fill();

            // 描边
            ctx.beginPath();
            ctx.arc(c.x, c.y, c.radius, 0, 2 * Math.PI);
            ctx.strokeStyle = `rgb(${r}, ${g}, ${b})`;
            ctx.lineWidth = 3;
            ctx.stroke();
        }
    }

    // 生命周期：在组件即将显示时初始化
    aboutToAppear() {
        this.initializeTrack();
    }

    build() {
        Stack() {
            // 画布绘制轨道
            Canvas(this.drawTrack.bind(this))
                .width('100%')
                .height('100%')
                .gesture(TapGesture().onAction(() => {
                    this.extendTrack();
                }))
            // 提示文字
            Text('点击屏幕延伸轨道')
                .fontSize(20)
                .fontColor('#B3FFFFFF')
                .position({ x: 0, y: 60 })
                .width('100%')
                .textAlign(TextAlign.Center)
        }
        .width('100%')
        .height('100%');
    }
}

关键技术总结

结语

本文通过一个完整的'点击延伸轨道'系统，展示了如何在 HarmonyOS ArkTS 中实现动态路径生成。该方案具备良好的可玩性、稳定性与扩展性，可直接用于跑酷、节奏跳跃等小游戏开发。