Flutter 框架跨平台鸿蒙开发 - 赛车游戏

赛车游戏应用

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

赛车游戏是一款刺激的竞速类休闲游戏，玩家需要控制赛车在赛道上行驶，躲避障碍车辆，收集金币，挑战最高分数。游戏采用简洁的操控方式，玩家只需点击屏幕左右两侧即可控制赛车左右移动，适合各年龄段玩家。

游戏提供多种赛车和赛道选择，每种赛车拥有不同的速度和操控属性，每种赛道具有独特的视觉风格。随着游戏进行，速度会逐渐增加，考验玩家的反应能力和操作技巧。

1.2 核心功能

功能模块	功能描述	实现方式
赛车选择	5种不同类型赛车	枚举 + 选择界面
赛道选择	5种不同风格赛道	枚举 + 主题切换
游戏控制	点击/滑动控制赛车	GestureDetector
障碍系统	随机生成障碍车辆	Timer + 随机算法
金币收集	收集金币获得分数	碰撞检测
速度递增	随时间增加难度	动态速度调整
记录系统	游戏分数记录	数据模型存储

1.3 赛车类型

赛车	英文标识	颜色	速度	操控
运动跑车	sports	蓝色	★★★☆☆	★★★★☆
肌肉车	muscle	橙色	★★★★☆	★★☆☆☆
超级跑车	supercar	红色	★★★★★	★★★★★
F1赛车	f1	绿色	★★★★★★	★★★★★★
拉力赛车	rally	黄色	★★★★☆	★★★★★

1.4 赛道类型

赛道	英文标识	背景色	道路色	风格
城市赛道	city	深蓝色	灰蓝色	都市夜景
沙漠赛道	desert	暗黄色	土黄色	荒漠公路
森林赛道	forest	深绿色	墨绿色	林间小道
山地赛道	mountain	棕色	土棕色	山区公路
夜间赛道	night	深黑色	深灰色	午夜狂飙

1.5 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	setState	-
目标平台	鸿蒙OS	API 21+

1.6 项目结构

复制代码

lib/
└── main_racing_game.dart
    ├── RacingGameApp            # 应用入口
    ├── CarType                  # 赛车类型枚举
    ├── TrackType                # 赛道类型枚举
    ├── GameRecord               # 游戏记录模型
    ├── MainMenuPage             # 主菜单页面
    ├── CarSelectPage            # 赛车选择页面
    ├── GamePage                 # 游戏主页面
    ├── RoadPainter              # 道路绘制器
    └── RecordsPage              # 记录页面

二、系统架构

2.1 整体架构图

Game Logic
Data Layer
Presentation Layer
主菜单页
赛车选择页
游戏页面
记录页面
CarType

赛车枚举
TrackType

赛道枚举
GameRecord

记录模型
游戏循环

_gameTimer
碰撞检测

_checkCollision
障碍生成

_spawnObstacle
金币生成

_spawnCoin

2.2 类图设计

navigates
starts game
uses
uses
creates
contains
RacingGameApp
+Widget build()
MainMenuPage
+Widget build()
-void _showHelp()
CarSelectPage
-CarType _selectedCar
-TrackType _selectedTrack
+Widget build()
GamePage
-double _carX
-double _speed
-int _score
-int _distance
-bool _gameOver
-List _obstacles
-List _coins
-Timer _gameTimer
+Widget build()
-void _startGame()
-void _updateGame()
-void _endGame()
-void _spawnObstacle()
-void _spawnCoin()
-bool _checkCollision()
<<enumeration>>
CarType
sports
muscle
supercar
f1
rally
+String name
+Color color
+int speed
+int handling
<<enumeration>>
TrackType
city
desert
forest
mountain
night
+String name
+Color backgroundColor
+Color roadColor
GameRecord
+String id
+int score
+int distance
+CarType carType
+TrackType trackType
+DateTime date

2.3 游戏流程图

碰撞障碍
无碰撞
收集
未收集
达到条件
未达到
是
否
开始游戏
选择赛车
选择赛道
游戏开始
游戏循环
更新位置
生成障碍
生成金币
碰撞检测
游戏结束
收集金币
加分
继续
速度递增
加速
显示结果
重新开始?
返回主菜单

2.4 碰撞检测流程

游戏状态金币列表障碍物列表碰撞检测游戏循环游戏状态金币列表障碍物列表碰撞检测游戏循环 alt [收集金币] alt [发生碰撞] [无碰撞] 遍历障碍物检测每个障碍计算边界框判断是否重叠触发游戏结束遍历金币检测每个金币增加分数

三、核心模块设计

3.1 数据模型设计

3.1.1 赛车类型枚举 (CarType)

dart 复制代码

enum CarType {
  sports,      // 运动跑车
  muscle,      // 肌肉车
  supercar,    // 超级跑车
  f1,          // F1赛车
  rally,       // 拉力赛车
}

extension CarTypeExtension on CarType {
  String get name;      // 中文名称
  Color get color;      // 赛车颜色
  int get speed;        // 速度属性(1-6)
  int get handling;     // 操控属性(1-6)
}

3.1.2 赛道类型枚举 (TrackType)

25% 20% 20% 20% 15% 赛道风格分布城市赛道沙漠赛道森林赛道山地赛道夜间赛道

赛道	背景色	道路色	视觉效果
城市	#1A1A2E	#333344	都市霓虹
沙漠	#2D2D0A	#4A4A2A	黄沙漫天
森林	#0A2D0A	#2A4A2A	绿树成荫
山地	#2D1A0A	#4A3A2A	崇山峻岭
夜间	#050510	#1A1A2A	星光璀璨

3.1.3 游戏记录模型 (GameRecord)

dart 复制代码

class GameRecord {
  final String id;                    // 唯一标识
  final int score;                    // 得分
  final int distance;                 // 行驶距离
  final CarType carType;              // 使用赛车
  final TrackType trackType;          // 使用赛道
  final DateTime date;                // 游戏日期
}

3.2 页面结构设计

3.2.1 主菜单页面

主菜单页
游戏标题
开始游戏按钮
游戏记录按钮
游戏说明按钮
赛车图标
中英文标题
跳转赛车选择
跳转记录页面
显示帮助弹窗

3.2.2 赛车选择页面

赛车选择页
赛车列表
属性显示
赛道选择
开始比赛按钮
横向滚动5种赛车
速度条
操控条
网格布局5种赛道

3.2.3 游戏主页面

点击暂停
继续游戏
碰撞障碍
显示结果
游戏初始化
游戏进行中
暂停
游戏结束

3.3 游戏逻辑设计

3.3.1 核心状态变量

dart 复制代码

class _GamePageState extends State<GamePage> with TickerProviderStateMixin {
  // 赛车位置
  double _carX = 0;
  
  // 游戏状态
  double _speed = 3;              // 当前速度
  int _score = 0;                 // 当前分数
  int _distance = 0;              // 行驶距离
  bool _gameOver = false;         // 游戏结束标志
  bool _paused = false;           // 暂停标志
  
  // 游戏对象
  final List<Map<String, dynamic>> _obstacles = [];  // 障碍物列表
  final List<Map<String, dynamic>> _coins = [];      // 金币列表
  
  // 定时器
  late Timer _gameTimer;          // 游戏主循环定时器
  late AnimationController _roadAnimationController; // 道路动画
}

3.3.2 游戏循环逻辑

dart 复制代码

void _updateGame() {
  setState(() {
    // 更新距离
    _distance++;
    
    // 每100距离加速
    if (_distance % 100 == 0) {
      _speed += 0.2;
      _score += 10;
    }
    
    // 更新障碍物位置
    for (var obstacle in _obstacles) {
      obstacle['y'] += _speed;
    }
    
    // 移除屏幕外的障碍物
    _obstacles.removeWhere((o) => o['y'] > 700);
    
    // 随机生成新障碍物
    if (_random.nextDouble() < 0.02) {
      _spawnObstacle();
    }
    
    // 碰撞检测
    for (var obstacle in _obstacles) {
      if (_checkCollision(obstacle)) {
        _endGame();
        return;
      }
    }
  });
}

四、UI设计规范

4.1 配色方案

应用采用深色主题设计，营造赛车游戏的紧张氛围：

颜色类型	色值	用途
主色	#F44336 (Red)	按钮、强调元素
背景色	#0A0A0A	页面背景
卡片背景	#1E1E1E	卡片、弹窗
文字主色	#FFFFFF	主要文字
文字次色	#B0BEC5	次要文字

赛车专属颜色：

dart 复制代码

// 运动跑车 - 蓝色
Colors.blue

// 肌肉车 - 橙色
Colors.orange

// 超级跑车 - 红色
Colors.red

// F1赛车 - 绿色
Colors.green

// 拉力赛车 - 黄色
Colors.yellow

4.2 字体规范

元素	字号	字重	颜色
游戏标题	48px	Bold	#FFFFFF
得分显示	18px	Bold	#FFFFFF
距离显示	18px	Bold	#FFFFFF
速度显示	12px	Regular	#FF5252
按钮文字	20px	Bold	#FFFFFF

4.3 组件规范

4.3.1 赛车卡片

复制代码

┌─────────────────────┐
│        🚗          │
│     运动跑车        │
│   速度: ★★★☆☆     │
│   操控: ★★★★☆     │
└─────────────────────┘

4.3.2 游戏界面布局

复制代码

┌─────────────────────────────────────────────────┐
│  得分: 1000                    150 m           │
│  速度: 3.5x                                     │
│                                                 │
│     │         🚗          │                    │
│     │    💰              │                    │
│     │         🚙         │                    │
│     │    🚙              │                    │
│     │         💰    🚗   │                    │
│     │                    │                    │
│     │         🚙         │                    │
│     │    🚗              │                    │
│     │         🚗         │   ← 玩家赛车       │
│     │              🚗    │                    │
│     │                    │                    │
└─────────────────────────────────────────────────┘

4.3.3 游戏结束弹窗

复制代码

┌─────────────────────────────────────────────────┐
│                                                 │
│              游戏结束                           │
│                                                 │
│              得分: 1500                        │
│              距离: 200 米                      │
│                                                 │
│         [再来一次]    [返回主菜单]             │
│                                                 │
└─────────────────────────────────────────────────┘

五、核心功能实现

5.1 游戏控制

dart 复制代码

void _moveCar(double delta) {
  setState(() {
    // 限制赛车在道路范围内移动
    _carX = (_carX + delta).clamp(
      -roadWidth / 2 + carWidth / 2,
      roadWidth / 2 - carWidth / 2
    );
  });
}

// GestureDetector 处理
GestureDetector(
  onHorizontalDragUpdate: (details) {
    _moveCar(details.delta.dx * 0.8);  // 滑动控制
  },
  onTapDown: (details) {
    final x = details.globalPosition.dx;
    if (x < screenWidth / 2) {
      _moveCar(-15);  // 点击左侧向左移动
    } else {
      _moveCar(15);   // 点击右侧向右移动
    }
  },
)

5.2 障碍物生成

dart 复制代码

void _spawnObstacle() {
  // 定义车道位置
  final lanes = [-0.6, -0.2, 0.2, 0.6];
  
  // 随机选择车道生成障碍物
  _obstacles.add({
    'x': lanes[_random.nextInt(lanes.length)],
    'y': -100.0,  // 从屏幕上方出现
    'type': _random.nextInt(3),  // 随机类型
  });
}

5.3 碰撞检测

dart 复制代码

bool _checkCollision(Map<String, dynamic> obstacle) {
  // 计算赛车边界
  final carLeft = _carX - carWidth / 2;
  final carRight = _carX + carWidth / 2;
  final carTop = 500.0;
  final carBottom = 500.0 + carHeight;

  // 计算障碍物边界
  final obsLeft = obstacle['x'] * roadWidth / 2 - obstacleWidth / 2;
  final obsRight = obstacle['x'] * roadWidth / 2 + obstacleWidth / 2;
  final obsTop = obstacle['y'];
  final obsBottom = obstacle['y'] + obstacleHeight;

  // 矩形碰撞检测
  return !(carRight < obsLeft ||
      carLeft > obsRight ||
      carBottom < obsTop ||
      carTop > obsBottom);
}

5.4 道路绘制

dart 复制代码

class RoadPainter extends CustomPainter {
  final double roadLeft;
  final double roadWidth;
  final Color roadColor;
  final double offset;

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制道路背景
    final roadPaint = Paint()..color = roadColor;
    canvas.drawRect(
      Rect.fromLTWH(roadLeft, 0, roadWidth, size.height),
      roadPaint,
    );

    // 绘制道路边界
    final borderPaint = Paint()
      ..color = Colors.red
      ..strokeWidth = 5;
    canvas.drawLine(
      Offset(roadLeft, 0),
      Offset(roadLeft, size.height),
      borderPaint,
    );

    // 绘制车道分隔线（虚线效果）
    for (double y = -50 + (offset % 50); y < size.height; y += 50) {
      canvas.drawLine(
        Offset(roadLeft + roadWidth / 2, y),
        Offset(roadLeft + roadWidth / 2, y + 25),
        linePaint,
      );
    }
  }
}

六、游戏机制

6.1 得分系统

得分来源
距离得分
金币得分
速度加成
每100距离 +10分
每个金币 +50分
速度越快分数越高

6.2 难度递增

距离	速度倍数	难度描述
0-100	3.0x	初始速度
100-200	3.2x	轻微加速
200-300	3.4x	中等加速
300-400	3.6x	较快加速
400+	持续增加	极限挑战

6.3 车道系统

道路宽度 200px
车道1: -0.6
车道2: -0.2
车道3: 0.2
车道4: 0.6
玩家赛车
可在车道间自由移动
障碍物
随机出现在某一车道
金币
随机出现在某一车道

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 核心游戏赛车选择赛道选择道具系统排行榜成就系统多人对战自定义赛车云端存档 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本赛车游戏开发计划

7.2 功能扩展建议

7.2.1 道具系统

游戏道具增强体验：

护盾：免疫一次碰撞
加速：短时间内加速冲刺
磁铁：自动吸引附近金币
减速：暂时降低游戏速度

7.2.2 成就系统

解锁游戏成就：

首次游戏
行驶1000米
收集100金币
连续游戏7天

7.2.3 多人对战

实时竞技功能：

匹配对手
实时竞速
排位积分

八、注意事项

8.1 开发注意事项

Timer管理：游戏结束时及时取消Timer
碰撞检测：使用矩形碰撞，注意边界计算
性能优化：移除屏幕外的游戏对象
状态管理：游戏状态变更时更新UI

8.2 常见问题

问题	原因	解决方案
赛车越界	位置未限制	使用clamp限制范围
碰撞不准	边界计算错误	检查碰撞检测逻辑
游戏卡顿	对象未清理	移除屏幕外对象

8.3 游戏提示

🏎️ 游戏小贴士 🏎️

保持专注，提前预判障碍物位置。

收集金币可以获得额外分数。

速度会随时间增加，做好准备。

选择适合自己风格的赛车。

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

9.2 运行命令

bash 复制代码

# 查看可用设备
flutter devices

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_racing_game.dart

# 运行到Windows
flutter run -d windows -t lib/main_racing_game.dart

# 代码分析
flutter analyze lib/main_racing_game.dart

十、总结

赛车游戏应用通过简洁的操控方式、丰富的赛车选择和多样的赛道风格，为玩家提供了一个刺激有趣的竞速体验。游戏采用深色主题设计，营造紧张刺激的赛车氛围；核心玩法简单易懂，适合各年龄段玩家；难度递增机制保证游戏的挑战性和可玩性。

核心功能涵盖5种赛车和5种赛道，每种赛车拥有独特的速度和操控属性，每种赛道具有独特的视觉风格。游戏中的障碍物随机生成，金币收集增加趣味性，速度递增机制提供持续的挑战。

通过本游戏，希望能够为玩家带来紧张刺激的赛车体验，在指尖感受速度与激情的魅力。

速度与激情，尽在指尖