在线教育游戏化设计与激励机制完整指南

在线教育游戏化设计与激励机制完整指南

游戏化设计是将游戏元素和游戏机制应用于非游戏场景的设计方法。在在线教育领域，合理运用游戏化设计可以显著提升学习者的参与度、动力和学习效果。本文将深入探讨如何在教育平台中实施有效的游戏化策略。

游戏化设计的心理学基础

自我决定理论

自我决定理论（Self-Determination Theory）是理解游戏化动机的核心框架：

// 自我决定理论的三大基本需求
interface SelfDeterminationNeeds {
  // 自主性：感觉自己能够控制行为和目标
  autonomy: {
    description: '学习者对学习过程有选择权和控制感'
    strategies: [
      '提供多种学习路径选择',
      '允许自定义学习目标',
      '支持个性化学习进度',
      '提供自由探索空间'
    ]
  }
  
  // 能力感：相信自己有能力完成任务
  competence: {
    description: '学习者感到自己能够有效完成学习任务'
    strategies: [
      '提供适当难度的挑战',
      '及时反馈和奖励',
      '清晰的进度展示',
      '技能树和能力成长可视化'
    ]
  }
  
  // 归属感：与他人建立联系
  relatedness: {
    description: '学习者感到与社区和他人有连接'
    strategies: [
      '社交学习功能',
      '团队协作任务',
      '同伴互助机制',
      '社区讨论和分享'
    ]
  }
}

// 动机类型分析
interface MotivationType {
  intrinsic: {
    // 内在动机：因活动本身带来的满足
    drivers: ['好奇心', '掌握欲望', '成就感', '创造乐趣']
    designFocus: '让学习本身变得有趣和有意义'
  }
  extrinsic: {
    // 外在动机：因外部奖励或压力
    drivers: ['积分', '徽章', '排名', '证书', '社会认可']
    designFocus: '用外部激励引导，逐步转化为内在动机'
  }
}

心流理论

心流（Flow）是最佳学习体验的心理状态：

// 心流状态设计模型
interface FlowStateDesign {
  // 心流通道：挑战与技能的平衡
  flowChannel: {
    // 技能水平
    skillLevel: number
    // 挑战难度
    challengeLevel: number
    // 最佳区间：挑战略高于当前技能
    optimalZone: {
      min: 'skillLevel * 1.0',
      max: 'skillLevel * 1.3'
    }
  }
  
  // 心流条件
  conditions: {
    clearGoals: '明确的学习目标'
    immediateFeedback: '即时的反馈机制'
    balancedChallenge: '平衡的挑战难度'
    focusedAttention: '专注的学习环境'
    senseOfControl: '可控的学习进程'
    mergedActionAwareness: '沉浸式学习体验'
  }
}

// 心流状态检测器
class FlowStateDetector {
  private userMetrics: UserLearningMetrics
  
  analyzeFlowState(): FlowAnalysis {
    const { skillLevel, currentChallenge, engagementMetrics } = this.userMetrics
    
    const challengeSkillRatio = currentChallenge / skillLevel
    
    if (challengeSkillRatio > 1.5) {
      return {
        state: 'anxiety',
        recommendation: '降低挑战难度，提供更多支持',
        actions: ['提供提示', '简化任务', '分解步骤']
      }
    }
    
    if (challengeSkillRatio < 0.8) {
      return {
        state: 'boredom',
        recommendation: '增加挑战难度，提供进阶内容',
        actions: ['推荐进阶课程', '增加可选挑战', '解锁隐藏关卡']
      }
    }
    
    if (challengeSkillRatio >= 1.0 && challengeSkillRatio <= 1.3) {
      return {
        state: 'flow',
        recommendation: '保持当前难度，优化学习体验',
        actions: ['减少干扰', '提供沉浸模式', '持续反馈']
      }
    }
    
    return {
      state: 'control',
      recommendation: '适当增加挑战以达到心流状态',
      actions: ['引入可选挑战', '提供时间限制选项']
    }
  }
}

核心游戏化元素设计

1. 积分系统设计

积分系统是最基础的游戏化元素：

// 多维度积分系统
interface MultiDimensionalPointSystem {
  // 经验值（XP）：衡量整体学习进度
  experiencePoints: {
    name: 'XP'
    description: '学习经验值，反映学习积累'
    earningRules: {
      completeLesson: 100,
      completeQuiz: 50,
      dailyLogin: 10,
      streakBonus: (days: number) => days * 5,
      perfectScore: 200,
      helpOthers: 30
    }
    levelThresholds: number[] // 升级所需XP
  }
  
  // 技能点（SP）：特定领域的专精度
  skillPoints: {
    name: 'SP'
    description: '领域技能点，反映专业深度'
    categories: {
      [skillId: string]: {
        name: string
        currentPoints: number
        maxPoints: number
        level: 'beginner' | 'intermediate' | 'advanced' | 'expert' | 'master'
      }
    }
  }
  
  // 贡献点（CP）：社区贡献度
  contributionPoints: {
    name: 'CP'
    description: '社区贡献点，反映帮助他人的程度'
    earningRules: {
      answerQuestion: 20,
      acceptedAnswer: 50,
      createResource: 100,
      reviewContent: 15,
      mentoring: 200
    }
  }
  
  // 声望（RP）：社区影响力
  reputationPoints: {
    name: 'RP'
    description: '声望值，反映社区地位'
    factors: ['CP积累', '内容质量', '活跃度', '获得认可']
  }
}

// 积分引擎实现
class PointEngine {
  private db: Database
  private eventEmitter: EventEmitter
  
  // 奖励积分
  async awardPoints(
    userId: string,
    pointType: PointType,
    amount: number,
    reason: string,
    metadata?: Record<string, any>
  ): Promise<PointTransaction> {
    // 创建积分交易记录
    const transaction: PointTransaction = {
      id: generateId(),
      userId,
      pointType,
      amount,
      reason,
      metadata,
      timestamp: new Date(),
      balanceAfter: 0
    }
    
    // 原子性更新用户积分
    const updatedBalance = await this.db.transaction(async (tx) => {
      const user = await tx.users.findUnique({ where: { id: userId } })
      const newBalance = user.points[pointType] + amount
      
      await tx.users.update({
        where: { id: userId },
        data: {
          points: {
            ...user.points,
            [pointType]: newBalance
          }
        }
      })
      
      transaction.balanceAfter = newBalance
      await tx.pointTransactions.create({ data: transaction })
      
      return newBalance
    })
    
    // 触发相关事件
    this.eventEmitter.emit('points:awarded', {
      userId,
      pointType,
      amount,
      newBalance: updatedBalance
    })
    
    // 检查是否触发升级或成就
    await this.checkLevelUp(userId, pointType, updatedBalance)
    await this.checkAchievements(userId, pointType, amount)
    
    return transaction
  }
  
  // 检查升级
  private async checkLevelUp(
    userId: string,
    pointType: PointType,
    currentPoints: number
  ): Promise<void> {
    const levelConfig = this.getLevelConfig(pointType)
    const currentLevel = await this.getUserLevel(userId, pointType)
    const newLevel = this.calculateLevel(currentPoints, levelConfig.thresholds)
    
    if (newLevel > currentLevel) {
      await this.processLevelUp(userId, pointType, currentLevel, newLevel)
    }
  }
  
  // 处理升级
  private async processLevelUp(
    userId: string,
    pointType: PointType,
    oldLevel: number,
    newLevel: number
  ): Promise<void> {
    // 更新用户等级
    await this.db.users.update({
      where: { id: userId },
      data: {
        levels: {
          [pointType]: newLevel
        }
      }
    })
    
    // 解锁新特权
    const newPrivileges = this.getPrivilegesForLevel(pointType, newLevel)
    await this.grantPrivileges(userId, newPrivileges)
    
    // 发送通知
    await this.notifyLevelUp(userId, pointType, newLevel)
    
    // 奖励升级奖励
    const levelUpRewards = this.getLevelUpRewards(pointType, newLevel)
    for (const reward of levelUpRewards) {
      await this.grantReward(userId, reward)
    }
    
    this.eventEmitter.emit('level:up', {
      userId,
      pointType,
      oldLevel,
      newLevel
    })
  }
  
  // 计算等级
  private calculateLevel(points: number, thresholds: number[]): number {
    for (let i = thresholds.length - 1; i >= 0; i--) {
      if (points >= thresholds[i]) {
        return i + 1
      }
    }
    return 1
  }
}

2. 成就徽章系统

成就系统提供里程碑式的认可：

// 成就系统设计
interface AchievementSystem {
  categories: {
    learning: '学习成就'
    social: '社交成就'
    exploration: '探索成就'
    mastery: '精通成就'
    special: '特殊成就'
    hidden: '隐藏成就'
  }
  
  rarityLevels: {
    common: { color: '#9CA3AF', multiplier: 1 }
    uncommon: { color: '#10B981', multiplier: 1.5 }
    rare: { color: '#3B82F6', multiplier: 2 }
    epic: { color: '#8B5CF6', multiplier: 3 }
    legendary: { color: '#F59E0B', multiplier: 5 }
  }
}

// 成就定义
interface Achievement {
  id: string
  name: string
  description: string
  category: AchievementCategory
  rarity: AchievementRarity
  icon: string
  
  // 解锁条件
  unlockConditions: AchievementCondition[]
  
  // 奖励
  rewards: AchievementReward[]
  
  // 进度追踪
  progressTracking?: {
    metric: string
    target: number
    showProgress: boolean
  }
  
  // 是否隐藏（解锁前不显示）
  hidden: boolean
  
  // 前置成就
  prerequisites?: string[]
  
  // 时间限制（限时成就）
  timeLimit?: {
    startDate: Date
    endDate: Date
  }
}

// 成就条件类型
type AchievementCondition = 
  | { type: 'stat_threshold'; stat: string; value: number; operator: '>=' | '>' | '=' }
  | { type: 'streak'; days: number }
  | { type: 'completion'; courseId: string; score?: number }
  | { type: 'collection'; items: string[]; all: boolean }
  | { type: 'social'; action: string; count: number }
  | { type: 'time_based'; action: string; duration: string }
  | { type: 'composite'; conditions: AchievementCondition[]; logic: 'AND' | 'OR' }

// 成就系统实现
class AchievementEngine {
  private achievements: Map<string, Achievement> = new Map()
  private userProgress: Map<string, Map<string, AchievementProgress>> = new Map()
  
  // 注册成就
  registerAchievement(achievement: Achievement): void {
    this.achievements.set(achievement.id, achievement)
  }
  
  // 检查成就解锁
  async checkAchievements(userId: string, event: GameEvent): Promise<Achievement[]> {
    const unlockedAchievements: Achievement[] = []
    const userStats = await this.getUserStats(userId)
    const earnedAchievements = await this.getEarnedAchievements(userId)
    
    for (const [id, achievement] of this.achievements) {
      // 跳过已获得的成就
      if (earnedAchievements.has(id)) continue
      
      // 检查前置条件
      if (achievement.prerequisites) {
        const hasAllPrereqs = achievement.prerequisites.every(
          prereq => earnedAchievements.has(prereq)
        )
        if (!hasAllPrereqs) continue
      }
      
      // 检查时间限制
      if (achievement.timeLimit) {
        const now = new Date()
        if (now < achievement.timeLimit.startDate || now > achievement.timeLimit.endDate) {
          continue
        }
      }
      
      // 检查解锁条件
      const isUnlocked = await this.evaluateConditions(
        achievement.unlockConditions,
        userStats,
        event
      )
      
      if (isUnlocked) {
        await this.unlockAchievement(userId, achievement)
        unlockedAchievements.push(achievement)
      }
    }
    
    return unlockedAchievements
  }
  
  // 评估条件
  private async evaluateConditions(
    conditions: AchievementCondition[],
    stats: UserStats,
    event: GameEvent
  ): Promise<boolean> {
    for (const condition of conditions) {
      const result = await this.evaluateCondition(condition, stats, event)
      if (!result) return false
    }
    return true
  }
  
  // 评估单个条件
  private async evaluateCondition(
    condition: AchievementCondition,
    stats: UserStats,
    event: GameEvent
  ): Promise<boolean> {
    switch (condition.type) {
      case 'stat_threshold':
        const statValue = stats[condition.stat] || 0
        switch (condition.operator) {
          case '>=': return statValue >= condition.value
          case '>': return statValue > condition.value
          case '=': return statValue === condition.value
        }
        
      case 'streak':
        return stats.currentStreak >= condition.days
        
      case 'completion':
        const courseProgress = stats.courseProgress[condition.courseId]
        if (!courseProgress?.completed) return false
        if (condition.score && courseProgress.score < condition.score) return false
        return true
        
      case 'collection':
        const collected = stats.collections || []
        if (condition.all) {
          return condition.items.every(item => collected.includes(item))
        }
        return condition.items.some(item => collected.includes(item))
        
      case 'composite':
        const results = await Promise.all(
          condition.conditions.map(c => this.evaluateCondition(c, stats, event))
        )
        return condition.logic === 'AND' 
          ? results.every(r => r) 
          : results.some(r => r)
        
      default:
        return false
    }
  }
  
  // 解锁成就
  private async unlockAchievement(
    userId: string,
    achievement: Achievement
  ): Promise<void> {
    // 记录解锁
    await this.db.userAchievements.create({
      data: {
        userId,
        achievementId: achievement.id,
        unlockedAt: new Date()
      }
    })
    
    // 发放奖励
    for (const reward of achievement.rewards) {
      await this.grantReward(userId, reward)
    }
    
    // 发送通知
    await this.notifyAchievementUnlock(userId, achievement)
    
    // 触发事件
    this.eventEmitter.emit('achievement:unlocked', {
      userId,
      achievement
    })
  }
}

// 预设成就示例
const predefinedAchievements: Achievement[] = [
  {
    id: 'first_lesson',
    name: '学习之旅',
    description: '完成你的第一节课程',
    category: 'learning',
    rarity: 'common',
    icon: '🎓',
    unlockConditions: [
      { type: 'stat_threshold', stat: 'lessonsCompleted', value: 1, operator: '>=' }
    ],
    rewards: [
      { type: 'points', pointType: 'xp', amount: 100 },
      { type: 'badge', badgeId: 'beginner' }
    ],
    hidden: false
  },
  {
    id: 'streak_week',
    name: '坚持一周',
    description: '连续学习7天',
    category: 'learning',
    rarity: 'uncommon',
    icon: '🔥',
    unlockConditions: [
      { type: 'streak', days: 7 }
    ],
    rewards: [
      { type: 'points', pointType: 'xp', amount: 500 },
      { type: 'item', itemId: 'streak_shield' }
    ],
    hidden: false,
    progressTracking: {
      metric: 'currentStreak',
      target: 7,
      showProgress: true
    }
  },
  {
    id: 'perfect_master',
    name: '完美主义者',
    description: '在10个测验中获得满分',
    category: 'mastery',
    rarity: 'rare',
    icon: '💯',
    unlockConditions: [
      { type: 'stat_threshold', stat: 'perfectQuizzes', value: 10, operator: '>=' }
    ],
    rewards: [
      { type: 'points', pointType: 'xp', amount: 1000 },
      { type: 'title', titleId: 'perfectionist' }
    ],
    hidden: false
  },
  {
    id: 'night_owl',
    name: '夜猫子',
    description: '在凌晨2点到5点之间完成学习任务',
    category: 'special',
    rarity: 'epic',
    icon: '🦉',
    unlockConditions: [
      { type: 'time_based', action: 'complete_lesson', duration: '02:00-05:00' }
    ],
    rewards: [
      { type: 'points', pointType: 'xp', amount: 200 },
      { type: 'cosmetic', cosmeticId: 'night_theme' }
    ],
    hidden: true
  },
  {
    id: 'legend_helper',
    name: '传奇导师',
    description: '帮助100位学习者解决问题',
    category: 'social',
    rarity: 'legendary',
    icon: '👑',
    unlockConditions: [
      { type: 'social', action: 'accepted_answers', count: 100 }
    ],
    rewards: [
      { type: 'points', pointType: 'xp', amount: 5000 },
      { type: 'points', pointType: 'cp', amount: 1000 },
      { type: 'title', titleId: 'legendary_mentor' },
      { type: 'exclusive_access', accessId: 'mentor_lounge' }
    ],
    hidden: false
  }
]

3. 排行榜系统

排行榜激发竞争动力：

// 排行榜系统设计
interface LeaderboardSystem {
  // 排行榜类型
  types: {
    global: '全球排行榜'
    regional: '地区排行榜'
    course: '课程排行榜'
    weekly: '周排行榜'
    friends: '好友排行榜'
    class: '班级排行榜'
  }
  
  // 排名指标
  metrics: {
    xp: '经验值排名'
    streak: '连续学习天数'
    accuracy: '答题正确率'
    speed: '学习速度'
    contribution: '贡献度'
    improvement: '进步幅度'
  }
}

// 排行榜引擎
class LeaderboardEngine {
  private redis: RedisClient
  private db: Database
  
  // 更新排行榜分数
  async updateScore(
    leaderboardId: string,
    userId: string,
    score: number,
    metadata?: Record<string, any>
  ): Promise<RankChange> {
    const key = `leaderboard:${leaderboardId}`
    
    // 获取更新前的排名
    const oldRank = await this.redis.zrevrank(key, userId)
    
    // 更新分数
    await this.redis.zadd(key, score, userId)
    
    // 获取更新后的排名
    const newRank = await this.redis.zrevrank(key, userId)
    
    // 存储元数据
    if (metadata) {
      await this.redis.hset(`${key}:meta:${userId}`, metadata)
    }
    
    // 计算排名变化
    const rankChange: RankChange = {
      userId,
      oldRank: oldRank !== null ? oldRank + 1 : null,
      newRank: newRank + 1,
      change: oldRank !== null ? oldRank - newRank : null
    }
    
    // 触发排名变化事件
    if (rankChange.change !== null && rankChange.change !== 0) {
      this.eventEmitter.emit('rank:changed', rankChange)
    }
    
    return rankChange
  }
  
  // 获取排行榜
  async getLeaderboard(
    leaderboardId: string,
    options: LeaderboardOptions
  ): Promise<LeaderboardResult> {
    const key = `leaderboard:${leaderboardId}`
    const { start = 0, end = 99, includeMetadata = true } = options
    
    // 获取排名数据
    const rankings = await this.redis.zrevrange(key, start, end, 'WITHSCORES')
    
    // 构建结果
    const entries: LeaderboardEntry[] = []
    for (let i = 0; i < rankings.length; i += 2) {
      const userId = rankings[i]
      const score = parseFloat(rankings[i + 1])
      
      const entry: LeaderboardEntry = {
        rank: start + (i / 2) + 1,
        userId,
        score
      }
      
      if (includeMetadata) {
        entry.metadata = await this.redis.hgetall(`${key}:meta:${userId}`)
        entry.user = await this.getUserInfo(userId)
      }
      
      entries.push(entry)
    }
    
    // 获取总人数
    const totalCount = await this.redis.zcard(key)
    
    return {
      leaderboardId,
      entries,
      totalCount,
      lastUpdated: new Date()
    }
  }
  
  // 获取用户周围的排名
  async getSurroundingRanks(
    leaderboardId: string,
    userId: string,
    range: number = 5
  ): Promise<LeaderboardResult> {
    const key = `leaderboard:${leaderboardId}`
    
    // 获取用户当前排名
    const userRank = await this.redis.zrevrank(key, userId)
    if (userRank === null) {
      return { leaderboardId, entries: [], totalCount: 0, lastUpdated: new Date() }
    }
    
    // 计算范围
    const start = Math.max(0, userRank - range)
    const end = userRank + range
    
    return this.getLeaderboard(leaderboardId, { start, end })
  }
  
  // 创建周期性排行榜
  async createPeriodicLeaderboard(
    baseId: string,
    period: 'daily' | 'weekly' | 'monthly'
  ): Promise<string> {
    const periodKey = this.getPeriodKey(period)
    const leaderboardId = `${baseId}:${period}:${periodKey}`
    
    // 设置过期时间
    const ttl = this.getPeriodTTL(period)
    await this.redis.expire(`leaderboard:${leaderboardId}`, ttl)
    
    return leaderboardId
  }
  
  // 计算相对排名（百分位）
  async getPercentileRank(
    leaderboardId: string,
    userId: string
  ): Promise<PercentileRank> {
    const key = `leaderboard:${leaderboardId}`
    
    const [rank, total] = await Promise.all([
      this.redis.zrevrank(key, userId),
      this.redis.zcard(key)
    ])
    
    if (rank === null || total === 0) {
      return { percentile: 0, rank: null, total }
    }
    
    const percentile = ((total - rank) / total) * 100
    
    return {
      percentile: Math.round(percentile * 10) / 10,
      rank: rank + 1,
      total
    }
  }
}

// 前端排行榜组件
const LeaderboardComponent = defineComponent({
  name: 'Leaderboard',
  props: {
    leaderboardId: String,
    currentUserId: String
  },
  setup(props) {
    const leaderboardData = ref<LeaderboardResult | null>(null)
    const userRank = ref<LeaderboardEntry | null>(null)
    const loading = ref(false)
    const activeTab = ref<'global' | 'friends' | 'weekly'>('global')
    
    const fetchLeaderboard = async () => {
      loading.value = true
      try {
        const [boardData, surrounding] = await Promise.all([
          api.getLeaderboard(props.leaderboardId, { start: 0, end: 49 }),
          api.getSurroundingRanks(props.leaderboardId, props.currentUserId, 3)
        ])
        
        leaderboardData.value = boardData
        userRank.value = surrounding.entries.find(
          e => e.userId === props.currentUserId
        )
      } finally {
        loading.value = false
      }
    }
    
    onMounted(fetchLeaderboard)
    watch(() => activeTab.value, fetchLeaderboard)
    
    return () => (
      <div class="leaderboard-container">
        {/* 标签切换 */}
        <div class="tab-bar">
          {['global', 'friends', 'weekly'].map(tab => (
            <button
              class={['tab-btn', { active: activeTab.value === tab }]}
              onClick={() => activeTab.value = tab}
            >
              {tab === 'global' ? '全球榜' : tab === 'friends' ? '好友榜' : '周榜'}
            </button>
          ))}
        </div>
        
        {/* 用户当前排名 */}
        {userRank.value && (
          <div class="user-rank-card highlight">
            <span class="rank">#{userRank.value.rank}</span>
            <span class="user">你</span>
            <span class="score">{userRank.value.score.toLocaleString()} XP</span>
          </div>
        )}
        
        {/* 排行榜列表 */}
        <div class="leaderboard-list">
          {leaderboardData.value?.entries.map((entry, index) => (
            <div 
              class={[
                'leaderboard-entry',
                { 'current-user': entry.userId === props.currentUserId },
                { 'top-3': entry.rank <= 3 }
              ]}
              key={entry.userId}
            >
              <div class="rank-badge">
                {entry.rank <= 3 ? (
                  <span class={`medal medal-${entry.rank}`}>
                    {['🥇', '🥈', '🥉'][entry.rank - 1]}
                  </span>
                ) : (
                  <span class="rank-number">{entry.rank}</span>
                )}
              </div>
              
              <img 
                class="avatar" 
                src={entry.user?.avatar} 
                alt={entry.user?.name}
              />
              
              <div class="user-info">
                <span class="name">{entry.user?.name}</span>
                <span class="level">Lv.{entry.user?.level}</span>
              </div>
              
              <div class="score">
                {entry.score.toLocaleString()} XP
              </div>
            </div>
          ))}
        </div>
      </div>
    )
  }
})

任务与挑战系统

每日任务系统

// 每日任务系统
interface DailyQuestSystem {
  questTypes: {
    learning: '学习任务'
    social: '社交任务'
    challenge: '挑战任务'
    bonus: '奖励任务'
  }
  
  refreshTime: '每日00:00刷新'
  maxDailyQuests: 5
  bonusQuestUnlock: '完成所有每日任务后解锁'
}

// 任务生成器
class QuestGenerator {
  private questTemplates: QuestTemplate[]
  private userProfiler: UserProfiler
  
  // 生成每日任务
  async generateDailyQuests(userId: string): Promise<Quest[]> {
    const userProfile = await this.userProfiler.getProfile(userId)
    const completionHistory = await this.getCompletionHistory(userId)
    
    const quests: Quest[] = []
    
    // 必选学习任务
    quests.push(await this.generateLearningQuest(userProfile))
    
    // 根据用户活跃度生成社交任务
    if (userProfile.socialEngagement > 0.3) {
      quests.push(await this.generateSocialQuest(userProfile))
    }
    
    // 根据用户能力生成挑战任务
    const challengeQuest = await this.generateAdaptiveChallenge(userProfile)
    quests.push(challengeQuest)
    
    // 填充随机任务
    while (quests.length < 5) {
      const randomQuest = await this.generateRandomQuest(
        userProfile,
        quests.map(q => q.type)
      )
      quests.push(randomQuest)
    }
    
    // 计算任务难度和奖励
    return quests.map(quest => this.calibrateQuestRewards(quest, userProfile))
  }
  
  // 生成自适应挑战
  private async generateAdaptiveChallenge(
    profile: UserProfile
  ): Promise<Quest> {
    const { skillLevel, recentPerformance, preferredTopics } = profile
    
    // 选择合适难度的挑战
    const difficultyRange = this.calculateDifficultyRange(
      skillLevel,
      recentPerformance
    )
    
    // 选择主题
    const topic = this.selectChallengeTopic(preferredTopics)
    
    // 生成挑战内容
    const challenge = await this.createChallenge({
      topic,
      difficulty: difficultyRange,
      type: this.selectChallengeType(profile)
    })
    
    return {
      id: generateId(),
      type: 'challenge',
      title: challenge.title,
      description: challenge.description,
      objectives: challenge.objectives,
      rewards: this.calculateChallengeRewards(difficultyRange),
      timeLimit: challenge.timeLimit,
      difficulty: difficultyRange.target
    }
  }
  
  // 校准任务奖励
  private calibrateQuestRewards(quest: Quest, profile: UserProfile): Quest {
    const baserewards = quest.rewards
    
    // 根据用户等级调整
    const levelMultiplier = 1 + (profile.level * 0.1)
    
    // 根据任务难度调整
    const difficultyMultiplier = 1 + (quest.difficulty * 0.2)
    
    return {
      ...quest,
      rewards: baserewards.map(reward => ({
        ...reward,
        amount: Math.round(reward.amount * levelMultiplier * difficultyMultiplier)
      }))
    }
  }
}

// 任务进度追踪器
class QuestProgressTracker {
  // 更新任务进度
  async updateProgress(
    userId: string,
    questId: string,
    progress: QuestProgress
  ): Promise<QuestUpdateResult> {
    const quest = await this.getQuest(userId, questId)
    if (!quest || quest.status === 'completed') {
      return { success: false, reason: 'Quest not found or already completed' }
    }
    
    // 更新进度
    const updatedObjectives = quest.objectives.map(obj => {
      const progressUpdate = progress.objectives[obj.id]
      if (!progressUpdate) return obj
      
      return {
        ...obj,
        current: Math.min(obj.current + progressUpdate.increment, obj.target)
      }
    })
    
    // 检查是否完成
    const allCompleted = updatedObjectives.every(
      obj => obj.current >= obj.target
    )
    
    // 更新数据库
    await this.db.quests.update({
      where: { id: questId, userId },
      data: {
        objectives: updatedObjectives,
        status: allCompleted ? 'completed' : 'in_progress',
        completedAt: allCompleted ? new Date() : null
      }
    })
    
    // 如果完成，发放奖励
    if (allCompleted) {
      await this.completeQuest(userId, quest)
    }
    
    return {
      success: true,
      objectives: updatedObjectives,
      completed: allCompleted
    }
  }
  
  // 完成任务
  private async completeQuest(userId: string, quest: Quest): Promise<void> {
    // 发放奖励
    for (const reward of quest.rewards) {
      await this.grantReward(userId, reward)
    }
    
    // 检查每日任务完成情况
    await this.checkDailyQuestCompletion(userId)
    
    // 触发事件
    this.eventEmitter.emit('quest:completed', { userId, quest })
  }
  
  // 检查每日任务全部完成
  private async checkDailyQuestCompletion(userId: string): Promise<void> {
    const todayQuests = await this.getTodayQuests(userId)
    const allCompleted = todayQuests.every(q => q.status === 'completed')
    
    if (allCompleted) {
      // 解锁奖励任务
      await this.unlockBonusQuest(userId)
      
      // 奖励全勤奖
      await this.grantDailyCompletionBonus(userId)
    }
  }
}

学习挑战系统

// 学习挑战系统
interface ChallengeSystem {
  challengeTypes: {
    speedRun: '限时挑战'
    accuracy: '精准挑战'
    marathon: '马拉松挑战'
    boss: 'Boss 挑战'
    pvp: 'PvP 对战'
    coop: '协作挑战'
  }
}

// 挑战管理器
class ChallengeManager {
  // 创建限时挑战
  async createSpeedChallenge(params: SpeedChallengeParams): Promise<Challenge> {
    const { topic, questionCount, timeLimit, difficulty } = params
    
    // 生成题目
    const questions = await this.questionGenerator.generate({
      topic,
      count: questionCount,
      difficulty
    })
    
    return {
      id: generateId(),
      type: 'speedRun',
      title: `${topic} 限时挑战`,
      description: `在 ${timeLimit} 秒内完成 ${questionCount} 道题目`,
      questions,
      timeLimit,
      scoring: {
        basePoints: 100,
        timeBonus: true,
        accuracyMultiplier: true,
        comboBonus: true
      },
      rewards: this.calculateRewards(difficulty, 'speedRun')
    }
  }
  
  // 创建 Boss 挑战
  async createBossChallenge(bossId: string, userId: string): Promise<Challenge> {
    const boss = await this.getBoss(bossId)
    const userLevel = await this.getUserLevel(userId)
    
    // 根据用户等级调整 Boss 难度
    const adjustedBoss = this.scaleBoss(boss, userLevel)
    
    return {
      id: generateId(),
      type: 'boss',
      title: `挑战 Boss: ${boss.name}`,
      description: boss.description,
      boss: adjustedBoss,
      phases: this.generateBossPhases(adjustedBoss),
      mechanics: boss.mechanics,
      rewards: {
        guaranteed: boss.guaranteedRewards,
        random: boss.lootTable
      }
    }
  }
  
  // Boss 战斗系统
  async processBossBattle(
    challengeId: string,
    userId: string,
    action: BattleAction
  ): Promise<BattleResult> {
    const battle = await this.getBattle(challengeId, userId)
    const boss = battle.boss
    
    // 处理用户回答
    if (action.type === 'answer') {
      const question = battle.currentQuestion
      const isCorrect = this.checkAnswer(question, action.answer)
      
      if (isCorrect) {
        // 计算伤害
        const damage = this.calculateDamage({
          baseDamage: battle.userStats.attack,
          accuracy: action.responseTime,
          combo: battle.combo
        })
        
        // 应用伤害
        boss.currentHealth -= damage
        battle.combo++
        
        // 检查是否触发特殊效果
        await this.checkSpecialEffects(battle, 'correct')
      } else {
        // Boss 反击
        const bossAttack = this.processBossAttack(boss, battle)
        battle.userStats.health -= bossAttack.damage
        battle.combo = 0
        
        // 检查用户是否失败
        if (battle.userStats.health <= 0) {
          return this.handleBattleDefeat(battle)
        }
      }
      
      // 检查 Boss 是否被击败
      if (boss.currentHealth <= 0) {
        // 检查是否有下一阶段
        if (battle.currentPhase < boss.phases.length - 1) {
          return this.advanceToNextPhase(battle)
        }
        return this.handleBattleVictory(battle)
      }
      
      // 生成下一个问题
      battle.currentQuestion = await this.generateBossQuestion(
        boss,
        battle.currentPhase
      )
    }
    
    return {
      status: 'ongoing',
      battle: this.sanitizeBattleState(battle)
    }
  }
}

// PvP 对战系统
class PvPArena {
  private matchmaker: Matchmaker
  private battleProcessor: BattleProcessor
  
  // 加入匹配队列
  async joinQueue(userId: string, mode: PvPMode): Promise<QueueStatus> {
    const userRating = await this.getUserRating(userId, mode)
    
    // 添加到匹配队列
    await this.matchmaker.addToQueue({
      userId,
      rating: userRating,
      mode,
      joinedAt: Date.now()
    })
    
    // 尝试匹配
    const match = await this.matchmaker.findMatch(userId, mode)
    
    if (match) {
      return {
        status: 'matched',
        match
      }
    }
    
    return {
      status: 'waiting',
      estimatedWait: this.matchmaker.estimateWaitTime(userRating, mode)
    }
  }
  
  // 处理对战回合
  async processTurn(
    matchId: string,
    userId: string,
    answer: PvPAnswer
  ): Promise<TurnResult> {
    const match = await this.getMatch(matchId)
    const opponent = this.getOpponent(match, userId)
    
    // 记录答案
    match.turns.push({
      round: match.currentRound,
      userId,
      answer,
      timestamp: Date.now()
    })
    
    // 检查双方是否都已回答
    const bothAnswered = this.checkBothAnswered(match, match.currentRound)
    
    if (bothAnswered) {
      // 评判本回合
      const roundResult = await this.judgeRound(match, match.currentRound)
      
      // 更新分数
      this.updateMatchScores(match, roundResult)
      
      // 检查比赛是否结束
      if (this.isMatchOver(match)) {
        return this.concludeMatch(match)
      }
      
      // 进入下一回合
      match.currentRound++
      match.currentQuestion = await this.generatePvPQuestion(match)
    }
    
    return {
      status: bothAnswered ? 'round_complete' : 'waiting_opponent',
      match: this.sanitizeMatchState(match, userId)
    }
  }
  
  // 计算 ELO 评分变化
  calculateRatingChange(
    winnerRating: number,
    loserRating: number,
    isDraw: boolean = false
  ): { winnerChange: number; loserChange: number } {
    const K = 32 // K 因子
    const expectedWinner = 1 / (1 + Math.pow(10, (loserRating - winnerRating) / 400))
    const expectedLoser = 1 - expectedWinner
    
    if (isDraw) {
      return {
        winnerChange: Math.round(K * (0.5 - expectedWinner)),
        loserChange: Math.round(K * (0.5 - expectedLoser))
      }
    }
    
    return {
      winnerChange: Math.round(K * (1 - expectedWinner)),
      loserChange: Math.round(K * (0 - expectedLoser))
    }
  }
}

进度可视化与反馈

学习进度可视化

<!-- 学习进度仪表盘 -->
<template>
  <div class="progress-dashboard">
    <!-- 经验值进度条 -->
    <div class="xp-progress-section">
      <div class="level-badge">
        <span class="level-number">{{ userLevel }}</span>
        <span class="level-title">{{ levelTitle }}</span>
      </div>
      
      <div class="xp-bar-container">
        <div 
          class="xp-bar-fill"
          :style="{ width: `${xpProgress}%` }"
        />
        <div class="xp-bar-text">
          {{ currentXP.toLocaleString() }} / {{ nextLevelXP.toLocaleString() }} XP
        </div>
      </div>
      
      <div class="xp-info">
        <span>距离下一级还需 {{ (nextLevelXP - currentXP).toLocaleString() }} XP</span>
      </div>
    </div>
    
    <!-- 技能雷达图 -->
    <div class="skill-radar-section">
      <h3>技能分布</h3>
      <SkillRadarChart :skills="userSkills" />
    </div>
    
    <!-- 学习连续天数 -->
    <div class="streak-section">
      <div class="streak-flame" :class="{ 'on-fire': streak >= 7 }">
        🔥
      </div>
      <div class="streak-count">
        <span class="number">{{ streak }}</span>
        <span class="label">天连续学习</span>
      </div>
      <div class="streak-calendar">
        <div 
          v-for="day in last30Days" 
          :key="day.date"
          class="calendar-day"
          :class="{ 
            'completed': day.completed,
            'today': day.isToday 
          }"
        />
      </div>
    </div>
    
    <!-- 成就展示 -->
    <div class="achievements-showcase">
      <h3>最新成就</h3>
      <div class="achievement-list">
        <div 
          v-for="achievement in recentAchievements" 
          :key="achievement.id"
          class="achievement-card"
          :class="achievement.rarity"
        >
          <div class="achievement-icon">{{ achievement.icon }}</div>
          <div class="achievement-info">
            <span class="name">{{ achievement.name }}</span>
            <span class="date">{{ formatDate(achievement.unlockedAt) }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 今日任务 -->
    <div class="daily-quests-section">
      <h3>今日任务 ({{ completedQuests }}/{{ totalQuests }})</h3>
      <div class="quest-list">
        <div 
          v-for="quest in dailyQuests" 
          :key="quest.id"
          class="quest-item"
          :class="{ completed: quest.status === 'completed' }"
        >
          <div class="quest-checkbox">
            <CheckIcon v-if="quest.status === 'completed'" />
          </div>
          <div class="quest-content">
            <span class="quest-title">{{ quest.title }}</span>
            <div class="quest-progress">
              <div 
                class="progress-fill"
                :style="{ width: `${getQuestProgress(quest)}%` }"
              />
            </div>
          </div>
          <div class="quest-rewards">
            <span class="xp-reward">+{{ quest.rewards.xp }} XP</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '~/stores/user'
import { useGamificationStore } from '~/stores/gamification'

const userStore = useUserStore()
const gamificationStore = useGamificationStore()

// 等级信息
const userLevel = computed(() => gamificationStore.userLevel)
const levelTitle = computed(() => gamificationStore.levelTitle)
const currentXP = computed(() => gamificationStore.currentXP)
const nextLevelXP = computed(() => gamificationStore.nextLevelXP)
const xpProgress = computed(() => (currentXP.value / nextLevelXP.value) * 100)

// 连续学习
const streak = computed(() => gamificationStore.currentStreak)
const last30Days = computed(() => gamificationStore.getLast30DaysActivity())

// 技能
const userSkills = computed(() => gamificationStore.userSkills)

// 成就
const recentAchievements = computed(() => 
  gamificationStore.achievements.slice(0, 5)
)

// 每日任务
const dailyQuests = computed(() => gamificationStore.dailyQuests)
const completedQuests = computed(() => 
  dailyQuests.value.filter(q => q.status === 'completed').length
)
const totalQuests = computed(() => dailyQuests.value.length)

const getQuestProgress = (quest: Quest) => {
  const total = quest.objectives.reduce((sum, obj) => sum + obj.target, 0)
  const current = quest.objectives.reduce((sum, obj) => sum + obj.current, 0)
  return (current / total) * 100
}

const formatDate = (date: Date) => {
  return new Intl.RelativeTimeFormat('zh-CN').format(
    Math.ceil((date.getTime() - Date.now()) / (1000 * 60 * 60 * 24)),
    'day'
  )
}
</script>

<style scoped>
.progress-dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
}

.xp-progress-section {
  grid-column: span 2;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  padding: 1.5rem;
  color: white;
}

.level-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.level-number {
  font-size: 2.5rem;
  font-weight: bold;
}

.level-title {
  font-size: 1.25rem;
  opacity: 0.9;
}

.xp-bar-container {
  position: relative;
  height: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 0.75rem;
  transition: width 0.5s ease;
}

.xp-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.streak-section {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.streak-flame {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease;
}

.streak-flame.on-fire {
  animation: flame 0.5s ease infinite alternate;
}

@keyframes flame {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.streak-count .number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #f59e0b;
}

.streak-calendar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
  margin-top: 1rem;
}

.calendar-day {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  background: #e5e7eb;
}

.calendar-day.completed {
  background: #10b981;
}

.calendar-day.today {
  border: 2px solid #3b82f6;
}

.quest-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.quest-item:hover {
  transform: translateX(4px);
}

.quest-item.completed {
  opacity: 0.7;
}

.quest-checkbox {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quest-item.completed .quest-checkbox {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.quest-progress {
  height: 0.5rem;
  background: #e5e7eb;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-top: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: #3b82f6;
  transition: width 0.3s ease;
}

.achievement-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.achievement-card.common { background: #f3f4f6; }
.achievement-card.uncommon { background: #d1fae5; }
.achievement-card.rare { background: #dbeafe; }
.achievement-card.epic { background: #ede9fe; }
.achievement-card.legendary { background: #fef3c7; }

.achievement-icon {
  font-size: 1.5rem;
}
</style>

社交与协作机制

团队协作系统

// 团队挑战系统
interface TeamChallengeSystem {
  teamSize: { min: 2, max: 5 }
  challengeTypes: {
    race: '团队竞速'
    puzzle: '协作解谜'
    project: '项目挑战'
    tournament: '锦标赛'
  }
}

// 团队管理器
class TeamManager {
  // 创建团队
  async createTeam(params: CreateTeamParams): Promise<Team> {
    const { leaderId, name, description, isPublic } = params
    
    const team: Team = {
      id: generateId(),
      name,
      description,
      leaderId,
      members: [{ userId: leaderId, role: 'leader', joinedAt: new Date() }],
      isPublic,
      stats: {
        totalXP: 0,
        challengesCompleted: 0,
        winRate: 0
      },
      createdAt: new Date()
    }
    
    await this.db.teams.create({ data: team })
    
    return team
  }
  
  // 发起团队挑战
  async initiateTeamChallenge(
    teamId: string,
    challengeType: TeamChallengeType
  ): Promise<TeamChallenge> {
    const team = await this.getTeam(teamId)
    
    // 生成挑战内容
    const challenge = await this.generateTeamChallenge({
      type: challengeType,
      teamSize: team.members.length,
      averageLevel: await this.calculateTeamAverageLevel(team)
    })
    
    // 分配任务给团队成员
    const assignments = this.assignTasksToMembers(challenge, team.members)
    
    return {
      ...challenge,
      teamId,
      assignments,
      status: 'pending',
      startedAt: null,
      completedAt: null
    }
  }
  
  // 分配任务
  private assignTasksToMembers(
    challenge: TeamChallenge,
    members: TeamMember[]
  ): TaskAssignment[] {
    const tasks = challenge.tasks
    const assignments: TaskAssignment[] = []
    
    // 根据成员技能分配任务
    for (const task of tasks) {
      const bestMatch = this.findBestMemberForTask(task, members)
      assignments.push({
        taskId: task.id,
        memberId: bestMatch.userId,
        status: 'assigned'
      })
    }
    
    return assignments
  }
  
  // 处理团队挑战进度
  async updateChallengeProgress(
    challengeId: string,
    memberId: string,
    taskId: string,
    progress: TaskProgress
  ): Promise<ChallengeUpdateResult> {
    const challenge = await this.getChallenge(challengeId)
    
    // 更新任务进度
    const assignment = challenge.assignments.find(a => a.taskId === taskId)
    if (assignment) {
      assignment.progress = progress
      if (progress.completed) {
        assignment.status = 'completed'
      }
    }
    
    // 检查是否所有任务完成
    const allTasksCompleted = challenge.assignments.every(
      a => a.status === 'completed'
    )
    
    if (allTasksCompleted) {
      return this.completeTeamChallenge(challenge)
    }
    
    // 计算团队整体进度
    const overallProgress = this.calculateOverallProgress(challenge)
    
    // 广播进度更新
    await this.broadcastToTeam(challenge.teamId, {
      type: 'progress_update',
      challengeId,
      taskId,
      memberId,
      progress,
      overallProgress
    })
    
    return {
      status: 'in_progress',
      overallProgress,
      updatedAssignments: challenge.assignments
    }
  }
}

// 学习伙伴系统
class StudyBuddySystem {
  // 匹配学习伙伴
  async findStudyBuddy(userId: string): Promise<BuddyMatch[]> {
    const userProfile = await this.getUserProfile(userId)
    
    // 构建匹配条件
    const matchCriteria = {
      skillLevel: { min: userProfile.level - 2, max: userProfile.level + 2 },
      interests: userProfile.interests,
      availability: userProfile.studySchedule,
      learningStyle: userProfile.learningStyle
    }
    
    // 查找匹配的用户
    const candidates = await this.findMatchingUsers(matchCriteria)
    
    // 计算匹配分数
    const matches = candidates.map(candidate => ({
      user: candidate,
      score: this.calculateMatchScore(userProfile, candidate),
      commonInterests: this.findCommonInterests(userProfile, candidate)
    }))
    
    // 排序并返回前5个最佳匹配
    return matches
      .sort((a, b) => b.score - a.score)
      .slice(0, 5)
  }
  
  // 创建学习小组
  async createStudyGroup(params: StudyGroupParams): Promise<StudyGroup> {
    const { creatorId, topic, maxMembers, schedule } = params
    
    const group: StudyGroup = {
      id: generateId(),
      creatorId,
      topic,
      maxMembers,
      schedule,
      members: [{ userId: creatorId, role: 'creator', joinedAt: new Date() }],
      activities: [],
      stats: {
        totalStudyHours: 0,
        averageProgress: 0,
        groupStreak: 0
      },
      createdAt: new Date()
    }
    
    await this.db.studyGroups.create({ data: group })
    
    return group
  }
}

通知与反馈系统

即时反馈机制

// 即时反馈系统
class InstantFeedbackSystem {
  private notificationQueue: NotificationQueue
  private animationEngine: AnimationEngine
  
  // 发送成就通知
  async notifyAchievement(userId: string, achievement: Achievement): Promise<void> {
    const notification: Notification = {
      id: generateId(),
      type: 'achievement',
      userId,
      title: '成就解锁！',
      message: `恭喜获得成就：${achievement.name}`,
      icon: achievement.icon,
      rarity: achievement.rarity,
      rewards: achievement.rewards,
      animation: 'achievement_unlock',
      sound: `achievement_${achievement.rarity}`,
      priority: 'high',
      createdAt: new Date()
    }
    
    // 推送通知
    await this.pushNotification(notification)
    
    // 触发庆祝动画
    await this.animationEngine.play('celebration', {
      type: 'achievement',
      rarity: achievement.rarity
    })
  }
  
  // 发送升级通知
  async notifyLevelUp(
    userId: string, 
    oldLevel: number, 
    newLevel: number,
    newPrivileges: Privilege[]
  ): Promise<void> {
    const notification: Notification = {
      id: generateId(),
      type: 'level_up',
      userId,
      title: '等级提升！',
      message: `你已升到 ${newLevel} 级`,
      oldLevel,
      newLevel,
      newPrivileges,
      animation: 'level_up',
      sound: 'level_up',
      priority: 'high',
      createdAt: new Date()
    }
    
    await this.pushNotification(notification)
    
    // 播放升级动画
    await this.animationEngine.play('level_up', {
      oldLevel,
      newLevel
    })
  }
  
  // 发送连续学习提醒
  async notifyStreakReminder(userId: string, streak: number): Promise<void> {
    const hoursUntilReset = this.calculateHoursUntilStreakReset()
    
    const notification: Notification = {
      id: generateId(),
      type: 'streak_reminder',
      userId,
      title: '别忘了今天的学习！',
      message: `你已连续学习 ${streak} 天，继续保持！`,
      urgency: hoursUntilReset < 3 ? 'urgent' : 'normal',
      action: {
        type: 'open_lesson',
        label: '开始学习'
      },
      createdAt: new Date()
    }
    
    await this.pushNotification(notification)
  }
}

奖励与虚拟经济

虚拟货币系统

// 虚拟货币系统
interface VirtualCurrencySystem {
  currencies: {
    coins: {
      name: '金币'
      description: '通用虚拟货币，可通过学习和任务获得'
      earnMethods: ['完成课程', '每日任务', '成就奖励', '排行榜奖励']
      spendMethods: ['购买道具', '解锁内容', '定制外观']
    }
    gems: {
      name: '钻石'
      description: '高级虚拟货币，较难获得'
      earnMethods: ['特殊成就', '活动奖励', '连续学习里程碑']
      spendMethods: ['购买高级道具', '加速进度', '独家内容']
    }
  }
}

// 虚拟商店系统
class VirtualStore {
  // 获取商店物品
  async getStoreItems(userId: string): Promise<StoreCategory[]> {
    const userProfile = await this.getUserProfile(userId)
    
    return [
      {
        id: 'powerups',
        name: '道具',
        items: [
          {
            id: 'streak_shield',
            name: '连续保护盾',
            description: '保护你的连续学习天数，即使一天不学习也不会中断',
            price: { currency: 'coins', amount: 500 },
            duration: '1天',
            maxOwned: 3
          },
          {
            id: 'xp_boost',
            name: '经验加成',
            description: '获得的经验值翻倍',
            price: { currency: 'coins', amount: 200 },
            duration: '1小时',
            maxOwned: 5
          },
          {
            id: 'hint_token',
            name: '提示令牌',
            description: '在测验中获得一次提示',
            price: { currency: 'coins', amount: 50 },
            consumable: true
          }
        ]
      },
      {
        id: 'cosmetics',
        name: '外观',
        items: [
          {
            id: 'avatar_frame_gold',
            name: '金色头像框',
            description: '为你的头像添加闪亮的金色边框',
            price: { currency: 'gems', amount: 100 },
            permanent: true
          },
          {
            id: 'theme_dark',
            name: '深色主题',
            description: '解锁深色学习界面',
            price: { currency: 'coins', amount: 1000 },
            permanent: true
          }
        ]
      },
      {
        id: 'content',
        name: '内容',
        items: [
          {
            id: 'bonus_lesson_pack',
            name: '额外课程包',
            description: '解锁5节高级课程',
            price: { currency: 'gems', amount: 200 },
            permanent: true,
            requires: { level: 10 }
          }
        ]
      }
    ]
  }
  
  // 购买物品
  async purchaseItem(
    userId: string, 
    itemId: string
  ): Promise<PurchaseResult> {
    const item = await this.getItem(itemId)
    const userWallet = await this.getUserWallet(userId)
    
    // 检查余额
    if (userWallet[item.price.currency] < item.price.amount) {
      return { success: false, reason: 'insufficient_funds' }
    }
    
    // 检查拥有数量限制
    if (item.maxOwned) {
      const owned = await this.getUserItemCount(userId, itemId)
      if (owned >= item.maxOwned) {
        return { success: false, reason: 'max_owned_reached' }
      }
    }
    
    // 检查等级要求
    if (item.requires?.level) {
      const userLevel = await this.getUserLevel(userId)
      if (userLevel < item.requires.level) {
        return { success: false, reason: 'level_requirement_not_met' }
      }
    }
    
    // 执行购买
    await this.db.transaction(async (tx) => {
      // 扣除货币
      await tx.wallets.update({
        where: { userId },
        data: {
          [item.price.currency]: {
            decrement: item.price.amount
          }
        }
      })
      
      // 添加物品
      await tx.userInventory.create({
        data: {
          userId,
          itemId,
          acquiredAt: new Date(),
          expiresAt: item.duration ? this.calculateExpiry(item.duration) : null
        }
      })
    })
    
    return { success: true, item }
  }
}

游戏化最佳实践

设计原则

// 游戏化设计原则
const gamificationPrinciples = {
  // 1. 有意义的选择
  meaningfulChoices: {
    description: '让用户的选择有实际影响',
    examples: [
      '选择不同的学习路径获得不同技能',
      '投资技能点到不同方向',
      '选择加入不同的团队'
    ]
  },
  
  // 2. 渐进式复杂度
  progressiveComplexity: {
    description: '逐步引入游戏机制',
    stages: [
      { level: '1-5', features: ['基础积分', '简单成就'] },
      { level: '6-10', features: ['每日任务', '排行榜'] },
      { level: '11-20', features: ['团队挑战', '社交功能'] },
      { level: '21+', features: ['PvP对战', '高级定制'] }
    ]
  },
  
  // 3. 即时反馈
  instantFeedback: {
    description: '每个行动都有即时响应',
    implementations: [
      '答题正确立即显示动画和音效',
      '获得积分时数字跳动效果',
      '完成任务时庆祝动画'
    ]
  },
  
  // 4. 社交证明
  socialProof: {
    description: '展示其他学习者的成就和进度',
    implementations: [
      '"小明刚刚完成了这个课程"',
      '"1000人正在学习这个主题"',
      '好友学习动态'
    ]
  },
  
  // 5. 稀缺性与紧迫性
  scarcityUrgency: {
    description: '适度使用限时和限量元素',
    implementations: [
      '限时挑战和活动',
      '限量版徽章和奖励',
      '连续学习天数的紧迫感'
    ],
    caution: '避免过度使用造成焦虑'
  }
}

避免的陷阱

// 游戏化设计陷阱
const gamificationPitfalls = {
  // 1. 过度依赖外在奖励
  overExtrinsicRewards: {
    problem: '用户只为奖励学习，失去内在动机',
    solution: [
      '奖励要与学习成就相关',
      '逐步减少奖励频率',
      '强调学习本身的价值'
    ]
  },
  
  // 2. 排行榜带来的负面影响
  leaderboardNegatives: {
    problem: '底部用户感到挫败',
    solution: [
      '提供多维度排行榜',
      '使用好友/小组排行榜',
      '展示个人进步而非绝对排名',
      '使用百分位而非具体排名'
    ]
  },
  
  // 3. 复杂度过高
  overComplexity: {
    problem: '用户被复杂的系统吓退',
    solution: [
      '新手引导和教程',
      '渐进式解锁功能',
      '简洁的UI设计'
    ]
  },
  
  // 4. 奖励通胀
  rewardInflation: {
    problem: '奖励失去价值和意义',
    solution: [
      '稀有奖励保持稀有',
      '奖励获取难度合理',
      '定期引入新奖励'
    ]
  }
}

数据分析与优化

游戏化指标追踪

// 游戏化分析系统
class GamificationAnalytics {
  // 追踪参与度指标
  async trackEngagementMetrics(userId: string): Promise<EngagementMetrics> {
    const timeRange = { start: daysAgo(30), end: now() }
    
    return {
      // 日活跃率
      dailyActiveRate: await this.calculateDAU(timeRange),
      
      // 功能使用率
      featureUsage: {
        dailyQuests: await this.getFeatureUsage('daily_quests', timeRange),
        achievements: await this.getFeatureUsage('achievements', timeRange),
        leaderboard: await this.getFeatureUsage('leaderboard', timeRange),
        challenges: await this.getFeatureUsage('challenges', timeRange)
      },
      
      // 留存率
      retention: {
        day1: await this.getRetention(1),
        day7: await this.getRetention(7),
        day30: await this.getRetention(30)
      },
      
      // 平均会话时长
      avgSessionDuration: await this.getAvgSessionDuration(timeRange),
      
      // 任务完成率
      questCompletionRate: await this.getQuestCompletionRate(timeRange)
    }
  }
  
  // A/B 测试游戏化功能
  async runGamificationABTest(testConfig: ABTestConfig): Promise<ABTestResult> {
    const { feature, variants, metrics, duration } = testConfig
    
    // 分配用户到不同变体
    const assignments = await this.assignUsersToVariants(variants)
    
    // 收集测试数据
    const results = await this.collectTestData(assignments, metrics, duration)
    
    // 统计分析
    return this.analyzeTestResults(results)
  }
}

总结

游戏化设计是提升在线教育体验的强大工具。成功的游戏化需要：

1. 深入理解动机理论：基于自我决定理论设计满足自主性、能力感和归属感的机制
2. 平衡内外动机：外在奖励引导，内在动机驱动长期学习
3. 个性化体验：根据用户特征和行为调整游戏化元素
4. 持续优化：基于数据分析不断改进游戏化设计
5. 避免常见陷阱：防止奖励通胀、排行榜负面影响等问题

游戏化不是简单地添加积分和徽章，而是创造有意义的学习体验，让学习本身成为一种享受。