鸿蒙记忆翻牌小游戏:不用一张图片,Canvas画牌面、.rotate()做3D翻牌
今天在鸿蒙开发实践中心浏览了“记忆翻牌配对”案例(HarmonyOS-APP-memory-card-game),并给它的 GitCode 代码仓点了 Star。这个纯端侧小游戏把新手最该掌握的三件基本功串在了一个完整可玩的 App 里,值得记下来。
一、牌面不用图片,Canvas 现场画
牌面不依赖任何图片素材:6 种几何形状 × 8 种高对比颜色由 Canvas 向量路径实时生成;牌背也是 Canvas 绘制的多边形几何纹样平铺。好处很直接:零图片素材,包体小,不用操心图片适配;想换主题,只要换形状和颜色参数。
二、翻牌动画:.rotate() + .animation()
点击牌背,Card 组件经 @ObjectLink 观察到 flipAngle 变化,由 .rotate() 绕 Y 轴做 3D 旋转,再由 .animation() 隐式驱动;配对成功卡片淡出加缩放消除,配对失败停留约 900ms 后自动翻回背面。状态变化即驱动动画,不用手动重建组件。
三、状态与数据:@State / @Observed / @ObjectLink + Preferences
三档难度:简单 4×4、中等 4 列×5 行、困难 6×6,牌数随难度递增;计时与步数实时统计,每档难度独立记录最佳用时和最少步数,用 Preferences 持久化,重启后保持;胜利弹窗展示本轮成绩,并标记是否打破纪录。
四、边界很干净,适合新手照着跑
纯端侧单机游戏,全部逻辑与渲染收拢在设备本地,无云端依赖、无账号体系、无网络请求。按 README 的说明:编译 API 24(6.1.1),目标与兼容 API 23(6.1.0),.rotate() 3D 旋转需要 API 23+;跑通路径是 hvigorw assembleHap 编译出 HAP,再用 hdc install 安装到模拟器。README 还写了验证记录:2026-08-25 在 HarmonyOS 模拟器 6.1.0 上全功能通过。
小结:这个案例的价值不在游戏本身,而在于它把 Grid 网格布局、Canvas 自定义绘制、状态驱动动画串在了一起。下一步可按 README 的扩展提示加深色主题、在设置页开关形状颜色,或者把最佳记录上传云端,做成端云协同版。
以上是今天的实践记录。
- 点赞
- 收藏
- 关注作者
评论(0)