HarmonyOS应用开发实战：猫猫大作战-pauseOverlay 暂停遮罩

前言暂停遮罩是游戏中的通用交互——游戏进行时玩家点击暂停弹出一个半透明遮罩覆盖游戏画面显示暂停菜单。一、暂停遮罩组件Componentexportstruct PauseOverlay{Propscore:number;LinkonResume:()void;LinkonRestart:()void;LinkonBackToMenu:()void;build(){Column(){Column(){Text(⏸️).fontSize(48).margin({bottom:12})Text(游戏暂停).fontSize(24).fontWeight(FontWeight.Bold).fontColor(#2C3E50).margin({bottom:8})Text(当前得分:${this.score}).fontSize(16).fontColor(#7F8C8D).margin({bottom:24})Button(继续游戏).width(80%).height(48).fontSize(17).fontWeight(FontWeight.Bold).fontColor(#FFFFFF).backgroundColor(#2ECC71).borderRadius(24).margin({bottom:12}).onClick(()this.onResume())Button(重新开始).width(80%).height(48).fontColor(#FFFFFF).backgroundColor(#F39C12).borderRadius(24).margin({bottom:12}).onClick(()this.onRestart())Button(返回主菜单).width(80%).height(48).fontColor(#7F8C8D).backgroundColor(#ECF0F1).borderRadius(24).onClick(()this.onBackToMenu())}.width(80%).padding(32).backgroundColor(#FFFFFF).borderRadius(20).shadow({radius:20,color:rgba(0,0,0,0.15)})}.width(100%).height(100%).backgroundColor(rgba(44, 62, 80, 0.6)).justifyContent(FlexAlign.Center)}}二、暂停流程// 暂停pauseGame(){if(this.gameStateGameState.PLAYING){this.gameStateGameState.PAUSED;this.clearTimers();}}// 恢复resumeGame(){if(this.gameStateGameState.PAUSED){this.gameStateGameState.PLAYING;this.startTimers();}}// 在 build 中if(this.gameStateGameState.PAUSED){PauseOverlay({...})}三、暂停时的数据保留数据暂停时恢复时棋盘保留保留得分保留保留定时器清除重建动画暂停恢复四、最佳实践半透明遮罩让玩家仍能看到游戏画面定时器停启暂停停定时器恢复重启数据保留暂停不销毁游戏状态三个按钮继续、重新开始、返回主菜单总结暂停遮罩覆盖游戏画面提供继续、重开、返回菜单三个操作。核心要点半透明遮罩rgba(44,62,80,0.6)、clearTimers()暂停定时器、 数据保留恢复时重建。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Component 组件文档第 92 篇dot-indicator第 94 篇alert-dialog第 95 篇toast