ArkUI eTS舒尔特方格游戏

import { Title } from '../common/home/title'import { Body } from '../common/home/body'@Entry@Componentstruct Index {  build() {    Column() {      // 标题      Title();      // 游戏主界面      Body();    }    .alignItems(HorizontalAlign.Center)  }}

@Componentexport struct Title {  build() {    // 主界面标题    Column() {      Text("舒尔特方格")        .fontSize(34).margin({top: 30})        .fontWeight(FontWeight.Bold)      Text("SchulteGrid")        .fontSize(20).margin({top: 3, bottom: 60})        .fontWeight(FontWeight.Bold)    }    .width('100%')  }}

import router from '@system.router'@Componentexport struct Body {  build() {    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {      // 3x3, 4x4, 5x5 按钮布局      Row() {        Button("3X3", { type: ButtonType.Circle, stateEffect: true })          .width(70).height(70).backgroundColor(0x317aff).fontSize(20)          .onClick(() => { this.startGame(3) })        Button("4X4", { type: ButtonType.Circle, stateEffect: true })          .width(70).height(70).backgroundColor(0x317aff).fontSize(20)          .margin({left: 30, right: 30})          .onClick(() => { this.startGame(4) })        Button("5X5", { type: ButtonType.Circle, stateEffect: true })          .width(70).height(70).backgroundColor(0x317aff).fontSize(20)          .onClick(() => { this.startGame(5) })      }.alignItems(VerticalAlign.Center).margin({bottom: 30})      // 6x6, 7x7 按钮布局      Row() {        Button("6X6", { type: ButtonType.Circle, stateEffect: true })          .width(70).height(70).backgroundColor(0x317aff).fontSize(20)          .onClick(() => { this.startGame(6) })        Button("7X7", { type: ButtonType.Circle, stateEffect: true })          .width(70).height(70).backgroundColor(0x317aff).fontSize(20)          .margin({left: 30}).onClick(() => { this.startGame(7) })      }.alignItems(VerticalAlign.Center).margin({bottom: 30})      // 8x8, 9x9 按钮布局      Row() {        Button("8X8", { type: ButtonType.Circle, stateEffect: true })          .width(70).height(70).backgroundColor(0x317aff).fontSize(20)          .onClick(() => { this.startGame(8) })        Button("9X9", { type: ButtonType.Circle, stateEffect: true })          .width(70).height(70).backgroundColor(0x317aff).fontSize(20)          .margin({left: 30})          .onClick(() => { this.startGame(9) })      }.alignItems(VerticalAlign.Center)    }    .width('100%')    .height('100%')  }  // 开始游戏  startGame(idx:number) {    router.push({      uri: 'pages/game',      params: {index: idx}    })  }}

import router from '@system.router'import { Title } from '../common/game/title'import { Body } from '../common/game/body'import { Footer } from '../common/game/footer'import { getRandomData } from '../utils/utils'@Entry@Componentstruct Game {  // 接收主界面传递过来的阵列数字  private idx: number = router.getParams().index  @State index: number = this.idx  // 调用函数随机生成相应的字符数字数组  @State numArray: String[] = getRandomData(this.idx)  // 与body和footer子组件绑定, 变化时, body和footer子组件也会跟着变化  @State time: number = 0  build() {    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {      // 标题和返回按钮      Title()      // 游戏界面      Body({idx: $index, numArray: $numArray, time: $time})      // 状态框      Footer({idx: $index, time: $time})    }    .width('100%')    .height('100%')  }}

import router from '@system.router'@Componentexport struct Title {  build() {    Row() {      // 返回游戏主界面      Image($r("app.media.back"))        .objectFit(ImageFit.Contain)        .width(50)        .height(50)        .margin({ right: 10 })        .onClick(()=>{ this.onBack() })      Text("游戏开始")        .fontSize(24)        .fontColor(Color.White)        .fontWeight(FontWeight.Bold)    }    .width('100%')    .padding({ top: 10, bottom: 10})    .backgroundColor(0x317aff)  }  // 回退  onBack() {    router.back();  }}

@Componentexport struct Body {  // 与game父组件绑定, 记录当前的阵列数字  @Link idx: number;  // 与game父组件绑定, 显示相应的数字按钮  @Link numArray: String[];  // 与game父组件绑定, 变化时, 父组件time变量也跟着变化, 同时footer子组件也会跟着变化  @Link time: number;  // 根据不同的阵列, 按钮宽高显示不同的大小  private btnSize: number[] = [32, 18, 12, 8, 6, 4, 4]  // 根据不同的阵列, 按钮字段显示不同大小  private btnFont: number[] = [32, 24, 22, 12, 7, 8, 6]  // 根据不同的阵列, 显示不同界面高度  private gridHeight: number[] = [48, 48, 48, 44, 46, 50, 66]  // 根据不同的阵列, 显示不同的行列  private template: string[] = ['1fr 1fr 1fr', '1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr', '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr']  // 记录当前点击的数字  private flagNum: number = 1  // 开始计时  private startTime: number = new Date().getTime()  build() {    Grid() {      // 循环显示阵列数字按钮      ForEach(this.numArray, (day: string) => {        GridItem() {          Button(day, { type: ButtonType.Circle, stateEffect: true })            .width(this.btnSize[this.idx-3] * this.idx)            .height(this.btnSize[this.idx-3] * this.idx)            .backgroundColor(0x317aff).fontSize(this.btnFont[this.idx-3])            .onClick(() => { this.startGame(Number(day)) })        }      }, day => day)    }    // 根据相应的阵列数字,显示相应的列数字    .columnsTemplate(this.template[this.idx-3])    // 根据相应的阵列数字,显示相应的行数字    .rowsTemplate(this.template[this.idx-3])    .columnsGap(10)    .rowsGap(10)    .width(96+'%')    .height(this.gridHeight[this.idx-3]+'%')  }  // 开始游戏  startGame(num:number) {    // 如果当前点击的数字等于阵列数组长度, 说明点击到最后一个数字, 弹出挑战成功, 计算出总共耗时    if (num == this.numArray.length && this.flagNum == this.numArray.length ) {      AlertDialog.show({ message: '恭喜您挑战成功'})      this.time = (new Date().getTime() - this.startTime) * 1.0 / 1000    }    // 如果点击的数字大于累计的数字,弹出提醒信息    if (num > this.flagNum) {      AlertDialog.show({ message: '请点击小于此数字'})    // 如果点击的数字小于累计的数字,弹出提醒信息    } else if (num < this.flagNum) {      AlertDialog.show({ message: '当前点击的数字,已点击过'})    // 否则累计数字加1    } else {      this.flagNum++    }  }}

@Componentexport struct Footer {  // 与game父组件绑定, 记录当前的阵列数字  @Link idx: number;  // 与game父组件绑定, 变化时, 父组件time变量也跟着变化, 同时footer子组件也会跟着变化  @Link time: number;  build() {    Stack({ alignContent: Alignment.Bottom }) {      Row() {        // 耗时        Button({ type: ButtonType.Capsule, stateEffect: false }) {          Row() {            Image($r('app.media.trophy')).width(20).height(20).margin({ left: 12 })            Text(this.time + '"').fontSize(16).fontColor(0xffffff).margin({ left: 5, right: 12 })          }.alignItems(VerticalAlign.Center).width(100)        }.backgroundColor(0x317aff).opacity(0.7).width(100)        // 显示计时中        Button({ type: ButtonType.Capsule, stateEffect: false }) {          Row() {            Image($r('app.media.time')).width(20).height(20).margin({ left: 12 })            Text('计时中').fontSize(16).fontColor(0xffffff).margin({ left: 5, right: 12 })          }.alignItems(VerticalAlign.Center).width(100)        }.backgroundColor(0x317aff).opacity(0.7).width(100)        .margin({left: 20, right: 20})        // 帮助功能        Button({ type: ButtonType.Capsule, stateEffect: true }) {          Row() {            Image($r('app.media.help')).width(20).height(20).margin({ left: 12 })            Text('帮助').fontSize(16).fontColor(0xffffff).margin({ left: 5, right: 12 })          }.alignItems(VerticalAlign.Center).width(100)        }.backgroundColor(0x317aff).width(100)        .onClick(() => { this.showHelp() })      }    }.width('100%').height(100).margin({ top: 5, bottom: 10 })  }  // 提示游戏帮助  showHelp() {    AlertDialog.show({ message: '以最快速度从 1 选到 ' + (this.idx*this.idx) })  }}

/** * 随机生成1-count参数的整数 * @param idx */export function getRandomData(idx:number): Array<String> {  // 生成count个数字  let count:number = idx * idx;  // 存储生成的字符数字  let result:Array<String> = [];  do {    // 随机生成一个指定范围的数字    let num = Math.floor(Math.random() * count + 1);    // 如果数字不在数组里, 存储到数组    if (-1 == result.indexOf(num+'')) {      result.push(num+'');    }    // 如果随机生成的数字存储到数组的长度等于阵列数, 跳出死循环    if (count == result.length) {      break;    }  }while(true)  // 返回数组  return result;};