当前位置：首页 > news >正文

Vue 3 + LocalStorage 实现博客游戏化系统：成就墙、每日签到、积分商城

news 2026/4/22 1:26:48

前言

游戏化是一种有效的用户留存策略，通过积分、等级、成就等机制，可以：

激励用户持续访问
增加用户互动意愿
提升网站活跃度

今天分享如何为博客添加一套完整的游戏化系统！

功能设计

游戏化系统 ├── 每日签到 │ ├── 连续签到奖励 │ ├── 签到日历 │ └── 补签功能 ├── 积分系统 │ ├── 积分获取规则 │ ├── 积分消费商城 │ └── 积分排行榜 ├── 成就系统 │ ├── 成就分类 │ ├── 成就进度 │ └── 成就奖励 └── 等级系统 ├── 等级计算 ├── 等级特权 └── 升级动画

核心实现

1. 用户成长数据

// src/types/gamification.tsexportinterfaceUserStats{userId:stringtotalPoints:numberlevel:numberexperience:number// 签到数据checkInDays:number// 累计签到天数currentStreak:number// 连续签到天数lastCheckIn:number// 上次签到时间// 成就进度achievements:Record<string,number>// achievementId -> progress// 统计数据articlesRead:numbercommentsMade:numberlikesGiven:numbersharesMade:number}exportinterfaceAchievement{id:stringname:stringdescription:stringicon:stringcategory:'reading'|'writing'|'social'|'special'requirement:numberreward:number// 奖励积分secret?:boolean// 秘密成就}// 成就定义exportconstACHIEVEMENTS:Achievement[]=[{id:'first_visit',name:'初次到访',description:'访问博客',icon:'🎉',category:'special',requirement:1,reward:10},{id:'first_comment',name:'初次互动',description:'发表评论',icon:'💬',category:'social',requirement:1,reward:20},{id:'reading_master',name:'阅读达人',description:'阅读10篇文章',icon:'📚',category:'reading',requirement:10,reward:50},{id:'week_streak',name:'一周打卡',description:'连续签到7天',icon:'🔥',category:'special',requirement:7,reward:100},{id:'month_streak',name:'月度坚持',description:'连续签到30天',icon:'🏆',category:'special',requirement:30,reward:500}]// 等级配置exportconstLEVEL_CONFIG=[{level:1,minExp:0,title:'小白'},{level:2,minExp:100,title:'新手'},{level:3,minExp:300,title:'学徒'},{level:4,minExp:600,title:'修士'},{level:5,minExp:1000,title:'专家'},{level:6,minExp:1500,title:'大师'},{level:7,minExp:2100,title:'宗师'},{level:8,minExp:2800,title:'传奇'},{level:9,minExp:3600,title:'神话'},{level:10,minExp:4500,title:'至尊'}]

2. 游戏化服务

// src/services/gamification.tsimport{defineStore}from'pinia'import{ref,computed}from'vue'importtype{UserStats,Achievement}from'@/types/gamification'import{ACHIEVEMENTS,LEVEL_CONFIG}from'@/types/gamification'constSTORAGE_KEY='blog_user_stats'exportconstuseGamificationStore=defineStore('gamification',()=>{constuserStats=ref<UserStats>({userId:'guest',totalPoints:0,level:1,experience:0,checkInDays:0,currentStreak:0,lastCheckIn:0,achievements:{},articlesRead:0,commentsMade:0,likesGiven:0,sharesMade:0})// 加载数据functionloadStats(){constdata=localStorage.getItem(STORAGE_KEY)if(data){userStats.value=JSON.parse(data)}// 检查首次访问if(!userStats.value.lastCheckIn){awardAchievement('first_visit')}}// 保存数据functionsaveStats(){localStorage.setItem(STORAGE_KEY,JSON.stringify(userStats.value))}// 添加积分functionaddPoints(amount:number,reason:string){userStats.value.totalPoints+=amount userStats.value.experience+=amountcheckLevelUp()saveStats()}// 检查升级functioncheckLevelUp(){constexp=userStats.value.experiencefor(leti=LEVEL_CONFIG.length-1;i>=0;i--){if(exp>=LEVEL_CONFIG[i].minExp){if(userStats.value.level<LEVEL_CONFIG[i].level){userStats.value.level=LEVEL_CONFIG[i].levelshowLevelUpNotification(LEVEL_CONFIG[i])}break}}}// 升级通知functionshowLevelUpNotification(config:typeofLEVEL_CONFIG[0]){// 可以触发弹窗或动画console.log(`🎉 恭喜升级到${config.level}级${config.title}！`)}// 签到functioncheckIn():{success:boolean;bonus:number;message:string}{constnow=Date.now()consttoday=newDate().setHours(0,0,0,0)constlastCheckIn=newDate(userStats.value.lastCheckIn).setHours(0,0,0,0)// 今日已签到if(lastCheckIn===today){return{success:false,bonus:0,message:'今日已签到'}}// 计算连续签到constyesterday=today-86400000if(lastCheckIn===yesterday){userStats.value.currentStreak++}else{userStats.value.currentStreak=1}userStats.value.checkInDays++userStats.value.lastCheckIn=now// 计算奖励letbonus=10// 基础奖励bonus+=Math.min(userStats.value.currentStreak*2,20)// 连续签到加成addPoints(bonus,'每日签到')return{success:true,bonus,message:`连续签到${userStats.value.currentStreak}天，获得${bonus}积分！`}}// 奖励成就functionawardAchievement(achievementId:string){constachievement=ACHIEVEMENTS.find(a=>a.id===achievementId)if(!achievement)returnfalse// 已解锁if(userStats.value.achievements[achievementId]===1){returnfalse}userStats.value.achievements[achievementId]=1addPoints(achievement.reward,`成就解锁:${achievement.name}`)// 检查连续签到成就if(achievementId==='week_streak'&&userStats.value.currentStreak>=7){awardAchievement('week_streak')}if(achievementId==='month_streak'&&userStats.value.currentStreak>=30){awardAchievement('month_streak')}saveStats()showAchievementNotification(achievement)returntrue}// 更新成就进度functionupdateAchievementProgress(achievementId:string,progress:number){constachievement=ACHIEVEMENTS.find(a=>a.id===achievementId)if(!achievement)returnconstcurrent=userStats.value.achievements[achievementId]||0if(progress>current){userStats.value.achievements[achievementId]=progressif(progress>=achievement.requirement){awardAchievement(achievementId)}saveStats()}}// 成就通知functionshowAchievementNotification(achievement:Achievement){console.log(`🏆 解锁成就:${achievement.icon}${achievement.name}`)}// 获取用户等级信息constlevelInfo=computed(()=>{constcurrentLevel=LEVEL_CONFIG.find(l=>l.level===userStats.value.level)constnextLevel=LEVEL_CONFIG.find(l=>l.level===userStats.value.level+1)return{current:currentLevel,next:nextLevel,progress:nextLevel?((userStats.value.experience-currentLevel!.minExp)/(nextLevel.minExp-currentLevel!.minExp))*100:100}})// 获取未解锁的成就constunlockedAchievements=computed(()=>{returnACHIEVEMENTS.filter(a=>userStats.value.achievements[a.id]===1)})constlockedAchievements=computed(()=>{returnACHIEVEMENTS.filter(a=>userStats.value.achievements[a.id]!==1)})// 检查是否可以签到constcanCheckIn=computed(()=>{consttoday=newDate().setHours(0,0,0,0)constlastCheckIn=newDate(userStats.value.lastCheckIn).setHours(0,0,0,0)returnlastCheckIn!==today})loadStats()return{userStats,levelInfo,unlockedAchievements,lockedAchievements,canCheckIn,checkIn,addPoints,updateAchievementProgress,awardAchievement}})

3. 签到组件

<!-- src/components/gamification/CheckIn.vue --> <template> <el-card class="checkin-card"> <template #header> <div class="header"> <span class="title">📅 每日签到</span> <span class="streak">🔥 连续 {{ currentStreak }} 天</span> </div> </template> <!-- 签到日历 --> <div class="calendar"> <div class="weekday"> <span v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day"> {{ day }} </span> </div> <div class="days"> <div v-for="(day, index) in calendarDays" :key="index" class="day" :class="{ 'checked': day.checked, 'today': day.isToday, 'future': day.future }" > {{ day.date }} </div> </div> </div> <!-- 签到按钮 --> <div class="checkin-action"> <el-button type="primary" size="large" :disabled="!canCheckIn" @click="handleCheckIn" > {{ canCheckIn ? '🎁 立即签到' : '✅ 今日已签到' }} </el-button> <div v-if="canCheckIn" class="bonus-info"> 签到可获得 <strong>{{ baseBonus }}</strong> 积分 <span v-if="currentStreak > 0">+{{ streakBonus }} (连续加成)</span> </div> </div> <!-- 签到成功动画 --> <transition name="bounce"> <div v-if="showSuccess" class="success-popup"> <div class="success-content"> <span class="icon">🎉</span> <div class="message">{{ successMessage }}</div> </div> </div> </transition> </el-card> </template> <script setup lang="ts"> import { ref, computed } from 'vue' import { useGamificationStore } from '@/services/gamification' const gamificationStore = useGamificationStore() const showSuccess = ref(false) const successMessage = ref('') const canCheckIn = computed(() => gamificationStore.canCheckIn) const currentStreak = computed(() => gamificationStore.userStats.currentStreak) const baseBonus = computed(() => 10) const streakBonus = computed(() => Math.min(currentStreak.value * 2, 20)) // 生成日历数据 const calendarDays = computed(() => { const today = new Date() const year = today.getFullYear() const month = today.getMonth() const firstDay = new Date(year, month, 1).getDay() const daysInMonth = new Date(year, month + 1, 0).getDate() const days = [] // 填充空白 for (let i = 0; i < firstDay; i++) { days.push({ date: '', checked: false, isToday: false, future: true }) } // 填充日期 for (let i = 1; i <= daysInMonth; i++) { const date = new Date(year, month, i) const dateStr = date.toDateString() const isToday = date.toDateString() === today.toDateString() const isFuture = date > today // 检查是否签到（简化逻辑） const lastCheckIn = gamificationStore.userStats.lastCheckIn const checked = lastCheckIn && new Date(lastCheckIn).getDate() >= i days.push({ date: i, checked, isToday, future: isFuture }) } return days }) function handleCheckIn() { const result = gamificationStore.checkIn() if (result.success) { successMessage.value = result.message showSuccess.value = true setTimeout(() => { showSuccess.value = false }, 3000) } } </script> <style scoped> .checkin-card { max-width: 400px; margin: 0 auto; } .header { display: flex; justify-content: space-between; align-items: center; } .streak { color: var(--el-color-danger); font-weight: 600; } .calendar { margin-bottom: 20px; } .weekday { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--el-text-color-secondary); margin-bottom: 8px; } .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 50%; background: var(--el-fill-color-light); } .day.checked { background: var(--el-color-success-light-9); color: var(--el-color-success); } .day.today { border: 2px solid var(--el-color-primary); } .day.future { color: var(--el-text-color-placeholder); } .checkin-action { text-align: center; } .bonus-info { margin-top: 12px; font-size: 13px; color: var(--el-text-color-secondary); } .bonus-info strong { color: var(--el-color-danger); } .success-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; } .success-content { background: white; padding: 40px; border-radius: 16px; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .success-content .icon { font-size: 60px; } .success-content .message { margin-top: 16px; font-size: 18px; font-weight: 600; } .bounce-enter-active { animation: bounce-in 0.5s; } @keyframes bounce-in { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } </style>

4. 成就墙组件

<!-- src/components/gamification/AchievementWall.vue --> <template> <div class="achievement-wall"> <h3>🏆 成就墙</h3> <!-- 已解锁 --> <div class="section"> <h4>已解锁 ({{ unlockedAchievements.length }})</h4> <div class="achievement-grid"> <div v-for="achievement in unlockedAchievements" :key="achievement.id" class="achievement unlocked" > <span class="icon">{{ achievement.icon }}</span> <div class="info"> <div class="name">{{ achievement.name }}</div> <div class="desc">{{ achievement.description }}</div> <div class="reward">+{{ achievement.reward }} 积分</div> </div> </div> </div> </div> <!-- 未解锁 --> <div class="section"> <h4>未解锁 ({{ lockedAchievements.length }})</h4> <div class="achievement-grid"> <div v-for="achievement in lockedAchievements" :key="achievement.id" class="achievement" :class="{ secret: achievement.secret }" > <span class="icon">{{ achievement.secret ? '❓' : achievement.icon }}</span> <div class="info"> <div class="name">{{ achievement.secret ? '???' : achievement.name }}</div> <div class="desc"> {{ achievement.secret ? '秘密成就' : achievement.description }} </div> <div class="progress" v-if="!achievement.secret"> <el-progress :percentage="getProgress(achievement)" :show-text="false" :stroke-width="6" /> <span class="progress-text"> {{ getProgressValue(achievement) }} / {{ achievement.requirement }} </span> </div> </div> </div> </div> </div> </div> </template> <script setup lang="ts"> import { computed } from 'vue' import { useGamificationStore } from '@/services/gamification' import type { Achievement } from '@/types/gamification' const gamificationStore = useGamificationStore() const unlockedAchievements = computed(() => gamificationStore.unlockedAchievements) const lockedAchievements = computed(() => gamificationStore.lockedAchievements) function getProgress(achievement: Achievement) { const progress = gamificationStore.userStats.achievements[achievement.id] || 0 return Math.min((progress / achievement.requirement) * 100, 100) } function getProgressValue(achievement: Achievement) { return gamificationStore.userStats.achievements[achievement.id] || 0 } </script> <style scoped> .achievement-wall { padding: 20px; } .section { margin-bottom: 24px; } .section h4 { font-size: 14px; color: var(--el-text-color-secondary); margin-bottom: 12px; } .achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .achievement { display: flex; gap: 12px; padding: 16px; background: var(--el-fill-color-light); border-radius: 12px; transition: all 0.3s; } .achievement.unlocked { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .achievement.secret { opacity: 0.6; } .achievement:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .icon { font-size: 32px; flex-shrink: 0; } .name { font-weight: 600; margin-bottom: 4px; } .desc { font-size: 13px; opacity: 0.8; } .reward { margin-top: 8px; font-size: 12px; color: #ffd700; } .progress { margin-top: 8px; } .progress-text { font-size: 11px; color: var(--el-text-color-secondary); } </style>