在这里插入图片描述

个人主页：ujainu

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

文章目录

前言

在移动端休闲游戏中，无限跑酷（Endless Runner） 凭借其简单上手、节奏紧凑、易于成瘾的特性，长期占据热门榜单。从《Temple Run》到《Subway Surfers》，这类游戏的核心魅力在于：用最简操作，挑战极限反应。

本文将基于 Flutter + OpenHarmony 平台，从零构建一个高性能、低内存占用的无限跑酷游戏。我们将深入实现：

✅ 角色自动前进 + 手势左右移动：响应式输入控制
✅ 障碍物对象池化（Object Pooling）：避免频繁创建/销毁导致的卡顿
✅ 无限滚动背景与障碍生成：视觉连贯性保障
✅ 得分系统与游戏结束判定：基于存活时间的计分逻辑
✅ OpenHarmony 兼容优化：60 FPS 流畅运行于轻量设备

💡 核心价值：掌握 对象池化 这一关键性能优化技术，适用于所有高频动态元素场景。
✅ 环境说明：Flutter + OpenHarmony 开发环境已配置完毕，无需重复搭建步骤。

一、为什么无限跑酷是性能优化的绝佳练兵场？

无限跑酷游戏看似简单，实则对 帧率稳定性 和 内存管理 提出极高要求：

挑战 后果 解决方案
障碍物持续生成 频繁 new 对象 → GC 卡顿 对象池化（Object Pooling）
背景无限滚动 图片重复绘制 → GPU 压力 纹理复用 + 视口裁剪
手势响应延迟 操作不跟手 → 体验差 优先级事件处理 + 插值平滑
状态未清理 页面退出后逻辑仍在运行 严格生命周期管理

正因如此，它成为检验开发者 性能意识 的试金石。而本文的核心，正是通过 对象池化 彻底解决内存抖动问题。

二、整体架构设计

我们采用 单屏 + 自绘 + 对象池 架构：

  • 主界面：RunnerGameScreen（StatefulWidget）
  • 渲染层：RunnerPainter（CustomPainter）
  • 核心组件：
    • Player：玩家角色（固定 Y，X 可控）
    • Obstacle：障碍物（带类型、位置、是否激活）
    • ObstaclePool：障碍物对象池
  • 游戏循环：Timer.periodic 驱动（16ms ≈ 60 FPS）

📌 关键原则：障碍物永不被销毁，只被回收复用。

三、对象池化（Object Pooling）详解

1. 什么是对象池？

对象池是一种 预先分配一批对象，使用时“租借”，不用时“归还” 的设计模式。它避免了运行时频繁的内存分配与垃圾回收。

2. 为何在跑酷中必须使用？

  • 每秒生成 2~3 个障碍物，1 分钟即 120+ 对象
  • 若每次 new Obstacle()，GC 会频繁触发，导致 掉帧卡顿
  • OpenHarmony 设备内存有限，更需谨慎管理

3. ObstaclePool 实现

class Obstacle {
  double x = 0;
  double y = 0;
  final double width = 40;
  final double height = 40;
  bool active = false; // 是否在屏幕上
  final Color color;

  Obstacle(this.color);

  void reset(double startX, double startY) {
    x = startX;
    y = startY;
    active = true;
  }

  void deactivate() {
    active = false;
  }
}

class ObstaclePool {
  final List<Obstacle> _pool = [];
  final Random _random = Random();

  ObstaclePool(int initialSize) {
    // 预创建 20 个障碍物（足够覆盖屏幕）
    for (int i = 0; i < initialSize; i++) {
      final colors = [Colors.red, Colors.orange, Colors.purple];
      _pool.add(Obstacle(colors[_random.nextInt(colors.length)]));
    }
  }

  // 获取一个可用障碍物
  Obstacle? acquire(double startX, double startY) {
    for (final obstacle in _pool) {
      if (!obstacle.active) {
        obstacle.reset(startX, startY);
        return obstacle;
      }
    }
    // 池满？理论上不应发生（初始大小足够）
    return null;
  }

  // 获取所有活跃障碍物（用于渲染与碰撞检测）
  List<Obstacle> getActiveObstacles() {
    return _pool.where((o) => o.active).toList();
  }

  // 回收移出屏幕的障碍物
  void recycleOffscreenObstacles(double screenHeight) {
    for (final obstacle in _pool) {
      if (obstacle.active && obstacle.y > screenHeight + 100) {
        obstacle.deactivate();
      }
    }
  }
}

🔍 优势：

  • 内存分配仅发生在初始化阶段
  • 运行时只有属性重置，无 GC 压力
  • recycleOffscreenObstacles 自动回收，无需手动管理

四、角色控制：手势驱动左右移动

玩家角色 自动向上移动，用户通过 水平滑动手势 控制 X 轴位置：

class Player {
  double x = 0;
  double y = 0;
  final double size = 30;
  final double maxSpeed = 5.0;
  double velocityX = 0; // X 方向速度（用于平滑）

  Player(this.x, this.y);

  void updatePosition(double targetX, double screenWidth) {
    // 目标位置限制在屏幕内
    final clampedTarget = targetX.clamp(size / 2, screenWidth - size / 2);
    // 使用速度插值实现平滑移动（非瞬移）
    velocityX = (clampedTarget - x) * 0.2;
    x += velocityX;
  }
}

在 UI 层监听手势：

double _targetPlayerX = 0;

@override
Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  _targetPlayerX = _player.x; // 初始值

  return GestureDetector(
    onPanUpdate: (details) {
      // 累加偏移量
      _targetPlayerX += details.delta.dx;
    },
    child: Scaffold(
      backgroundColor: Colors.black,
      body: CustomPaint(
        painter: RunnerPainter(
          player: _player,
          obstacles: _obstaclePool.getActiveObstacles(),
          score: _score,
          gameOver: _gameOver,
        ),
      ),
    ),
  );
}

// 在游戏循环中更新玩家位置
void _updateGameLogic() {
  final screenWidth = MediaQuery.of(context).size.width;
  _player.updatePosition(_targetPlayerX, screenWidth);
  // ... 其他逻辑
}

✅ 体验优化：使用 速度插值 而非直接赋值，使角色移动更自然流畅。

五、无限滚动与障碍生成

1. 背景无限滚动

通过两个背景图交替拼接实现：

// 在 RunnerPainter 中
void _drawBackground(Canvas canvas, Size size, double scrollOffset) {
  final bgHeight = size.height;
  final offset = scrollOffset % (bgHeight * 2);
  
  // 绘制两张背景
  canvas.drawRect(
    Rect.fromLTWH(0, -offset, size.width, bgHeight * 2),
    Paint()..color = const Color(0xFF1a1a2e),
  );
  // 可添加星空粒子等细节
}

2. 障碍物生成策略

  • 生成频率：每 1.5 秒一次（随时间加速）
  • X 位置：随机分布在 3 条赛道（左/中/右）
  • Y 位置：从屏幕顶部外开始下落
void _spawnObstacle() {
  final now = DateTime.now().millisecondsSinceEpoch;
  if (now - _lastSpawnTime > _spawnInterval) {
    _lastSpawnTime = now;
    
    // 3 条赛道：0.25, 0.5, 0.75 屏幕宽度
    final lanes = [0.25, 0.5, 0.75];
    final lane = lanes[Random().nextInt(lanes.length)];
    final screenWidth = MediaQuery.of(context).size.width;
    final startX = lane * screenWidth;
    final startY = -50; // 从顶部外开始

    final obstacle = _obstaclePool.acquire(startX, startY);
    // 若池满，跳过（不应发生）
  }
}

⚠️ 注意：_spawnInterval 可随 _score 增加而缩短，实现难度递增。

六、碰撞检测与游戏结束

使用 圆形 vs 矩形 碰撞检测（玩家为圆，障碍为矩形）：

bool _checkCollision(Player player, Obstacle obstacle) {
  final closestX = obstacle.x.clamp(obstacle.x, obstacle.x + obstacle.width);
  final closestY = obstacle.y.clamp(obstacle.y, obstacle.y + obstacle.height);
  
  final distX = player.x - closestX;
  final distY = player.y - closestY;
  final distance = sqrt(distX * distX + distY * distY);
  
  return distance < player.size / 2;
}

// 在游戏循环中
for (final obstacle in _obstaclePool.getActiveObstacles()) {
  if (_checkCollision(_player, obstacle)) {
    _gameOver = true;
    _timer?.cancel();
    break;
  }
}

🔍 精度优化：计算玩家中心到障碍矩形的最近点，再求欧氏距离，比 AABB 更准确。

七、得分系统与性能监控

得分 = 存活时间（秒），每帧累加：

void _updateGameLogic() {
  if (!_gameOver) {
    _score += 0.016; // ≈ 1/60 秒
    // ... 其他逻辑
  }
}

同时，在 dispose 中确保资源释放：

@override
void dispose() {
  _timer?.cancel();
  super.dispose();
}

✅ OpenHarmony 提示：使用 DevEco Studio 的 Performance Monitor 验证：

  • 内存曲线平稳（无锯齿状 GC）
  • FPS 稳定在 55~60

八、完整可运行代码（Flutter + OpenHarmony）

以下代码可直接复制到 main.dart 中运行，包含对象池、手势控制、无限滚动与游戏结束逻辑：

// main.dart - 无限跑酷游戏 (Endless Runner)
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';

// ==================== 游戏对象 ====================
class Player {
  double x;
  double y;
  final double size;
  double velocityX = 0;

  Player(this.x, this.y, {this.size = 30});

  void updatePosition(double targetX, double screenWidth) {
    final clampedTarget = targetX.clamp(size / 2, screenWidth - size / 2);
    velocityX = (clampedTarget - x) * 0.2;
    x += velocityX;
  }
}

class Obstacle {
  double x = 0;
  double y = 0;
  final double width;
  final double height;
  bool active = false;
  final Color color;

  Obstacle(this.color, {this.width = 40, this.height = 40});

  void reset(double startX, double startY) {
    x = startX;
    y = startY;
    active = true;
  }

  void deactivate() {
    active = false;
  }
}

class ObstaclePool {
  final List<Obstacle> _pool = [];
  final Random _random = Random();

  ObstaclePool(int initialSize) {
    final colors = [Colors.red, Colors.orange, Colors.purple, Colors.deepOrange];
    for (int i = 0; i < initialSize; i++) {
      _pool.add(Obstacle(colors[_random.nextInt(colors.length)]));
    }
  }

  Obstacle? acquire(double startX, double startY) {
    for (final obstacle in _pool) {
      if (!obstacle.active) {
        obstacle.reset(startX, startY);
        return obstacle;
      }
    }
    return null;
  }

  List<Obstacle> getActiveObstacles() {
    return _pool.where((o) => o.active).toList();
  }

  void recycleOffscreenObstacles(double screenHeight) {
    for (final obstacle in _pool) {
      if (obstacle.active && obstacle.y > screenHeight + 100) {
        obstacle.deactivate();
      }
    }
  }
}

// ==================== 自定义绘制 ====================
class RunnerPainter extends CustomPainter {
  final Player player;
  final List<Obstacle> obstacles;
  final double score;
  final bool gameOver;

  RunnerPainter({
    required this.player,
    required this.obstacles,
    required this.score,
    required this.gameOver,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();

    // 背景
    canvas.drawRect(Offset.zero & size, Paint()..color = const Color(0xFF0f0f23));

    // 玩家（圆形）
    paint.color = Colors.cyan;
    canvas.drawCircle(Offset(player.x, player.y), player.size / 2, paint);

    // 障碍物
    for (final obstacle in obstacles) {
      paint.color = obstacle.color;
      canvas.drawRect(
        Rect.fromLTWH(obstacle.x - obstacle.width / 2, obstacle.y, obstacle.width, obstacle.height),
        paint,
      );
    }

    // 得分
    final scoreText = '得分: ${score.toInt()}';
    final textPainter = TextPainter(
      text: TextSpan(text: scoreText, style: const TextStyle(color: Colors.white, fontSize: 20)),
      textDirection: TextDirection.ltr,
    );
    textPainter.layout();
    textPainter.paint(canvas, const Offset(20, 40));

    // 游戏结束提示
    if (gameOver) {
      final gameOverText = '游戏结束！';
      final gp = TextPainter(
        text: TextSpan(text: gameOverText, style: const TextStyle(color: Colors.white, fontSize: 36, fontWeight: FontWeight.bold)),
        textDirection: TextDirection.ltr,
      );
      gp.layout();
      gp.paint(canvas, Offset(size.width / 2 - gp.width / 2, size.height / 2 - 50));
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

// ==================== 主游戏界面 ====================
class RunnerGameScreen extends StatefulWidget {
  const RunnerGameScreen({super.key});

  @override
  State<RunnerGameScreen> createState() => _RunnerGameScreenState();
}

class _RunnerGameScreenState extends State<RunnerGameScreen> {
  late Player _player;
  late ObstaclePool _obstaclePool;
  Timer? _timer;
  double _score = 0;
  bool _gameOver = false;
  double _targetPlayerX = 0;
  int _lastSpawnTime = 0;
  int _spawnInterval = 1500; // 毫秒

  @override
  void initState() {
    super.initState();
    _initializeGame();
  }

  void _initializeGame() {
    final size = MediaQuery.of(context).size;
    _player = Player(size.width / 2, size.height - 100, size: 30);
    _obstaclePool = ObstaclePool(20);
    _score = 0;
    _gameOver = false;
    _targetPlayerX = _player.x;
    _lastSpawnTime = DateTime.now().millisecondsSinceEpoch;
    _spawnInterval = 1500;

    _timer?.cancel();
    _timer = Timer.periodic(const Duration(milliseconds: 16), (_) {
      if (!_gameOver) {
        _updateGameLogic();
        if (mounted) setState(() {});
      }
    });
  }

  bool _checkCollision(Player player, Obstacle obstacle) {
    final obstacleLeft = obstacle.x - obstacle.width / 2;
    final obstacleRight = obstacle.x + obstacle.width / 2;
    final obstacleTop = obstacle.y;
    final obstacleBottom = obstacle.y + obstacle.height;

    final closestX = player.x.clamp(obstacleLeft, obstacleRight);
    final closestY = player.y.clamp(obstacleTop, obstacleBottom);

    final distX = player.x - closestX;
    final distY = player.y - closestY;
    final distance = sqrt(distX * distX + distY * distY);

    return distance < player.size / 2;
  }

  void _updateGameLogic() {
    final size = MediaQuery.of(context).size;
    final screenWidth = size.width;
    final screenHeight = size.height;

    // 更新玩家位置
    _player.updatePosition(_targetPlayerX, screenWidth);

    // 障碍物下落
    for (final obstacle in _obstaclePool.getActiveObstacles()) {
      obstacle.y += 4.0; // 下落速度
    }

    // 回收屏幕外障碍物
    _obstaclePool.recycleOffscreenObstacles(screenHeight);

    // 生成新障碍物
    final now = DateTime.now().millisecondsSinceEpoch;
    if (now - _lastSpawnTime > _spawnInterval) {
      _lastSpawnTime = now;
      final lanes = [0.25, 0.5, 0.75];
      final lane = lanes[Random().nextInt(lanes.length)];
      final startX = lane * screenWidth;
      _obstaclePool.acquire(startX, -50);
      
      // 难度递增：每 10 分减少 100ms 间隔
      _spawnInterval = (1500 - (_score ~/ 10) * 100).clamp(500, 1500);
    }

    // 碰撞检测
    for (final obstacle in _obstaclePool.getActiveObstacles()) {
      if (_checkCollision(_player, obstacle)) {
        _gameOver = true;
        _timer?.cancel();
        break;
      }
    }

    // 更新得分
    _score += 0.016;
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        if (!_gameOver) {
          _targetPlayerX += details.delta.dx;
        }
      },
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          children: [
            CustomPaint(
              painter: RunnerPainter(
                player: _player,
                obstacles: _obstaclePool.getActiveObstacles(),
                score: _score,
                gameOver: _gameOver,
              ),
              size: Size.infinite,
            ),
            if (_gameOver)
              Positioned.fill(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(bottom: 50),
                      child: ElevatedButton(
                        onPressed: _initializeGame,
                        child: const Text('重新开始', style: TextStyle(fontSize: 18)),
                      ),
                    ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}

// ==================== 主程序入口 ====================
void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: RunnerGameScreen(),
  ));
}

运行界面：

在这里插入图片描述

结语

本文通过实现一个完整的无限跑酷游戏，深入讲解了 对象池化 这一关键性能优化技术，并结合 手势控制、无限滚动、碰撞检测 构建了流畅的游戏体验。代码结构清晰、注释完整，且针对 OpenHarmony 设备进行了内存与帧率优化。

对象池化不仅适用于跑酷游戏，还可广泛应用于：

  • 子弹射击游戏（子弹池）
  • 粒子系统（火花、烟雾）
  • 动态 UI 元素（通知气泡）

掌握此技术，你将能开发出更稳定、更流畅的高性能应用。

# flutter # 性能优化 # 游戏
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony 实战之基础组件：第三十五篇 SnackBar 与 MaterialBanner — 灵活的应用消息反馈

avatar 开源鸿蒙跨平台开发者社区
cover

构建基于 Flutter × OpenHarmony 的入侵检测系统：数据结构与 UI 设计详解

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter-OH实战：构建入侵检测系统中的实时监控模块

avatar 开源鸿蒙跨平台开发者社区