HarmonyOS6.0开发之记忆翻牌游戏，轻松拿捏！

Hello！我是程序员Feri------ 13 年编程老炮，实战派技术人，拆解编程技巧、分享副业心得，记录程序员的进阶路，AI 时代一起稳稳向前。

有没有觉得自己记忆力"堪比超级计算机"？或者想找个既能摸鱼放松、又能偷偷锻炼大脑的小游戏？

今天，咱们就来拆解一款鸿蒙系统上的记忆翻牌游戏------看看它是怎么用ArkTS"变魔术"般做出来的，顺便挑战下自己的记忆力～

一、游戏规则：翻出"记忆王者"的快感

这款游戏长这样：4×6的卡片网格里藏着12对字母，玩家每次翻两张牌。

配对成功 ？那这对牌就会"乖乖留在场上"；配对失败？它们会"害羞地翻回去"，等你下次挑战。直到所有牌都成功配对，就算"通关封神"！

游戏顶部还会实时显示总分和本轮分数，每成功配对一次，分数就"噌"地涨一点，成就感直接拉满～

二、技术拆解：ArkTS是怎么"造"出这个游戏的？

1. 状态管理：让数据和UI"心灵相通"

在鸿蒙的ArkTS里，有个超实用的@State装饰器，它就像"实时同步的魔法标记"。

比如游戏里的分数score1（总分）、score2（本轮分数），还有卡片上的字母数组letters，只要这些数据变了，对应的UI就会自动更新------分数涨了，界面上的数字立刻变；翻牌成功，字母也会马上显示出来。

typescript 复制代码

@State score1: number = 0; // 总分，成功一次加1
@State score2: number = 0; // 本轮分数，通关后重置
@State letters: string[] = []; // 卡片显示的内容（初始是问号"？"）

2. UI布局：用Grid搭出"卡片矩阵"

要做4×6的卡片网格，鸿蒙的Grid组件简直是"天选之子"。通过columnsTemplate设置"1fr 1fr 1fr 1fr"（4列，每列占比相同），再用rowsGap和columnsGap控制间距，就能轻松搭出整齐的卡片布局。

卡片本身是个Text组件，还加了自定义样式（边框、圆角、背景色），让每个"问号卡片"看起来精致又统一：

typescript 复制代码

@Extend(Text)
function textStyles(str: string) {
  .fontSize(30)
  .fontWeight(800)
  .padding(15)
  .width(&#34;100%&#34;)
  .height(60)
  .fontColor(str == &#34;?&#34; ? Color.Black : Color.Green) // 问号是黑色，配对成功变绿色
  .textAlign(TextAlign.Center)
  .border({ width: 1, color: Color.Gray })
  .backgroundColor(Color.White)
  .borderRadius(8)
}

3. 随机算法：让字母"乱中有序"

游戏最核心的逻辑之一，是随机生成12对不重复的字母。代码里用了一个小技巧：先准备好26个英文字母的数组，然后随机选12个字母，每个字母生成两个"副本"，再把这些字母随机分配到24个卡片位置上（确保不重复）。

这个"避免重复"的逻辑，靠reandIndex函数实现------每次从可用索引里随机选一个，选完就从"候选池"里删掉，保证每个位置只被分配一次：

typescript 复制代码

reandIndex() {
  let i = Math.floor(Math.random() * this.indexs.length); // 随机选一个候选索引
  let i1 = this.indexs[i]; // 拿到真正要分配的位置
  this.indexs.splice(i, 1); // 从候选池移除，避免重复
  return i1;
}

4. 翻牌动画与交互：让游戏"活"起来

翻牌交互 ：点击卡片时，调用check函数，判断是"第一次翻牌"还是"第二次翻牌"。如果两次翻的字母相同，就"锁定成功"；如果不同，就用setTimeout延迟300毫秒，让卡片"翻回去"（把字母重新设为问号）。
通关提示 ：当本轮分数score2等于12（12对全部配对），就会弹出"恭喜通关"的Toast提示，给玩家满满的仪式感～

typescript 复制代码

check(index: number) {
  // 点击卡片，显示对应字母
  this.letters[index] = this.letters1[index];
  // ... 省略判断第一次/第二次翻牌的逻辑 ...
  if (this.letters1[this.clickIndex[0]] == this.letters1[this.clickIndex[1]]) {
    // 配对成功，分数+1
    this.score1 += 1;
    this.score2 += 1;
    this.clickIndex = []; // 清空已点击的索引
  } else {
    // 配对失败，延迟300ms翻回去
    setTimeout(() => {
      for (let i = 0; i < this.clickIndex.length; i++) {
        this.letters[this.clickIndex[i]] = '?';
      }
      this.clickIndex = [];
    }, 300)
  }
  // 通关判断
  if (this.score2 == this.letters.length / 2) {
    this.getUIContext().getPromptAction().showToast({
      message: &#34;恭喜你，通关啦，真优秀！&#34;
    })
  }
}

三、玩起来多爽？------ 既练脑，又学技术

实际玩的时候，看着卡片"啪"地翻过来，再"啪"地翻回去（或者稳稳留在场上），动画流畅得像真的在玩实体卡牌～而且每成功一次，分数实时上涨，通关时的Toast提示更是"成就感爆棚"。

更妙的是，这款小游戏还藏着ArkTS的核心技术：状态管理、组件化布局、动画交互、异步操作（setTimeout）...... 相当于边玩边学，把枯燥的技术知识点"偷偷塞进游戏里"，好玩又能涨知识～

四、最后：快来挑战你的"记忆极限"！

不管你是鸿蒙开发者，还是单纯想找个小游戏放松大脑，这款记忆翻牌都值得试试～

如果大家想考取鸿蒙开发者认证的，欢迎加入我的专属考试链接中：

要是觉得默认难度太简单，甚至可以自己改代码：比如增加卡片数量、换成更复杂的图案，或者调整翻牌后的延迟时间，打造属于自己的"记忆训练神器"～