HarmonyOS应用开发实战:猫猫大作战-@State 得分与状态管理
·


前言
在「猫猫大作战」中,猫咪等级提升是合并进化的结果:三只同级猫合并为一只高级猫。等级从 1(小猫)到 6(传奇猫)共六级。
一、等级提升
// 合并升级逻辑
private upgradeCat(x: number, y: number, currentLevel: CatLevel): Cat {
const newLevel = Math.min(currentLevel + 1, CatLevel.LEGENDARY) as CatLevel;
const newCat = new Cat(
`cat_${Date.now()}`,
newLevel,
x, y,
false
);
this.board[y][x] = newCat;
console.info(`升级: Lv.${currentLevel} → Lv.${newLevel} 在 (${x},${y})`);
return newCat;
}
二、等级配置
| 等级 | 名称 | 颜色 | 得分 | 尺寸 |
|---|---|---|---|---|
| 1 | 小猫 | #FF9800 | 10 | 40vp |
| 2 | 中猫 | #F57C00 | 30 | 50vp |
| 3 | 大猫 | #E65100 | 90 | 60vp |
| 4 | 特大猫 | #D84315 | 270 | 70vp |
| 5 | 超级猫 | #BF360C | 810 | 80vp |
| 6 | 传奇猫 | #8E24AA | 2430 | 90vp |
三、等级限制
// 传奇猫(Lv.6)不能再升级
if (currentLevel >= CatLevel.LEGENDARY) {
// 不再触发合并
return false;
}
// 达到传奇猫时显示特殊效果
if (newLevel === CatLevel.LEGENDARY) {
this.showLegendaryEffect(x, y);
}
四、UI 展示
@Builder
CatIcon(level: CatLevel) {
Text(CatConfig[level].emoji)
.fontSize(CatConfig[level].size * 0.5)
.backgroundColor(CatConfig[level].color)
.borderRadius(CatConfig[level].size / 2)
.shadow({ radius: 4, color: 'rgba(0,0,0,0.2)' })
}
五、最佳实践
- 等级上限控制:
Math.min(level + 1, LEGENDARY) - 传奇猫特效:达到最高级时播放特殊动画
- 颜色递进:等级越高颜色越深、越醒目
总结
等级提升通过三合一规则逐级进化,传奇猫为最高等级。核心要点:三只同级合一只、 Math.min 控制在 LEGENDARY 以内、 每级颜色/大小/得分递增。
如果这篇文章对你有帮助,欢迎点赞👍、收藏⭐、关注🔔,你的支持是我持续创作的动力!
相关资源:
更多推荐


所有评论(0)