✨ Feat: can match

entry/src/main/ets/components/CardView.ets

@@ -62,17 +62,18 @@ export struct CardView {
       .backgroundColor(this.card.isFaceUp ? '#fff5f0f0' : '#fffa9e0f')
       .aspectRatio(2 / 3)
       .rotate({ x: 0, y: 1, z: 0, angle: this.cardRotateAngle })
+      .visibility(this.card.isMatch ? Visibility.Hidden : Visibility.Visible)
       .onClick(() => {
         this.reverse()
       })
 
       Text(this.card.name)
-        .textAlign(TextAlign.Center)
-        .visibility(this.card.isFaceUp ? Visibility.Visible : Visibility.Hidden)
         .fontSize(20)
+        .textAlign(TextAlign.Center)
+        .visibility(!this.card.isFaceUp || this.card.isMatch ? Visibility.Hidden : Visibility.Visible)
         .position({ x: '50%', y: '50%' })
         .markAnchor({ x: '50%', y: '50%' })
-      //.rotate(this.card.isMatcsh ? {angle:this.angle} : {angle:360})
+      // .rotate(this.card.isMatch ? { angle: this.angle } : { angle: 360 })
     }
     .padding({ left: 2, right: 2 })
     .margin({ top: 10 })

entry/src/main/ets/components/GameView.ets

@@ -8,7 +8,7 @@ export struct GameView {
 
   @Builder
   getTitle() {
-    Text("卡片小游戏")
+    Text("字母消消乐")
       .fontSize(20)
       .fontWeight(FontWeight.Bold)
       .width('100%')

entry/src/main/ets/models/viewModel.ets

@@ -2,13 +2,12 @@ import { Card } from './Card'
 import { ObservedArray } from './ObservedArray'
 
 export class CardViewModel {
-  cardList: ObservedArray<Card> = []
+  cardList: ObservedArray<Card> = null
 
   constructor() {
     this.initCardList()
   }
 
-
   // 初始化cardList赋值
   private initCardList() {
     const words = ["A", "A", "B", "B", "C", "C", "D", "D", "E", "E", "F", "F"]
@@ -32,4 +31,22 @@ export class CardViewModel {
   public isAllFaceUp() {
     return !this.cardList.some(card =>!card.isFaceUp)
   }
+
+  //
+  public match() {
+    // 如果翻了两个一样的
+    const cards = this.cardList.filter(item => item.isFaceUp && !item.isMatch)
+    if (cards.length < 2) return
+    if (cards.length === 2) {
+      const [card1, card2] = cards
+      console.log(card1.name, card2.name)
+      if (card1.name === card2.name) {
+        card1.isMatch = true
+        card2.isMatch = true
+      }
+    }
+    if (cards.length === 3) {
+      setTimeout(() => cards.forEach(item => item.isFaceUp = false), 100)
+    }
+  }
 }

entry/src/main/ets/pages/GamePage.ets

@@ -7,24 +7,25 @@ import router from '@ohos.router'
 @Component
 struct Index {
   @State viewModel: CardViewModel = new CardViewModel()
-  @Provide @Watch("handleAllFaceUp") count: number = 0
+  @Provide @Watch("handleFaceUp") count: number = 0
   private time: number = 0
-  private interval: number
+  private intervalTimer: number
 
   onPageShow() {
-    this.interval = setInterval(() => {
+    this.intervalTimer = setInterval(() => {
       this.time++;
     }, 1000)
   }
 
   onPageHide() {
-    if (this.interval) clearTimeout(this.interval)
+    if (this.intervalTimer) clearTimeout(this.intervalTimer)
   }
 
   /**
    * 当所有Cards都反面，跳转About page
    */
-  handleAllFaceUp() {
+  handleFaceUp() {
+    // 如果全部翻面
     if (this.viewModel.isAllFaceUp()) {
       router.pushUrl({
         url: "pages/OverPage",
@@ -33,7 +34,10 @@ struct Index {
           time: this.time,
         }
       })
+      return
     }
+    this.viewModel.match()
+
   }
 
   build() {