Flutter 框架跨平台鸿蒙开发 - 拼图游戏应用

拼图游戏应用

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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

拼图游戏是一款经典的数字滑块益智游戏，玩家需要通过滑动方块，将打乱的数字按顺序排列。游戏以青色为主色调，传递清新、活力的品牌形象。

应用支持3×3、4×4、5×5三种难度，包含计时计步、图片选择、成就系统等功能，通过精美的动画效果和流畅的交互体验，为玩家带来愉悦的游戏感受。

1.2 核心功能

功能模块	功能描述	实现方式
滑动拼图	数字滑块游戏	GridView
难度选择	3×3、4×4、5×5	SegmentedButton
计时计步	记录游戏时间和步数	Timer
图片选择	多种渐变图片	图片库
成就系统	游戏成就解锁	成就列表

1.3 游戏规则

规则名称	规则描述
滑动操作	点击空白格相邻的方块进行滑动
胜利条件	将所有数字按顺序排列
计分规则	根据步数和时间评定星级

1.4 技术栈

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

1.5 项目结构

复制代码

lib/
└── main_puzzle.dart
    ├── PuzzleGameApp         # 应用入口
    ├── PuzzleImage           # 图片数据模型
    ├── MainPage              # 主页面（底部导航）
    ├── GamePage              # 游戏页面
    ├── GalleryPage           # 图片库页面
    ├── RecordsPage           # 记录页面
    └── ProfilePage           # 个人中心页面

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

MainPage
游戏页面
图片库
记录页面
个人中心
游戏棋盘
难度选择
计时计步
开始游戏
图片列表
图片选择
记录列表
记录详情
成就系统
设置
打乱算法
胜利检测
星级计算
PuzzleImage

图片模型

2.2 类图设计

contains
uses
PuzzleGameApp
+Widget build()
PuzzleImage
+String id
+String name
+String emoji
+List<Color> colors
+int difficulty
MainPage
-int _currentIndex
+Widget build()
GamePage
-int _gridSize
-List<int> _tiles
-int _emptyIndex
-bool _isPlaying
-int _moves
-int _seconds
+void _initGame()
+void _shuffleTiles()
+void _onTileTap()
+bool _checkWin()

2.3 游戏流程图

相邻空白
不相邻
否
是
是
否
开始游戏
选择难度
打乱方块
显示棋盘
点击方块
滑动方块
更新步数
是否胜利?
显示结果
是否继续?
返回主页

2.4 打乱算法流程

否
是
初始化有序数组
定位空白格
循环N次
获取空白格邻居
随机选择邻居
交换位置
循环结束?
返回打乱数组

三、核心模块设计

3.1 数据模型设计

3.1.1 图片模型 (PuzzleImage)

dart 复制代码

class PuzzleImage {
  final String id;              // 唯一标识
  final String name;            // 图片名称
  final String emoji;           // 表情图标
  final List<Color> colors;     // 渐变颜色
  final int difficulty;         // 难度等级
}

3.1.2 图片列表

应用包含8种渐变图片：

ID	名称	表情	难度
1	彩虹	🌈	★
2	日落	🌅	★★
3	森林	🌲	★★
4	海洋	🌊	★★★
5	星空	🌌	★★★
6	花园	🌸	★★
7	沙漠	🏜️	★★
8	雪山	🏔️	★★★

3.2 游戏算法设计

3.2.1 打乱算法

dart 复制代码

void _shuffleTiles() {
  _tiles = List.generate(_gridSize * _gridSize, (i) => i);
  _emptyIndex = _tiles.length - 1;
  
  final random = math.Random();
  for (int i = 0; i < _gridSize * _gridSize * 20; i++) {
    final neighbors = _getNeighbors(_emptyIndex);
    if (neighbors.isNotEmpty) {
      final swapIndex = neighbors[random.nextInt(neighbors.length)];
      _swapTiles(_emptyIndex, swapIndex);
    }
  }
}

3.2.2 胜利检测

dart 复制代码

bool _checkWin() {
  for (int i = 0; i < _tiles.length; i++) {
    if (_tiles[i] != i) return false;
  }
  return true;
}

3.2.3 邻居获取

dart 复制代码

List<int> _getNeighbors(int index) {
  final neighbors = <int>[];
  final row = index ~/ _gridSize;
  final col = index % _gridSize;
  
  if (row > 0) neighbors.add(index - _gridSize);     // 上
  if (row < _gridSize - 1) neighbors.add(index + _gridSize); // 下
  if (col > 0) neighbors.add(index - 1);              // 左
  if (col < _gridSize - 1) neighbors.add(index + 1);  // 右
  
  return neighbors;
}

3.3 星级计算

星级={3星步数<网格数×22星步数<网格数×31星其他情况星级 = \begin{cases} 3星 & 步数 < 网格数 \times 2 \\ 2星 & 步数 < 网格数 \times 3 \\ 1星 & 其他情况 \end{cases} 星级=⎩ ⎨ ⎧3星2星1星步数<网格数×2步数<网格数×3其他情况

四、UI设计规范

4.1 配色方案

应用采用青色为主色调，传递清新、活力的品牌形象：

颜色类型	色值	用途
主色	#00BCD4 (Cyan)	导航、强调元素
渐变起始	#00BCD4	头部渐变
渐变结束	#4DD0E1	头部渐变
成功色	#4CAF50	完成标记
警告色	#FF9800	时间警告
背景色	#F5F5F5	页面背景

4.2 字体规范

元素	字号	字重	颜色
页面标题	20px	Medium	#000000
步数数字	16px	Bold	#FFFFFF
方块数字	14px	Bold	#FFFFFF
描述文字	12px	Regular	#757575

4.3 组件规范

4.3.1 游戏方块

复制代码

┌─────────────────────┐
│                     │
│         1          │
│                     │
│              [✓]   │
│                     │
└─────────────────────┘

4.3.2 游戏棋盘

复制代码

┌─────────────────────────────────────────┐
│  ┌────┐  ┌────┐  ┌────┐               │
│  │ 1  │  │ 2  │  │ 3  │               │
│  └────┘  └────┘  └────┘               │
│  ┌────┐  ┌────┐  ┌────┐               │
│  │ 4  │  │ 5  │  │ 6  │               │
│  └────┘  └────┘  └────┘               │
│  ┌────┐  ┌────┐  ┌────┐               │
│  │ 7  │  │ 8  │  │    │               │
│  └────┘  └────┘  └────┘               │
└─────────────────────────────────────────┘

4.3.3 难度选择器

复制代码

┌─────────────────────────────────────────┐
│   [3×3]    │    [4×4]    │    [5×5]    │
└─────────────────────────────────────────┘

五、核心功能实现

5.1 棋盘初始化实现

dart 复制代码

void _initGame() {
  _tiles = List.generate(_gridSize * _gridSize, (i) => i);
  _emptyIndex = _tiles.length - 1;
  _moves = 0;
  _seconds = 0;
  _isPlaying = false;
}

5.2 方块滑动实现

dart 复制代码

void _onTileTap(int index) {
  if (!_isPlaying) return;
  if (index == _emptyIndex) return;
  
  final neighbors = _getNeighbors(_emptyIndex);
  if (neighbors.contains(index)) {
    setState(() {
      _swapTiles(index, _emptyIndex);
      _moves++;
      
      if (_checkWin()) {
        _isPlaying = false;
        _showWinDialog();
      }
    });
  }
}

5.3 方块交换实现

dart 复制代码

void _swapTiles(int i, int j) {
  final temp = _tiles[i];
  _tiles[i] = _tiles[j];
  _tiles[j] = temp;
  if (_tiles[i] == _gridSize * _gridSize - 1) {
    _emptyIndex = i;
  } else if (_tiles[j] == _gridSize * _gridSize - 1) {
    _emptyIndex = j;
  }
}

5.4 方块渲染实现

dart 复制代码

Widget _buildTile(int tile, double size, int originalRow, int originalCol) {
  final colors = _selectedImage?.colors ?? [Colors.blue, Colors.cyan];
  final colorIndex = (originalRow * _gridSize + originalCol) % colors.length;
  final baseColor = colors[colorIndex];
  
  return Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [baseColor.withValues(alpha: 0.8), baseColor],
      ),
      borderRadius: BorderRadius.circular(8),
    ),
    child: Stack(
      children: [
        if (_showNumbers)
          Positioned(
            right: 6,
            bottom: 4,
            child: Text('${tile + 1}'),
          ),
      ],
    ),
  );
}

六、交互设计

6.1 方块点击流程

动画状态棋盘用户动画状态棋盘用户 alt [胜利] alt [相邻空白] [不相邻] 点击方块检查是否相邻空白播放滑动动画更新方块位置增加步数检查是否胜利显示胜利弹窗无响应

6.2 难度选择流程

点击3×3
点击4×4
点击5×5
确认
确认
确认
打乱方块
选择难度
3x3
4x4
5x5
初始化
游戏中

6.3 成就解锁流程

满足
不满足
完成游戏
检查成就条件
解锁成就
保持锁定
显示解锁提示
更新成就列表

七、扩展功能规划

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 多人对战模式

增强社交属性：

实时对战
轮流挑战
排名竞争

7.2.3 关卡编辑器

自定义关卡：

自定义布局
设置障碍物
分享关卡

八、注意事项

8.1 开发注意事项

打乱算法：确保打乱后一定可以还原
动画流畅：方块滑动动画需要流畅
状态同步：空白格位置需要及时更新
性能优化：大量方块时注意渲染性能

8.2 常见问题

问题	原因	解决方案
无法还原	打乱算法有问题	使用滑动打乱算法
动画卡顿	重绘过于频繁	使用AnimatedPositioned
点击无响应	未检测邻居	检查邻居判断逻辑
位置错乱	索引计算错误	检查行列计算

8.3 使用提示

🧩 拼图游戏技巧 🧩

从角开始：先完成角落的方块。

按行处理：逐行完成，避免混乱。

观察全局：注意空白格的位置。

保持耐心：不要急于求成。

九、运行说明

9.1 环境要求

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

9.2 运行命令

bash 复制代码

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_puzzle.dart --web-port 8103

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

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

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

十、总结

拼图游戏通过经典的滑动玩法，为玩家提供了一个休闲益智的娱乐体验。游戏支持3×3、4×4、5×5三种难度，玩家需要在最少的步数和时间内完成拼图。

核心功能涵盖滑动拼图、难度选择、计时计步、图片选择、成就系统五大模块。滑动拼图采用数字滑块玩法；难度选择支持三种网格大小；计时计步记录游戏过程；图片选择提供多种渐变图片；成就系统增加游戏粘性。

游戏采用Material Design 3设计规范，以青色为主色调，界面清新简洁。通过本游戏，希望能够为玩家带来愉悦的休闲时光。

挑战自我，享受乐趣