🚀运行效果展示

在这里插入图片描述
在这里插入图片描述

Flutter框架跨平台鸿蒙开发——成语接龙游戏的开发流程

📝 前言

随着移动互联网的普及，手机游戏已成为人们日常娱乐的重要方式。成语接龙作为中国传统文化的重要组成部分，不仅具有娱乐性，还能帮助玩家丰富词汇量，提高语言表达能力。将传统游戏与现代技术结合，开发一款跨平台的成语接龙APP，具有重要的文化传播和教育意义。

Flutter作为Google推出的跨平台UI框架，以其"一次编写，处处运行"的优势，成为移动游戏开发的理想选择。而华为的鸿蒙系统作为一款全新的分布式操作系统，也在不断扩大其市场份额。将Flutter与鸿蒙系统结合，开发跨平台的成语接龙游戏，不仅可以提高开发效率，降低维护成本，还可以为用户提供统一的游戏体验。

本文将详细介绍如何使用Flutter框架开发一款跨平台的成语接龙游戏，并在鸿蒙系统上运行。

🎮 游戏介绍

功能概述

成语接龙游戏是一款基于成语文化的益智游戏，主要功能包括：

  • 随机成语生成：系统随机生成起始成语
  • 成语验证：验证玩家输入的成语是否有效
  • 接龙规则检查：检查成语是否符合接龙规则
  • 成语使用记录：记录游戏中已经使用过的成语
  • 实时分数计算：根据游戏回合和成语长度计算分数
  • 游戏状态管理：管理游戏的开始、进行和结束状态
  • 成语释义展示：展示当前成语的释义、拼音、出处和用法
  • 成语历史记录：记录游戏中使用过的所有成语

应用场景

  • 日常娱乐：休闲时间的益智游戏
  • 教育学习：帮助学生和语言学习者丰富词汇量
  • 文化传播：传播中国传统文化，推广成语知识
  • 亲子互动：家长和孩子一起玩游戏，增进亲子关系
  • 团队建设：企业或组织的团建活动

技术栈

  • 前端框架：Flutter 3.6.2
  • 开发语言：Dart
  • 运行平台：HarmonyOS API 9+
  • 状态管理：原生状态管理
  • 数据存储：内存存储（可扩展为SQLite或云端存储）

🛠️ 开发环境搭建

系统要求

  • 操作系统：Windows 11
  • Flutter版本：3.6.2或更高
  • HarmonyOS SDK：API Version 9或更高
  • 开发工具：DevEco Studio 3.1+，VS Code

环境配置

  1. 安装Flutter SDK：从Flutter官网下载并安装Flutter SDK
  2. 配置鸿蒙开发环境：安装DevEco Studio，并配置HarmonyOS SDK
  3. 创建Flutter项目：使用flutter create命令创建Flutter项目
  4. 配置鸿蒙支持：在项目中添加鸿蒙支持，配置相关依赖

📁 项目结构设计

lib/
├── idiom_solitaire/
│   ├── models/
│   │   └── idiom_model.dart       # 成语数据模型和游戏状态模型
│   ├── services/
│   │   └── idiom_solitaire_service.dart # 游戏逻辑服务
│   └── screens/
│       └── idiom_solitaire_screen.dart  # 游戏界面
└── screens/
    └── home_screen.dart             # 应用首页，功能入口

🔧 核心功能实现

1. 数据模型设计

数据模型是应用的基础，用于管理成语数据和游戏状态：

/// 成语数据模型
class Idiom {
  /// 成语内容
  final String content;

  /// 成语拼音
  final String pinyin;

  /// 成语释义
  final String explanation;

  /// 成语出处
  final String source;

  /// 成语用法
  final String usage;

  /// 构造函数
  const Idiom({
    required this.content,
    required this.pinyin,
    required this.explanation,
    required this.source,
    required this.usage,
  });

  /// 获取成语的第一个字
  String get firstChar => content.isNotEmpty ? content[0] : '';

  /// 获取成语的最后一个字
  String get lastChar => content.isNotEmpty ? content[content.length - 1] : '';
}

/// 成语接龙游戏状态模型
class IdiomSolitaireGame {
  /// 当前游戏状态
  final GameStatus status;

  /// 成语列表
  final List<Idiom> idioms;

  /// 当前分数
  final int score;

  /// 游戏回合
  final int round;

  /// 构造函数
  const IdiomSolitaireGame({
    required this.status,
    required this.idioms,
    required this.score,
    required this.round,
  });

  /// 复制方法，用于更新游戏状态
  IdiomSolitaireGame copyWith({
    GameStatus? status,
    List<Idiom>? idioms,
    int? score,
    int? round,
  }) {
    return IdiomSolitaireGame(
      status: status ?? this.status,
      idioms: idioms ?? this.idioms,
      score: score ?? this.score,
      round: round ?? this.round,
    );
  }
}

/// 游戏状态枚举
enum GameStatus {
  /// 游戏准备中
  preparing,
  /// 游戏进行中
  playing,
  /// 游戏结束
  ended,
}

2. 游戏服务实现

游戏服务负责处理游戏的核心逻辑，包括成语验证、接龙规则检查、游戏状态管理等：

/// 成语接龙游戏服务
class IdiomSolitaireService {
  /// 成语数据库
  late List<Idiom> _idiomDatabase;

  /// 游戏中已经使用过的成语
  final Set<String> _usedIdioms = {};

  /// 构造函数
  IdiomSolitaireService() {
    _initializeIdiomDatabase();
  }

  /// 初始化成语数据库
  void _initializeIdiomDatabase() {
    // 示例成语数据，实际项目中可以扩展为更完整的成语数据库
    _idiomDatabase = [
      const Idiom(
        content: '一心一意',
        pinyin: 'yī xīn yī yì',
        explanation: '形容做事专心一意，一门心思地只做一件事。',
        source: '《三国志·魏志·杜恕传》裴松之注引《杜氏新书》：“故推一心，任一意，直而行之耳。”',
        usage: '作定语、状语；指专注',
      ),
      // 更多成语数据...
    ];
  }

  /// 验证成语是否存在
  bool isValidIdiom(String content) {
    return _idiomDatabase.any((idiom) => idiom.content == content);
  }

  /// 检查成语是否符合接龙规则
  bool checkSolitaireRule(String previousIdiom, String currentIdiom) {
    if (previousIdiom.isEmpty || currentIdiom.isEmpty) {
      return false;
    }

    // 检查最后一个字和第一个字是否相同
    final String lastChar = previousIdiom[previousIdiom.length - 1];
    final String firstChar = currentIdiom[0];

    return lastChar == firstChar;
  }

  /// 检查成语是否已经使用过
  bool isIdiomUsed(String content) {
    return _usedIdioms.contains(content);
  }

  /// 生成随机成语作为游戏起点
  Idiom generateRandomIdiom() {
    // 从成语数据库中随机选择一个成语
    final int randomIndex = DateTime.now().millisecondsSinceEpoch % _idiomDatabase.length;
    final Idiom randomIdiom = _idiomDatabase[randomIndex];

    // 标记为已使用
    markIdiomAsUsed(randomIdiom.content);

    return randomIdiom;
  }

  /// 检查玩家输入的成语是否有效
  bool validatePlayerIdiom(String previousIdiomContent, String playerInput) {
    // 1. 检查成语是否存在
    if (!isValidIdiom(playerInput)) {
      return false;
    }

    // 2. 检查成语是否已经使用过
    if (isIdiomUsed(playerInput)) {
      return false;
    }

    // 3. 检查是否符合接龙规则
    if (!checkSolitaireRule(previousIdiomContent, playerInput)) {
      return false;
    }

    return true;
  }

  /// 计算游戏分数
  int calculateScore(int round, int idiomLength) {
    // 分数计算规则：回合数 * 成语长度 * 10
    return round * idiomLength * 10;
  }
}

3. UI界面实现

UI界面是用户与游戏交互的桥梁，包括游戏开始、进行和结束三个状态的界面：

3.1 游戏开始界面
/// 游戏开始界面
Widget _buildGameStartScreen() {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      const Text(
        '成语接龙',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 36,
          fontWeight: FontWeight.bold,
          color: Colors.blue,
        ),
      ),
      const SizedBox(height: 40),
      Card(
        elevation: 4,
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              const Text(
                '游戏规则',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 20),
              const Text(
                '1. 游戏开始时，系统会随机生成一个成语\n'
                '2. 玩家需要根据成语的最后一个字接出新的成语\n'
                '3. 接出的成语必须是有效成语，且未被使用过\n'
                '4. 每次接龙成功得10分，回合数越多，分数越高\n'
                '5. 当无法接出新的成语时，游戏结束',
                style: TextStyle(fontSize: 16),
                textAlign: TextAlign.left,
              ),
            ],
          ),
        ),
      ),
      const SizedBox(height: 40),
      ElevatedButton(
        onPressed: _startGame,
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.symmetric(vertical: 16),
          textStyle: const TextStyle(fontSize: 20),
        ),
        child: const Text('开始游戏'),
      ),
    ],
  );
}
3.2 游戏进行界面
/// 游戏进行界面
Widget _buildGamePlayingScreen() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      // 游戏状态信息
      Card(
        elevation: 2,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('回合：${_gameState.round}'),
              Text('分数：${_gameState.score}'),
              Text('成语数量：${_gameState.idioms.length}'),
            ],
          ),
        ),
      ),
      // 当前成语信息
      Card(
        elevation: 4,
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              const Text(
                '当前成语',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 20),
              Text(
                _currentIdiom.content,
                style: const TextStyle(
                  fontSize: 48,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
              const SizedBox(height: 10),
              Text(
                _currentIdiom.pinyin,
                style: const TextStyle(fontSize: 18, color: Colors.grey),
              ),
              const SizedBox(height: 20),
              Text(
                _currentIdiom.explanation,
                style: const TextStyle(fontSize: 16),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
      // 玩家输入区域
      Row(
        children: [
          Expanded(
            child: TextField(
              controller: _playerInputController,
              decoration: const InputDecoration(
                labelText: '请输入成语',
                border: OutlineInputBorder(),
                hintText: '例如：一心一意',
              ),
              style: const TextStyle(fontSize: 18),
              onSubmitted: (_) => _handlePlayerInput(),
            ),
          ),
          const SizedBox(width: 15),
          ElevatedButton(
            onPressed: _handlePlayerInput,
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
              textStyle: const TextStyle(fontSize: 18),
            ),
            child: const Text('接龙'),
          ),
        ],
      ),
      // 成语历史记录
      Expanded(
        child: Card(
          elevation: 2,
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  '成语历史',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 10),
                Expanded(
                  child: ListView.builder(
                    itemCount: _gameState.idioms.length,
                    itemBuilder: (context, index) {
                      final Idiom idiom = _gameState.idioms[index];
                      return ListTile(
                        leading: CircleAvatar(
                          child: Text('${index + 1}'),
                        ),
                        title: Text(idiom.content),
                        subtitle: Text(idiom.pinyin),
                        trailing: Text(idiom.lastChar),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  );
}

📊 应用流程图

准备中

无效

有效

有

无

再玩一次

返回首页

用户打开应用

进入首页

点击成语接龙

进入成语接龙界面

游戏状态

显示游戏规则

点击开始游戏

生成起始成语

进入游戏进行状态

显示当前成语

玩家输入成语

验证成语

显示错误信息

更新当前成语

计算分数

更新游戏状态

检查是否还有可接龙的成语

游戏结束

显示最终得分

选择操作

🎯 核心技术点

1. 成语验证和接龙规则检查

成语验证和接龙规则检查是成语接龙游戏的核心逻辑，确保游戏的公平性和趣味性：

/// 检查玩家输入的成语是否有效
bool validatePlayerIdiom(String previousIdiomContent, String playerInput) {
  // 1. 检查成语是否存在
  if (!isValidIdiom(playerInput)) {
    return false;
  }

  // 2. 检查成语是否已经使用过
  if (isIdiomUsed(playerInput)) {
    return false;
  }

  // 3. 检查是否符合接龙规则
  if (!checkSolitaireRule(previousIdiomContent, playerInput)) {
    return false;
  }

  return true;
}

2. 游戏状态管理

游戏状态管理用于管理游戏的开始、进行和结束状态，确保游戏流程的正确性：

/// 重置游戏
void _resetGame() {
  // 重置游戏服务
  _idiomService.resetGame();

  // 生成起始成语
  _currentIdiom = _idiomService.generateRandomIdiom();

  // 初始化游戏状态
  _gameState = const IdiomSolitaireGame(
    status: GameStatus.preparing,
    idioms: [],
    score: 0,
    round: 1,
  );

  // 清空输入框和提示信息
  _playerInputController.clear();
  _gameMessage = '游戏开始，请根据提示输入成语！';

  // 更新状态
  setState(() {});
}

/// 开始游戏
void _startGame() {
  setState(() {
    _gameState = _gameState.copyWith(
      status: GameStatus.playing,
      idioms: [_currentIdiom],
    );
  });
}

3. 实时分数计算

实时分数计算根据游戏回合和成语长度计算分数，提高游戏的竞争性和趣味性：

/// 计算游戏分数
int calculateScore(int round, int idiomLength) {
  // 分数计算规则：回合数 * 成语长度 * 10
  return round * idiomLength * 10;
}

/// 处理玩家输入
void _handlePlayerInput() {
  // ... 验证玩家输入 ...

  // 计算分数
  final int newScore = _gameState.score +
      _idiomService.calculateScore(_gameState.round, playerInput.length);

  // 更新游戏状态
  setState(() {
    // ... 更新当前成语和游戏状态 ...
    _gameState = _gameState.copyWith(
      idioms: [..._gameState.idioms, playerIdiom],
      score: newScore,
      round: _gameState.round + 1,
    );
    // ... 更新提示信息 ...
  });
}

遇到的问题及解决方案

  1. 成语数据库构建

    • 问题：成语数据量不足，影响游戏体验
    • 解决方案：扩展成语数据库，添加更多的成语数据

  2. 游戏性能优化

    • 问题：游戏运行过程中出现卡顿
    • 解决方案：优化状态更新逻辑，减少不必要的重建

  3. 用户体验改进

    • 问题：游戏提示信息不够友好
    • 解决方案：添加更详细的游戏提示，如成语提示、错误原因说明等

  4. 跨平台适配

    • 问题：在不同设备上的显示效果不一致
    • 解决方案：使用Flutter的响应式布局，确保在不同尺寸的设备上都有良好的显示效果

🎉 总结

通过本次开发，我们成功实现了一款功能完整的成语接龙APP，并在鸿蒙系统上运行。本次开发的主要收获包括：

  1. Flutter跨平台开发优势：使用Flutter框架可以快速开发跨平台应用，提高开发效率，降低维护成本。

  2. 鸿蒙系统适配：成功将Flutter应用适配到鸿蒙系统，验证了Flutter在鸿蒙平台上的可行性。

  3. 游戏逻辑设计：学习了如何设计清晰的游戏逻辑，包括规则验证、状态管理和分数计算等。

  4. UI/UX设计：注重用户体验设计，提供直观、易用的界面，增强游戏的趣味性和可玩性。

  5. 传统文化与现代技术结合：将传统成语接龙游戏与现代移动技术结合，传播中国传统文化，具有重要的文化意义。

未来，我们可以进一步完善这款成语接龙APP，添加更多功能，如：

  • 扩展成语数据库，添加更多的成语
  • 实现成语提示功能，帮助用户更好地进行游戏
  • 添加排行榜功能，记录用户的最高分数
  • 实现成语收藏功能，方便用户保存喜欢的成语
  • 添加 multiplayer 功能，支持多人在线对战
  • 实现语音输入功能，支持语音输入成语
  • 添加
    成语故事功能，讲述成语背后的故事

通过不断优化和完善，这款成语接龙APP可以更好地满足用户的需求，成为一款受欢迎的益智游戏，同时传播中国传统文化，推广成语知识。

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

# flutter # harmonyos # 游戏 # 鸿蒙
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

spring security中httpSecurity构建DefaultSecurityFilterChain逻辑

是 Spring Security 中用于配置 Web 层安全的核心类，可以把它理解为整个安全过滤器链的“总设计师”和“建造指挥”。我们日常编写的等配置，本质上都是在与这个“总设计师”交互，指挥它如何组装和配置最终的安全防线——。: 是一个建筑总包公司。它不直接砌砖，但它拥有所有施工队（）的名单和联系方式，并持有所有建筑材料（）的仓库钥匙。: 是各个专业施工队（如水电队、泥工队、油漆队）。每个施工

avatar AtomGit开源社区
cover

使用 CodeArts 码道零代码部署 JiuwenClaw 一键对接鸿蒙小艺：从部署到打通记忆系统联动优化，让小艺真正 “越用越懂你”

avatar AtomGit开源社区
cover

【ARM汇编】0x01_ARM和C混合编程实现基本运算

avatar AtomGit开源社区