变色方块 逻辑完善。

1 增加按钮事件
2 完善过关判断

entry/src/main/ets/model/box.ets

@@ -1,5 +1,12 @@
 @Observed
 export class box {
+  setBox(colIndex: number, rowIndex: number, turned: boolean, index: number) {
+    this.colIndex = colIndex;
+    this.rowIndex = rowIndex;
+    this.turned = turned;
+    this.index = index;
+  }
+
   colIndex: number
   rowIndex: number
   turned: boolean

entry/src/main/ets/model/boxes.ets

@@ -3,6 +3,7 @@ import { box } from './box'
 export class boxes {
   boxes: Array<box> = []
   index: number = 0
+  different: number = 0
 
   constructor() {
   }
@@ -15,6 +16,32 @@ export class boxes {
       }
     }
   }
+
+  reload(startLine: number) {
+    this.different = startLine * startLine - (startLine - 1) * (startLine - 1)
+    for (let i = 0; i < this.different; i++) {
+      this.boxes.push(new box(0, 0, false, 0))
+    }
+    this.index = 0
+    for (let i = 1; i <= startLine; i++) {
+      for (let j = 1; j <= startLine; j++) {
+        this.boxes[this.index].setBox(i, j, false, this.index)
+        this.index++
+      }
+    }
+  }
+
+  reLevel() {
+    for (let index = 0; index < this.boxes.length; index++) {
+      this.boxes[index].turned = false;
+    }
+  }
+
+  restart() {
+    this.index = 0;
+    this.boxes.splice(1, this.boxes.length - 1)
+    this.boxes[0].setBox(1, 1, false, 0)
+  }
 }
 
 const boxList = new boxes()

entry/src/main/ets/pages/ColorBlocks.ets

@@ -5,15 +5,53 @@ import { boxView } from '../view/boxView';
 
 @Entry
 @Component
+@Preview
 struct ColorBlocks {
   @State message: string = 'Hello World';
-  @State startLine: number = 3;
+  @State startLine: number = 1;
   @State boxes: boxes = boxList;
 
   aboutToAppear(): void {
     boxList.init(this.startLine)
   }
 
+  turnover(box: box) {
+    if (box.rowIndex < this.startLine) {
+      this.boxes.boxes[box.index + 1].changeTurned()
+    }
+    if (box.rowIndex > 1) {
+      this.boxes.boxes[box.index - 1].changeTurned()
+    }
+    if (box.colIndex > 1) {
+      this.boxes.boxes[box.index - this.startLine].changeTurned()
+    }
+    if (box.colIndex < this.startLine) {
+      this.boxes.boxes[box.index + this.startLine].changeTurned()
+    }
+    box.turned = !box.turned
+    this.isWin()
+  }
+
+  isWin() {
+    for (let i = 0; i < this.boxes.boxes.length; i++) {
+      if (!this.boxes.boxes[i].turned) {
+        return
+      }
+    }
+    AlertDialog.show({
+      title: "成功过关",
+      message: `恭喜你成功通过${this.startLine}关`,
+      confirm: {
+        value: "ok",
+        action: () => {
+          this.startLine++
+          this.boxes.reload(this.startLine)
+        }
+      }
+    })
+
+  }
+
   build() {
     Column() {
       HdNav({ title: '变色方块', showRightIcon: false })
@@ -23,9 +61,44 @@ struct ColorBlocks {
       }.width("100%").height("13%")
 
       Row() {
-        Button("重新开始")
-        Button("重玩本关")
-        Button("游戏介绍")
+        Button("重新开始").onClick(() => {
+          AlertDialog.show({
+            title: "重新开始",
+            message: "重新从第一关开始游戏",
+            confirm: {
+              value: "ok",
+              action: () => {
+                this.startLine = 1
+                this.boxes.restart()
+              }
+            }
+          })
+        })
+        Button("重玩本关").onClick(() => {
+          AlertDialog.show({
+            title: "重玩本关",
+            message: `重玩第${this.startLine}关`,
+            confirm: {
+              value: "ok",
+              action: () => {
+                this.boxes.reLevel()
+              }
+            }
+          })
+        })
+        Button("游戏介绍").onClick(() => {
+          AlertDialog.show({
+            title: "游戏说明",
+            message: "1. 游戏玩法：点击色块会改变其自身和上下左右相邻色块的颜色" +
+              "\n" +
+              "2. 当所有色块全部变为橘色，即为过关",
+            confirm: {
+              value: "ok",
+              action: () => {
+              }
+            }
+          })
+        })
       }.width("98%").height("23%").justifyContent(FlexAlign.SpaceAround)
 
       Column() {
@@ -37,10 +110,11 @@ struct ColorBlocks {
               Row() {
                 boxView({ b: box })
               }.onClick(() => {
-                box.turned = !box.turned
+                this.turnover(box)
               })
 
-            }
+            }.width("60%")
+            .height(400 / this.startLine)
           })
         }
 

entry/src/main/ets/view/boxView.ets

@@ -7,7 +7,12 @@ export struct boxView {
   build() {
     Row() {
 
-    }.height(80).width(80).backgroundColor(this.b.turned ? Color.Orange : Color.Blue)
-    .margin(20)
+    }.height("80%").width("90%").backgroundColor(this.b.turned ? Color.Orange : Color.Blue)
+    .margin({
+      top: 5,
+      right: 0,
+      bottom: 0,
+      left: 0
+    })
   }
 }