HarmonyOS 跨端游戏开发实战：从手机触控到 PC 键鼠操作的统一架构设计

2.1 核心逻辑示例：GameWorld

// core/GameWorld.ts
export class GameWorld {
    balls: Ball[] = [];
    paddle: Paddle;
    score: number = 0;

    update(deltaTime: number) {
        // 物理更新（与设备无关）
        this.balls.forEach(ball => ball.update(deltaTime));
        this.checkCollisions();
    }

    movePaddleTo(x: number) {
        // 由输入层调用，传入目标位置
        this.paddle.x = x;
    }
}

✅ 优势：无论用户用手指拖动还是鼠标移动，最终都调用 movePaddleTo(x)，逻辑完全一致。

三、输入系统抽象：统一处理触控与键鼠

3.1 定义统一输入接口

// input/InputHandler.ts
export interface InputHandler {
    init(): void;
    destroy(): void;
    getPaddleTargetX(): number | null; // 返回挡板目标位置
}

3.2 手机实现：触屏拖动

// input/MobileInput.ts
import { TouchObject } from '@ohos.multimodalInput.touch';

export class MobileInput implements InputHandler {
    private currentX: number | null = null;

    init() {
        // 在 ArkTS 页面中绑定 onTouch
    }

    onTouch(event: TouchObject) {
        if (event.type === TouchType.Move || event.type === TouchType.Down) {
            this.currentX = event.screenX;
        }
    }

    getPaddleTargetX(): number | null {
        return this.currentX;
    }

    destroy() {
        this.currentX = null;
    }
}

3.3 PC 实现：鼠标移动 + 键盘方向键

// input/PCInput.ts
export class PCInput implements InputHandler {
    private mouseX: number | null = null;
    private keyboardX: number = 0; // -1 左，0 静止，1 右

    onMouseMove(x: number) {
        this.mouseX = x;
    }

    onKeyDown(key: string) {
        if (key === 'ArrowLeft') this.keyboardX = -1;
        if (key === 'ArrowRight') this.keyboardX = 1;
    }

    onKeyUp(key: string) {
        if (['ArrowLeft', 'ArrowRight'].includes(key)) this.keyboardX = 0;
    }

    getPaddleTargetX(): number | null {
        if (this.mouseX !== null) {
            return this.mouseX; // 鼠标优先
        }
        // 键盘模拟连续移动
        return this.keyboardX !== 0 ? (this.lastPaddleX + this.keyboardX * 10) : null;
    }
}

💡 交互哲学：PC 用户既可用鼠标精准控制，也可用键盘怀旧操作，体验更自由。

四、渲染与帧率管理：动态适配设备性能

4.1 帧率自适应

// view/GameRenderer.ts
export class GameRenderer {
    private targetFPS: number;
    private lastTime: number = 0;

    constructor(isPC: boolean) {
        // PC 默认 60fps，手机 30fps（省电）
        this.targetFPS = isPC ? 60 : 30;
    }

    startLoop(world: GameWorld, draw: (world: GameWorld) => void) {
        const frameInterval = 1000 / this.targetFPS;
        const loop = (time: number) => {
            const deltaTime = time - this.lastTime;
            if (deltaTime >= frameInterval) {
                world.update(deltaTime / 1000);
                draw(world);
                this.lastTime = time;
            }
            requestAnimationFrame(loop);
        };
        requestAnimationFrame(loop);
    }
}

4.2 Canvas 绘制（ArkUI）

// pages/PCGame.ets
@Entry
@Component
struct PCGamePage {
    private renderer: GameRenderer;
    private world: GameWorld = new GameWorld();

    aboutToAppear() {
        const isPC = deviceInfo.deviceType === 'pc';
        this.renderer = new GameRenderer(isPC);
        // 初始化输入
        const input = isPC ? new PCInput() : new MobileInput();
        input.init();
        this.renderer.startLoop(this.world, (w) => {
            // 在 Canvas 中绘制
            const targetX = input.getPaddleTargetX();
            if (targetX !== null) w.movePaddleTo(targetX);
        });
    }

    build() {
        Column() {
            Canvas((ctx) => {
                // 调用 GameRenderer 的 draw 方法
                this.drawWorld(ctx, this.world);
            })
            .width('100%')
            .height('100%')
            .onMouseEvent((e) => {
                if (e.action === MouseAction.MOUSE_BUTTON_DOWN) {
                    // PC 鼠标点击发射球
                    this.world.shootBall();
                }
            });
        }
    }
}

五、PC 专属体验：窗口事件与多开支持

5.1 窗口最小化时暂停游戏

// 在 PCGamePage 中
aboutToAppear() {
    // 监听窗口可见性
    window.on('windowVisibilityChange', (isVisible) => {
        if (isVisible) {
            this.resumeGame();
        } else {
            this.pauseGame(); // 保存状态，停止渲染循环
        }
    });
}

5.2 支持多窗口独立游戏实例

每个新窗口拥有独立的 GameWorld 和 GameRenderer，互不影响：

// 通过菜单'新建游戏窗口'
async openNewGameWindow() {
    const win = await window.create(this.context, { name: 'game_' + Date.now() });
    router.pushUrl({ url: 'pages/PCGame' }, { windowStage: win.windowStage });
    win.show();
}

✅ 用户可在左屏玩关卡 1，右屏试关卡 5，效率翻倍。

六、性能优化与资源管理

6.1 对象池（减少 GC 压力）

// core/ObjectPool.ts
export class BallPool {
    private pool: Ball[] = [];

    get(): Ball {
        return this.pool.pop() || new Ball();
    }

    release(ball: Ball) {
        ball.reset();
        this.pool.push(ball);
    }
}

6.2 图片资源按 DPI 提供

resources/rawfile/
├── ball@1x.png     # 手机
├── ball@2x.png     # PC 高分屏
└── background.webp # 使用 WebP 减小体积

七、AppGallery 双端上架策略

✅ 在 AGC 后台为同一应用提交两套元数据，系统自动分发。

结语：跨端不是妥协，而是体验升级

通过本文的 三层解耦架构 + 输入抽象 + 动态渲染，你已掌握构建真正跨端 HarmonyOS 游戏的核心方法论。这不仅适用于益智游戏，同样适用于：

• 平台跳跃（Platformer）
• 卡牌对战
• 模拟经营
• 教育互动

在 HarmonyOS 生态加速扩张的今天，率先拥抱 PC 场景的开发者，将赢得下一个增长红利。

附录：关键 API 与文档

• HarmonyOS 游戏开发指南
• 窗口管理 API
• 多模输入事件