鸿蒙记忆翻牌小游戏:不用一张图片,Canvas画牌面、.rotate()做3D翻牌

举报
yd_223584905 发表于 2026/11/15 08:05:06 2026/11/15
【摘要】 今天浏览了鸿蒙实践中心“记忆翻牌配对”案例:牌面不用图片、由 Canvas 向量路径实时生成;翻牌用 .rotate() 绕 Y 轴 3D 旋转加 .animation() 驱动;状态用 @State/@Observed/@ObjectLink,成绩用 Preferences 持久化。纯端侧、无云端依赖,适合新手照着跑。

今天在鸿蒙开发实践中心浏览了“记忆翻牌配对”案例(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 的扩展提示加深色主题、在设置页开关形状颜色,或者把最佳记录上传云端,做成端云协同版。

以上是今天的实践记录。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0)

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。