Flutter 框架跨平台鸿蒙开发 - 起床战争

起床战争应用

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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

起床战争是一款趣味闹钟应用，核心创意在于用户必须完成指定的小游戏才能关闭闹钟。这一设计理念源于一个简单而有效的观察：普通闹钟太容易被随手关掉，导致用户在半梦半醒间就又睡着了。通过强制用户完成需要动脑的小游戏，确保用户真正清醒后才能关闭闹钟，从而提高起床成功率。

应用以橙红色为主色调，象征活力与热情，搭配深色背景营造专注的游戏氛围。五种不同类型的游戏满足不同用户的偏好，三级难度设置让用户可以根据自己的"起床困难程度"进行选择。

1.2 核心功能

功能模块	功能描述	实现方式
闹钟管理	添加、编辑、删除闹钟	列表 + 底部弹窗
时间选择	设置闹钟时间	showTimePicker
重复设置	设置工作日/周末重复	周选择器
游戏选择	选择关闭闹钟的游戏类型	卡片选择器
难度设置	设置游戏难度等级	三级难度条
数学游戏	解数学题关闭闹钟	随机算术题
记忆游戏	翻牌配对游戏	翻牌记忆
滑块拼图	数字滑块还原	滑块拼图
颜色匹配	选择正确颜色	颜色识别
摇晃游戏	摇晃手机指定次数	点击模拟

1.3 游戏类型

序号	游戏名称	图标	游戏描述
1	数学题	calculate	解开数学运算题
2	记忆翻牌	psychology	找出所有配对卡片
3	滑块拼图	grid_on	还原数字顺序
4	颜色匹配	palette	选择正确颜色
5	疯狂摇晃	vibration	摇晃手机N次

1.4 技术栈

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

1.5 项目结构

复制代码

lib/
└── main_wake_up_war.dart
    ├── WakeUpWarApp           # 应用入口
    ├── GameType               # 游戏类型枚举
    ├── Alarm                  # 闹钟数据模型
    ├── WakeUpWarHomePage      # 主页面
    ├── AddAlarmPage           # 添加/编辑闹钟页面
    ├── AlarmGameScreen        # 闹钟游戏屏幕
    ├── MathGame               # 数学题游戏
    ├── MemoryGame             # 记忆翻牌游戏
    ├── SliderGame             # 滑块拼图游戏
    ├── ColorGame              # 颜色匹配游戏
    └── ShakeGame              # 摇晃游戏

二、系统架构

2.1 整体架构图

Business Logic
Data Layer
Presentation Layer
WakeUpWarHomePage
闹钟列表
添加闹钟
测试闹钟
AddAlarmPage
时间选择
重复设置
游戏选择
难度设置
AlarmGameScreen
MathGame
MemoryGame
SliderGame
ColorGame
ShakeGame
Alarm

闹钟模型
GameType

游戏类型枚举
闹钟管理
闹钟检测
游戏逻辑

2.2 类图设计

WakeUpWarApp
+Widget build()
WakeUpWarHomePage
-List<Alarm> _alarms
-bool _isAlarmRinging
-Alarm? _ringingAlarm
-Timer? _alarmTimer
+void _loadAlarms()
+void _startAlarmCheck()
+void _checkAlarm()
+void _triggerAlarm()
+void _addAlarm()
+void _editAlarm()
+void _deleteAlarm()
Alarm
-String id
-TimeOfDay time
-bool enabled
-String label
-List<bool> repeatDays
-GameType gameType
-int difficulty
+String timeString
+String repeatString
+Alarm copyWith()
<<enumeration>>
GameType
math
memory
slider
color
shake
AlarmGameScreen
-Alarm alarm
-bool _gameCompleted
+void _onGameComplete()
MathGame
-int _num1
-int _num2
-String _operator
-int _correctAnswer
-int _questionsAnswered
+void _generateQuestion()
+void _checkAnswer()
MemoryGame
-List<String> _cards
-List<bool> _revealed
-List<int> _matched
-int _firstSelected
+void _initGame()
+void _onCardTap()
SliderGame
-List<int> _tiles
-int _emptyIndex
-int _moves
+void _initGame()
+bool _isSolvable()
+bool _isSolved()
+void _onTileTap()

2.3 页面导航流程

添加闹钟
编辑闹钟
删除闹钟
测试闹钟
数学题
记忆翻牌
滑块拼图
颜色匹配
疯狂摇晃
应用启动
主页面
用户操作
AddAlarmPage
选择时间
设置重复
选择游戏
设置难度
保存闹钟
确认删除对话框
AlarmGameScreen
游戏类型
MathGame
MemoryGame
SliderGame
ColorGame
ShakeGame
完成游戏

2.4 数据流向图

游戏屏幕闹钟检测添加页面主页面用户游戏屏幕闹钟检测添加页面主页面用户 loop [每秒检测] 点击添加闹钟打开添加页面设置闹钟参数验证输入返回Alarm对象添加到闹钟列表检查当前时间触发闹钟显示游戏界面完成游戏关闭闹钟

三、核心模块设计

3.1 数据模型设计

闹钟模型 (Alarm)

dart 复制代码

class Alarm {
  final String id;              // 唯一标识
  final TimeOfDay time;         // 闹钟时间
  final bool enabled;           // 是否启用
  final String label;           // 闹钟标签
  final List<bool> repeatDays;  // 重复日期（周一到周日）
  final GameType gameType;      // 游戏类型
  final int difficulty;         // 难度等级（1-3）
  
  // 计算属性
  String get timeString;        // 格式化时间字符串
  String get repeatString;      // 重复描述字符串
}

游戏类型枚举 (GameType)

dart 复制代码

enum GameType {
  math('数学题', Icons.calculate, '解开数学题'),
  memory('记忆翻牌', Icons.psychology, '找出所有配对'),
  slider('滑块拼图', Icons.grid_on, '还原数字顺序'),
  color('颜色匹配', Icons.palette, '选择正确颜色'),
  shake('疯狂摇晃', Icons.vibration, '摇晃手机N次');
  
  final String label;       // 游戏名称
  final IconData icon;      // 游戏图标
  final String description; // 游戏描述
}

3.2 页面结构设计

主页面布局

WakeUpWarHomePage
AppBar
闹钟列表
FloatingActionButton
标题
测试按钮
闹钟卡片
时间显示
开关按钮
标签信息
游戏类型
重复设置
添加闹钟按钮

添加闹钟页面布局

AddAlarmPage
时间选择器
标签输入
重复设置
游戏选择
难度设置
时间显示
点击修改
周一到周日选择
数学题卡片
记忆翻牌卡片
滑块拼图卡片
颜色匹配卡片
疯狂摇晃卡片
简单
中等
困难

3.3 游戏模块设计

数学题游戏流程

是
否
否
是
开始游戏
生成随机题目
显示题目
用户输入答案
答案正确?
题目计数+1
显示错误提示
完成所有题目?
游戏完成

记忆翻牌游戏流程

是
否
是
否
否
是
开始游戏
初始化卡片
用户点击卡片
第一张?
翻开卡片
翻开第二张
两张相同?
标记配对成功
延迟后翻回
所有配对完成?
游戏完成

四、UI设计规范

4.1 配色方案

应用以橙红色为主色调，象征活力与热情：

颜色类型	色值	用途
主色	#FF5722 (Deep Orange 500)	导航、强调元素
背景	#121212 (Grey 900)	主背景色
卡片背景	#1E1E1E (Grey 800)	卡片背景
禁用状态	#424242 (Grey 800)	禁用元素
成功色	#4CAF50 (Green)	完成提示
错误色	#F44336 (Red)	错误提示

4.2 字体规范

元素	字号	字重	颜色
时间显示	48px	Light	#FFFFFF
页面标题	20px	Medium	#FFFFFF
闹钟标签	16px	Medium	#FFFFFF
游戏类型标签	12px	Normal	#FFFFFF
辅助文字	14px	Normal	#BDBDBD
游戏题目	48px	Bold	#FFFFFF

4.3 组件规范

闹钟卡片

复制代码

┌─────────────────────────────────────────┐
│  07:00                          [开关]  │
│  工作日起床  [数学题]                    │
│  周一、二、三、四、五              [删除]│
└─────────────────────────────────────────┘

游戏选择卡片

复制代码

┌─────────────┐
│    🧮       │
│   数学题    │
└─────────────┘

难度选择条

复制代码

[████] [████] [    ]
 简单   中等   困难

五、核心功能实现

5.1 闹钟检测实现

dart 复制代码

void _startAlarmCheck() {
  _alarmTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
    _checkAlarm();
  });
}

void _checkAlarm() {
  if (_isAlarmRinging) return;

  final now = DateTime.now();
  final currentTime = TimeOfDay(hour: now.hour, minute: now.minute);

  for (final alarm in _alarms) {
    if (!alarm.enabled) continue;

    if (alarm.time.hour == currentTime.hour &&
        alarm.time.minute == currentTime.minute) {
      final weekday = now.weekday;
      if (alarm.repeatDays[weekday - 1] || !alarm.repeatDays.contains(true)) {
        _triggerAlarm(alarm);
        break;
      }
    }
  }
}

5.2 数学题游戏实现

dart 复制代码

void _generateQuestion() {
  final random = Random();
  final maxNum = 10 + (widget.difficulty * 10);
  
  _num1 = random.nextInt(maxNum) + 1;
  _num2 = random.nextInt(maxNum) + 1;
  
  final operators = ['+', '-', '×'];
  _operator = operators[random.nextInt(operators.length)];
  
  switch (_operator) {
    case '+':
      _correctAnswer = _num1 + _num2;
      break;
    case '-':
      if (_num1 < _num2) {
        final temp = _num1;
        _num1 = _num2;
        _num2 = temp;
      }
      _correctAnswer = _num1 - _num2;
      break;
    case '×':
      _num1 = random.nextInt(10) + 1;
      _num2 = random.nextInt(10) + 1;
      _correctAnswer = _num1 * _num2;
      break;
  }
}

5.3 记忆翻牌游戏实现

dart 复制代码

void _onCardTap(int index) {
  if (_revealed[index] || _matched.contains(index)) return;
  
  if (_firstSelected != null && _firstSelected != index) {
    setState(() {
      _revealed[index] = true;
    });

    Future.delayed(const Duration(milliseconds: 500), () {
      if (_cards[_firstSelected!] == _cards[index]) {
        setState(() {
          _matched.add(_firstSelected!);
          _matched.add(index);
          _matchedPairs++;
        });

        if (_matchedPairs >= _pairs) {
          widget.onComplete();
        }
      } else {
        setState(() {
          _revealed[_firstSelected!] = false;
          _revealed[index] = false;
        });
      }
      _firstSelected = null;
    });
  } else {
    setState(() {
      _revealed[index] = true;
      _firstSelected = index;
    });
  }
}

5.4 滑块拼图游戏实现

dart 复制代码

bool _isSolvable() {
  int inversions = 0;
  for (int i = 0; i < _tiles.length - 1; i++) {
    for (int j = i + 1; j < _tiles.length; j++) {
      if (_tiles[i] != 0 && _tiles[j] != 0 && _tiles[i] > _tiles[j]) {
        inversions++;
      }
    }
  }
  return inversions % 2 == 0;
}

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

六、扩展功能设计

6.1 数据持久化

当前版本数据存储在内存中，可扩展为本地持久化：

方案	实现方式	优势
SharedPreferences	键值对存储	简单易用
Hive	轻量级NoSQL	高性能
SQLite	关系型数据库	支持复杂查询

6.2 功能扩展

功能	实现方案	价值
真实闹钟	flutter_local_notifications	后台响铃
震动反馈	vibrate 包	增强唤醒效果
音效系统	audioplayers	自定义闹钟音
睡眠记录	本地数据库	追踪睡眠质量
社交分享	share_plus	分享起床战绩

6.3 游戏扩展

游戏	实现方案	特点
打字游戏	键盘输入	需要专注
扫雷游戏	逻辑推理	需要思考
连连看	图形匹配	需要观察
反应力测试	快速点击	需要反应

七、技术要点

7.1 性能优化

优化项	实现方式	效果
定时器管理	Timer.periodic	精确检测闹钟
动画优化	AnimationController	平滑游戏体验
状态管理	setState	响应式更新
内存管理	dispose清理	防止内存泄漏

7.2 边界条件处理

场景	处理方式	效果
空闹钟列表	显示空状态提示	提升用户体验
滑块拼图无解	检测并重新生成	确保游戏可完成
时间选择	默认当前时间	方便用户操作
难度设置	三级难度	适应不同用户

7.3 代码规范

规范	实现方式	效果
命名规范	驼峰命名法	代码可读性高
代码组织	模块化设计	易于维护
注释规范	文档注释	便于理解
错误处理	try-catch	增强稳定性

八、总结与展望

8.1 项目总结

起床战争应用以独特的游戏化闹钟理念，解决了传统闹钟容易被随手关掉的问题。通过强制用户完成需要动脑的小游戏，确保用户真正清醒后才能关闭闹钟。五种不同类型的游戏满足不同用户的偏好，三级难度设置让用户可以根据自己的起床困难程度进行选择。

8.2 核心价值

维度	价值体现
用户价值	有效解决起床困难问题
技术价值	Flutter游戏开发实践
设计价值	游戏化设计参考
社会价值	提高生活效率

8.3 未来规划

v1.0 核心功能闹钟管理五种游戏难度设置 v1.1 系统集成真实闹钟震动反馈音效系统 v1.2 数据功能睡眠记录数据分析 v2.0 社交功能起床战绩好友挑战成就系统起床战争发展路线

8.4 开发信息

项目	信息
开发框架	Flutter 3.x
设计规范	Material Design 3
主要文件	main_wake_up_war.dart
运行端口	8124
创建日期	2026-04-07
应用名称	起床战争
目标平台	鸿蒙OS / Web