【OpenHarmony/HarmonyOs 】成就系统设计：用等级、进度与徽章提升学习动力

2502_94757980

37人浏览 · 2026-07-03 19:13:38

2502_94757980 · 2026-07-03 19:13:38 发布

【OpenHarmony/HarmonyOs 】成就系统设计：用等级、进度与徽章提升学习动力

本文基于我的 OpenHarmony/HarmonyOS 项目「物理视界 PhysicsVision」整理。项目中的「成就殿堂」模块通过挑战次数、最高正确率、收藏数量、模型探索数量等数据，生成成就、等级、进度和称号。
这一篇单独拆解成就系统：如何用轻量规则提升学习动力。🏅

一、为什么学习 App 需要成就系统？

学习是一件长期行为。
如果应用只展示内容，用户很难感受到自己的成长；如果加入成就系统，就能把学习过程变成可见进度。

成就系统的作用包括：

记录用户做过什么；
给阶段性目标；
鼓励继续探索；
增强复习动力；
让抽象学习变成可视化成长。

「物理视界」的成就系统没有依赖服务器，而是直接基于本地学习状态计算。

二、成就数据结构

项目定义了 AchievementItem：

interface AchievementItem {
  id: string
  icon: string
  title: string
  desc: string
  condition: string
  color: string
}

每个成就包含：

唯一 ID；
图标；
标题；
描述；
解锁条件；
主题色。

这种结构足够简单，也便于后续扩展。

三、成就示例：挑战类

{ id: 'first_challenge', icon: '🎯', title: '初出茅庐', desc: '完成第一次物理挑战', condition: 'totalPlayed >= 1', color: '#4CAF50' }
{ id: 'challenge_5', icon: '🔥', title: '坚持不懈', desc: '完成5次物理挑战', condition: 'totalPlayed >= 5', color: '#FF9800' }
{ id: 'score_100', icon: '👑', title: '满分王者', desc: '挑战正确率达到100%', condition: 'highScore >= 100', color: '#FFD700' }

挑战类成就鼓励用户多做题、提高正确率。
其中“第一次挑战”门槛很低，适合给用户初始正反馈。

四、成就示例：学习类

{ id: 'fav_1', icon: '❤️', title: '初次收藏', desc: '收藏第1个物理模型', condition: 'favCount >= 1', color: '#E91E63' }
{ id: 'visit_10', icon: '🧪', title: '实验家', desc: '学习10个不同的物理模型', condition: 'visitCount >= 10', color: '#009688' }
{ id: 'visit_all', icon: '🎓', title: '学霸', desc: '学习全部28个物理模型', condition: 'visitCount >= 28', color: '#1A73E8' }

学习类成就鼓励用户探索模型和收藏重点内容。
这和项目核心功能绑定得很紧，不是为了成就而成就。

五、读取全局学习状态

成就页通过 @StorageLink 读取全局数据：

@StorageLink('highScore') highScore: number = 0
@StorageLink('totalPlayed') totalPlayed: number = 0
@StorageLink('favorites') favStr: string = ''
@StorageLink('visitedModels') visitedModels: string = ''

这些数据来自其他模块：

挑战页更新 highScore 和 totalPlayed；
实验室页更新 visitedModels；
收藏功能更新 favorites。

成就页不直接参与学习行为，只负责汇总和展示。

六、计算收藏数和访问数

getFavCount(): number {
  if (this.favStr.length === 0) return 0
  return this.favStr.split(',').length
}

getVisitCount(): number {
  if (this.visitedModels.length === 0) return 0
  return this.visitedModels.split(',').length
}

因为收藏和浏览都用逗号字符串保存，所以统计时直接 split 即可。
这种实现简单直接，适合当前 28 个模型的规模。

七、判断成就是否解锁

核心方法是 isUnlocked：

isUnlocked(achievement: AchievementItem): boolean {
  let cond = achievement.condition
  let favCount = this.getFavCount()
  let visitCount = this.getVisitCount()

  if (cond === 'always') return true
  if (cond === 'combo') return favCount > 0 && this.totalPlayed > 0
  if (cond === 'totalPlayed >= 1') return this.totalPlayed >= 1
  if (cond === 'highScore >= 80') return this.highScore >= 80
  if (cond === 'favCount >= 5') return favCount >= 5
  if (cond === 'visitCount >= 10') return visitCount >= 10
  return false
}

当前实现用字符串条件进行判断。
优点是直观，缺点是条件多了之后会比较长。后续可以把条件改成函数：

condition: () => boolean

不过在 ArkTS 页面中，当前写法已经足够清晰。

八、等级系统：成就数量映射等级

项目根据已解锁成就数量计算等级：

getLevel(): number {
  let unlocked: number = this.getUnlockedCount()
  if (unlocked >= 18) return 6
  if (unlocked >= 14) return 5
  if (unlocked >= 10) return 4
  if (unlocked >= 6) return 3
  if (unlocked >= 3) return 2
  if (unlocked >= 1) return 1
  return 0
}

称号也随等级变化：

getLevelTitle(): string {
  let level: number = this.getLevel()
  if (level >= 6) return '物理宗师'
  if (level >= 5) return '物理学家'
  if (level >= 4) return '物理达人'
  if (level >= 3) return '物理好手'
  if (level >= 2) return '物理新星'
  if (level >= 1) return '物理学徒'
  return '物理小白'
}

这种等级设计很适合教育 App。
它不是竞技排名，而是自我成长反馈。

九、成就进度计算

项目还为每个成就计算进度百分比：

getProgress(achievement: AchievementItem): number {
  let cond = achievement.condition
  let favCount = this.getFavCount()
  let visitCount = this.getVisitCount()

  if (cond === 'totalPlayed >= 5') return Math.min(this.totalPlayed / 5 * 100, 100)
  if (cond === 'highScore >= 80') return Math.min(this.highScore / 80 * 100, 100)
  if (cond === 'favCount >= 10') return Math.min(favCount / 10 * 100, 100)
  if (cond === 'visitCount >= 28') return Math.min(visitCount / 28 * 100, 100)
  return 0
}