鸿蒙NEXT开发案例：记忆翻牌

zhongcx

发布于 2024-12-1 06:11

浏览

0收藏

鸿蒙NEXT开发案例：记忆翻牌-鸿蒙开发者社区

【引言】
在本案例中，我们将使用鸿蒙NEXT框架开发一个简单的记忆翻牌游戏。该游戏的核心逻辑是玩家通过翻转卡片来寻找匹配的对。本文将详细介绍游戏的实现过程，包括卡片的展示、匹配逻辑以及用户交互。
【开发环境准备】
电脑系统：windows 10
开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
工程版本：API 12
真机：Mate 60 Pro
语言：ArkTS、ArkUI
【项目结构】
本项目主要由两个类组成：
GameCell：表示游戏中的单个卡片，负责卡片的状态管理和动画效果。
MemoryGame：游戏组件，管理游戏逻辑和用户界面。
GameCell类
GameCell类是游戏的基本单元，包含以下属性和方法：
属性：

value: 卡片的值（如"A", "B"等）。
isVisible: 控制卡片是否可见。
isFrontVisible: 控制卡片是否正面朝上。
isMatched: 标记卡片是否已被匹配。
isAnimationRunning: 动画是否正在运行。
rotationAngle: 卡片的旋转角度。

方法：

revealFace(animationTime, callback): 展示卡片正面并执行动画。
hideFace(animationTime, callback): 隐藏卡片正面并执行动画。
reset(): 重置卡片状态。
动画实现
在revealFace和hideFace方法中，我们使用animateToImmediately函数来实现卡片的翻转动画。通过设置动画的持续时间、迭代次数和曲线类型，确保用户体验流畅。
MemoryGame类
MemoryGame类是游戏的核心组件，负责管理游戏状态和用户交互。
属性：

gameCells: 存储所有卡片的数组。
cellSize: 卡片的大小。
cellSpacing: 卡片之间的间距。
transitionDuration: 动画过渡的持续时间。
firstSelectedIndex和secondSelectedIndex: 记录用户选择的卡片索引。
isGameOver: 游戏是否结束的标志。

方法：

aboutToAppear(): 初始化游戏卡片并洗牌。
shuffleCards(): 洗牌算法，随机打乱卡片顺序。
checkForMatch(): 检查用户选择的两张卡片是否匹配。
build(): 构建游戏界面。

游戏逻辑
在checkForMatch方法中，我们判断用户选择的两张卡片是否相同。如果相同，则将其标记为已匹配；如果不同，则在延迟后隐藏卡片。游戏结束时，弹出对话框提示用户胜利，并提供重新开始的选项。
用户界面
在build方法中，我们使用Column和Flex布局来组织卡片的展示。每张卡片通过Text组件显示其值，并根据状态调整背景颜色和旋转角度。用户点击卡片时，触发相应的翻转和匹配逻辑。
结论
通过本案例，我们展示了如何使用鸿蒙NEXT框架开发一个简单的记忆翻牌游戏。该项目不仅涵盖了基本的游戏逻辑，还展示了如何实现动画效果和用户交互。希望这个案例能为您在鸿蒙NEXT开发中提供一些启发和帮助。
【完整代码】

import { promptAction } from '@kit.ArkUI' // 导入用于显示对话框的模块
 
// 使用装饰器来观察数据变化
@ObservedV2
class GameCell { // 定义单元格类
  @Trace value: string; // 单元格的值，即卡片上的图案
  @Trace isVisible: boolean = false; // 控制卡片是否可见
  isFrontVisible: boolean = false; // 控制卡片是否正面朝上
  isMatched: boolean = false; // 标记卡片是否已被匹配
  isAnimationRunning: boolean = false; // 动画是否正在运行
  @Trace rotationAngle: number = 0; // 卡片的旋转角度
 
  constructor(value: string) { // 构造函数，初始化单元格
    this.value = value; // 设置单元格的值
  }
 
  // 展示卡片正面的方法
  revealFace(animationTime: number, callback?: () => void) {
    if (this.isAnimationRunning) { // 如果已经有动画在运行，则返回
      return;
    }
    this.isAnimationRunning = true; // 设置动画状态为运行中
    animateToImmediately({ // 开始动画
      duration: animationTime, // 动画持续时间
      iterations: 1, // 动画迭代次数
      curve: Curve.Linear, // 动画曲线类型
      onFinish: () => { // 动画完成后的回调
        animateToImmediately({ // 再次开始动画
          duration: animationTime, // 动画持续时间
          iterations: 1, // 动画迭代次数
          curve: Curve.Linear, // 动画曲线类型
          onFinish: () => { // 动画完成后的回调
            this.isFrontVisible = true; // 设置卡片为正面朝上
            this.isAnimationRunning = false; // 设置动画状态为停止
            if (callback) { // 如果有回调函数，则执行
              callback();
            }
          }
        }, () => { // 动画开始时的回调
          this.isVisible = true; // 设置卡片为可见
          this.rotationAngle = 0; // 设置旋转角度为0
        });
      }
    }, () => { // 动画开始时的回调
      this.isVisible = false; // 设置卡片为不可见
      this.rotationAngle = 90; // 设置旋转角度为90度
    });
  }
 
  // 重置卡片状态的方法
  reset() {
    this.isVisible = false; // 设置卡片为不可见
    this.rotationAngle = 180; // 设置旋转角度为180度
    this.isFrontVisible = false; // 设置卡片为背面朝上
    this.isAnimationRunning = false; // 设置动画状态为停止
    this.isMatched = false; // 设置卡片为未匹配
  }
 
  // 隐藏卡片正面的方法
  hideFace(animationTime: number, callback?: () => void) {
    if (this.isAnimationRunning) { // 如果已经有动画在运行，则返回
      return;
    }
    this.isAnimationRunning = true; // 设置动画状态为运行中
    animateToImmediately({ // 开始动画
      duration: animationTime, // 动画持续时间
      iterations: 1, // 动画迭代次数
      curve: Curve.Linear, // 动画曲线类型
      onFinish: () => { // 动画完成后的回调
        animateToImmediately({ // 再次开始动画
          duration: animationTime, // 动画持续时间
          iterations: 1, // 动画迭代次数
          curve: Curve.Linear, // 动画曲线类型
          onFinish: () => { // 动画完成后的回调
            this.isFrontVisible = false; // 设置卡片为背面朝上
            this.isAnimationRunning = false; // 设置动画状态为停止
            if (callback) { // 如果有回调函数，则执行
              callback();
            }
          }
        }, () => { // 动画开始时的回调
          this.isVisible = false; // 设置卡片为不可见
          this.rotationAngle = 180; // 设置旋转角度为180度
        });
      }
    }, () => { // 动画开始时的回调
      this.isVisible = true; // 设置卡片为可见
      this.rotationAngle = 90; // 设置旋转角度为90度
    });
  }
}
 
// 定义组件入口
@Entry
@Component
struct MemoryGame { // 定义游戏组件
  @State gameCells: GameCell[] = []; // 存储游戏中的所有单元格
  @State cellSize: number = 150; // 单元格的大小
  @State cellSpacing: number = 5; // 单元格之间的间距
  @State transitionDuration: number = 150; // 过渡动画的持续时间
  @State firstSelectedIndex: number | null = null; // 记录第一次选择的卡片索引
  @State secondSelectedIndex: number | null = null; // 记录第二次选择的卡片索引
  @State isGameOver: boolean = false; // 游戏是否结束
  @State startTime: number = 0; // 游戏开始时间
 
  aboutToAppear(): void { // 组件即将显示时触发
    let cardValues: string[] = ["A", "B", "C", "D", "E", "F", "G", "H"]; // 定义卡片的值
    for (let value of cardValues) { // 遍历卡片值
      this.gameCells.push(new GameCell(value)); // 添加到游戏单元格数组中
      this.gameCells.push(new GameCell(value)); // 每个值添加两次以形成对
    }
    this.shuffleCards(); // 洗牌
  }
 
  // 洗牌方法
  shuffleCards() {
    this.firstSelectedIndex = null; // 清除第一次选择索引
    this.secondSelectedIndex = null; // 清除第二次选择索引
    this.isGameOver = false; // 游戏未结束
    this.startTime = Date.now(); // 设置游戏开始时间为当前时间
 
    for (let i = 0; i < 16; i++) { // 重置所有单元格状态
      this.gameCells[i].reset();
    }
 
    for (let i = this.gameCells.length - 1; i > 0; i--) { // 洗牌算法
      const randomIndex = Math.floor(Math.random() * (i + 1)); // 随机索引
      let tempValue = this.gameCells[i].value; // 临时保存值
      this.gameCells[i].value = this.gameCells[randomIndex].value; // 交换值
      this.gameCells[randomIndex].value = tempValue; // 交换值
    }
  }
 
  // 检查卡片是否匹配的方法
  checkForMatch() {
    if (this.firstSelectedIndex !== null && this.secondSelectedIndex !== null) { // 确保两个索引都不为空
      const firstCell = this.gameCells[this.firstSelectedIndex]; // 获取第一个选中的单元格
      const secondCell = this.gameCells[this.secondSelectedIndex]; // 获取第二个选中的单元格
 
      if (firstCell.value === secondCell.value) { // 如果两个单元格的值相同
        firstCell.isMatched = true; // 标记为已匹配
        secondCell.isMatched = true; // 标记为已匹配
        this.firstSelectedIndex = null; // 清除第一次选择索引
        this.secondSelectedIndex = null; // 清除第二次选择索引
 
        if (this.gameCells.every(cell => cell.isMatched)) { // 如果所有单元格都已匹配
          this.isGameOver = true; // 游戏结束
          console.info("游戏结束"); // 打印信息
          promptAction.showDialog({ // 显示对话框
            title: '游戏胜利！', // 对话框标题
            message: '恭喜你，用时：' + ((Date.now() - this.startTime) / 1000).toFixed(3) + '秒', // 对话框消息
            buttons: [{ text: '重新开始', color: '#ffa500' }] // 对话框按钮
          }).then(() => { // 对话框关闭后执行
            this.shuffleCards(); // 重新开始游戏
          });
        }
      } else { // 如果两个单元格的值不同
        setTimeout(() => { // 延迟一段时间后
          if (this.firstSelectedIndex !== null) { // 如果第一个索引不为空
            this.gameCells[this.firstSelectedIndex].hideFace(this.transitionDuration, () => { // 隐藏卡片
              this.firstSelectedIndex = null; // 清除第一次选择索引
            });
          }
          if (this.secondSelectedIndex !== null) { // 如果第二个索引不为空
            this.gameCells[this.secondSelectedIndex].hideFace(this.transitionDuration, () => { // 隐藏卡片
              this.secondSelectedIndex = null; // 清除第二次选择索引
            });
          }
        }, 400); // 延迟时间
      }
    }
  }
 
  // 构建游戏界面的方法
  build() {
    Column({ space: 20 }) { // 创建一个垂直布局
      Flex({ wrap: FlexWrap.Wrap }) { // 创建一个可换行的弹性布局
        ForEach(this.gameCells, (gameCell: GameCell, index: number) => { // 遍历游戏单元格
          Text(`${gameCell.isVisible ? gameCell.value : ''}`) // 显示单元格的值或空字符串
            .width(`${this.cellSize}lpx`) // 设置宽度
            .height(`${this.cellSize}lpx`) // 设置高度
            .margin(`${this.cellSpacing}lpx`) // 设置边距
            .fontSize(`${this.cellSize / 2}lpx`) // 设置字体大小
            .textAlign(TextAlign.Center) // 文本居中
            .backgroundColor(gameCell.isVisible ? Color.Orange : Color.Gray) // 设置背景颜色
            .fontColor(Color.White) // 设置字体颜色
            .borderRadius(5) // 设置圆角
            .rotate({ // 设置旋转
              x: 0,
              y: 1,
              z: 0,
              angle: gameCell.rotationAngle, // 旋转角度
              centerX: `${this.cellSize / 2}lpx`, // 中心点X坐标
              centerY: `${this.cellSize / 2}lpx`, // 中心点Y坐标
            })
            .onClick(() => { // 单击事件处理
              if (this.isGameOver) { // 如果游戏已结束
                console.info("游戏已结束"); // 打印信息
                return;
              }
              if (gameCell.isMatched) { // 如果单元格已匹配
                console.info("当前已标记"); // 打印信息
                return;
              }
              if (this.firstSelectedIndex == null) { // 如果没有第一次选择
                this.firstSelectedIndex = index; // 设置第一次选择索引
                if (!gameCell.isFrontVisible) { // 如果不是正面朝上
                  gameCell.revealFace(this.transitionDuration); // 展示正面
                }
              } else if (this.firstSelectedIndex == index) { // 如果与第一次选择相同
                console.info("和上一次点击的是一样的，不予处理"); // 打印信息
              } else if (this.secondSelectedIndex == null) { // 如果没有第二次选择
                this.secondSelectedIndex = index; // 设置第二次选择索引
                if (!gameCell.isFrontVisible) { // 如果不是正面朝上
                  gameCell.revealFace(this.transitionDuration, () => { // 展示正面
                    this.checkForMatch(); // 检查是否匹配
                  });
                }
              }
            });
        });
      }.width(`${(this.cellSize + this.cellSpacing * 2) * 4}lpx`); // 设置宽度
      Button('重新开始') // 创建“重新开始”按钮
        .onClick(() => { // 按钮点击事件
          this.shuffleCards(); // 重新开始游戏
        });
    }.height('100%').width('100%'); // 设置高度和宽度
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.

分类

HarmonyOS

标签

鸿蒙

51CTO

51CTO博客

51CTO学堂

鸿蒙NEXT开发案例：记忆翻牌

订阅鸿蒙技术特刊，精选内容抢先看