Flutter & OpenHarmony 游戏开发：打砖块游戏完全指南

本文介绍了打砖块游戏的开发过程，重点探讨了物理模拟与碰撞检测的实现。游戏采用Flutter和OpenHarmony跨平台环境，通过30毫秒间隔的连续物理更新实现流畅动画。核心机制包括球体运动、挡板控制、砖块破坏和生命值系统，使用AABB算法进行高效碰撞检测。文章详细解析了数据结构设计、游戏状态管理、物理更新逻辑以及碰撞检测实现，特别是挡板碰撞时的动态速度计算策略。此外还介绍了玩家交互控制、游戏结束

2501_92657179

985人浏览 · 2025-11-27 09:50:15

2501_92657179 · 2025-11-27 09:50:15 发布

在这里插入图片描述

引言：物理模拟与碰撞检测的深度探索

经过三个游戏的开发，我们已经掌握了基本的游戏循环、用户交互和状态管理。现在，我们将进入一个更加复杂的领域——打砖块游戏。这个经典的街机游戏涉及物理模拟、多对象碰撞检测和动态速度计算等高级概念。

打砖块游戏在 Flutter 和 OpenHarmony 的跨平台环境中展示了如何实现真实的物理反应。通过这个项目，你将学到如何处理连续的物理更新、复杂的碰撞检测逻辑，以及如何根据碰撞位置动态改变物体的运动轨迹。这些技能对于开发任何涉及物理的游戏都至关重要。

游戏设计与核心机制

游戏规则

打砖块游戏的核心机制包括：

球的运动：球在屏幕内连续运动，速度和方向由碰撞决定
挡板控制：玩家通过滑动屏幕来移动挡板，防止球掉出底部
砖块破坏：球击中砖块时，砖块被破坏，玩家获得分数
生命值系统：玩家有 3 条生命，球掉出底部一次失去一条
胜利条件：破坏所有砖块时游戏胜利

设计理念

这个游戏的设计充分考虑了 OpenHarmony 设备的特性：

连续物理更新：每 30 毫秒更新一次，确保流畅的动画
相对坐标系统：所有位置使用 0-1 范围的相对坐标
高效的碰撞检测：使用 AABB 算法，计算简单但准确
动态速度计算：根据碰撞位置改变球的运动轨迹

核心数据结构

Brick 类

class Brick {
  double x;
  double y;
  bool broken;

  Brick({required this.x, required this.y, this.broken = false});
}

这个简单的类代表游戏中的一个砖块。每个属性都有明确的用途：

x 和 y：砖块在屏幕上的相对位置。这些值在初始化时设置，游戏过程中不会改变。

broken：布尔值，表示砖块是否已被破坏。这个标志用于碰撞检测（不与已破坏的砖块碰撞）和渲染（改变已破坏砖块的外观）。

这种简洁的设计使得管理多个砖块变得简单高效。

游戏状态管理

初始化与砖块生成

void initializeBricks() {
  bricks.clear();
  for (int row = 0; row < 3; row++) {
    for (int col = 0; col < 5; col++) {
      bricks.add(
        Brick(
          x: 0.1 + (col * 0.18),
          y: 0.05 + (row * 0.08),
        ),
      );
    }
  }
}

这个方法初始化游戏的砖块网格。关键点包括：

网格布局：3 行 5 列的砖块网格，共 15 个砖块。这个数量提供了适度的游戏长度。

间隔计算：col * 0.18 和 row * 0.08 确保砖块均匀分布在屏幕上，每个砖块之间有适当的间距。

起始位置：0.1 的起始偏移确保砖块不会紧贴屏幕边缘，留出适当的边距。

物理更新与碰撞检测

主游戏循环

void startGameLoop() {
  gameLoopTimer = Timer.periodic(const Duration(milliseconds: 30), (timer) {
    if (!gameOver) {
      setState(() {
        // 更新球的位置
        ballX += ballVelocityX;
        ballY += ballVelocityY;

        // 球与墙的碰撞
        if (ballX <= 0 || ballX >= 1) {
          ballVelocityX = -ballVelocityX;
          ballX = ballX.clamp(0.0, 1.0);
        }
        if (ballY <= 0) {
          ballVelocityY = -ballVelocityY;
        }

这部分代码实现了球的基本物理更新和与墙的碰撞检测。让我们详细分析：

位置更新：每帧将速度加到位置上。这是实现连续运动的基础。速度值（如 0.005）表示每帧移动的相对距离。

水平墙碰撞：当球的 x 坐标小于等于 0 或大于等于 1 时，球与左右墙碰撞。通过反转 ballVelocityX 来改变方向。clamp() 确保球不会超出边界。

顶部墙碰撞：当球的 y 坐标小于等于 0 时，球与顶部墙碰撞。反转 ballVelocityY 使球向下反弹。

挡板碰撞检测

// 球与挡板的碰撞
if (ballY > 0.9 &&
    ballY < 0.95 &&
    ballX > paddleX - paddleWidth / 2 &&
    ballX < paddleX + paddleWidth / 2) {
  ballVelocityY = -ballVelocityY;
  // 根据击中位置改变水平速度
  double hitPos = (ballX - paddleX) / (paddleWidth / 2);
  ballVelocityX += hitPos * 0.003;
}

这段代码实现了挡板碰撞检测，包含了高级的物理计算：

碰撞范围检测：检查球是否在挡板的高度范围（0.9 到 0.95）和水平范围内。这使用了 AABB（轴对齐边界框）碰撞检测算法。

速度反转：反转 ballVelocityY 使球向上反弹。

动态速度计算：这是这个游戏的一个关键特性。hitPos 计算了球击中挡板的相对位置（-1 到 1）。根据这个位置改变 ballVelocityX，使得：

击中挡板左边时，球向左偏转
击中挡板中心时，球保持水平方向
击中挡板右边时，球向右偏转

这种设计增加了游戏的策略性，玩家可以通过控制击中位置来改变球的轨迹。

砖块碰撞检测

// 球与砖块的碰撞
for (var brick in bricks) {
  if (!brick.broken &&
      ballX > brick.x - 0.08 &&
      ballX < brick.x + 0.08 &&
      ballY > brick.y - 0.04 &&
      ballY < brick.y + 0.04) {
    brick.broken = true;
    ballVelocityY = -ballVelocityY;
    score += 10;
  }
}

这段代码处理球与砖块的碰撞：

未破坏检查：!brick.broken 确保只与未破坏的砖块碰撞。这是一个重要的优化，避免了对已破坏砖块的重复检测。

AABB 碰撞检测：使用与挡板相同的碰撞检测算法。0.08 和 0.04 是砖块的碰撞范围。

破坏标记：将砖块标记为已破坏，防止重复碰撞。

得分增加：每破坏一个砖块，玩家获得 10 分。

游戏结束条件

// 球掉出底部
if (ballY > 1.0) {
  lives--;
  if (lives <= 0) {
    gameOver = true;
  } else {
    resetBall();
  }
}

// 检查是否赢了
if (bricks.every((brick) => brick.broken)) {
  gameOver = true;
}

这部分代码处理游戏的结束条件：

失败条件：当球掉出屏幕底部时，玩家失去一条生命。如果生命用尽，游戏结束。

胜利条件：使用 every() 方法检查所有砖块是否都已破坏。这是一个高效的检查方法。

玩家控制与交互

挡板移动

void updatePaddlePosition(double x) {
  setState(() {
    paddleX = x.clamp(paddleWidth / 2, 1 - paddleWidth / 2);
  });
}

这个方法更新挡板的位置。关键点包括：

直接位置映射：将触摸的 x 坐标直接映射到挡板位置，提供了直观的控制体验。

边界检查：clamp() 确保挡板不会超出屏幕边界。下界是 paddleWidth / 2（挡板左边缘不超出左边界），上界是 1 - paddleWidth / 2（挡板右边缘不超出右边界）。

手势识别

GestureDetector(
  onHorizontalDragUpdate: (details) {
    updatePaddlePosition(
      (details.globalPosition.dx / screenSize.width).clamp(0.0, 1.0),
    );
  },
  child: Stack(/* 游戏内容 */),
)

使用 GestureDetector 的 onHorizontalDragUpdate 回调来跟踪玩家的手指位置。这提供了流畅的、实时的挡板控制。

渲染与视觉效果

砖块渲染

...bricks.map((brick) {
  return Positioned(
    left: brick.x * screenSize.width - 20,
    top: brick.y * screenSize.height,
    child: Opacity(
      opacity: brick.broken ? 0.2 : 1.0,
      child: Container(
        width: 40,
        height: 20,
        decoration: BoxDecoration(
          color: brick.broken ? Colors.grey : Colors.red,
          borderRadius: BorderRadius.circular(4),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.3),
              blurRadius: 4,
            ),
          ],
        ),
        child: const Center(
          child: Text('🧱', style: TextStyle(fontSize: 14)),
        ),
      ),
    ),
  );
}).toList(),

砖块的渲染包含了视觉反馈：

破坏状态：已破坏的砖块透明度降低到 0.2，颜色变为灰色，清晰地表示其已被破坏。

阴影效果：使用 boxShadow 增加砖块的立体感。

圆角设计：borderRadius 使砖块看起来更现代和友好。

球的渲染

Positioned(
  left: ballX * screenSize.width - 8,
  top: ballY * screenSize.height - 8,
  child: Container(
    width: 16,
    height: 16,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.yellow,
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.5),
          blurRadius: 4,
        ),
      ],
    ),
    child: const Center(
      child: Text('⚪', style: TextStyle(fontSize: 12)),
    ),
  ),
)