鸿蒙开发案例：进京赶考（4）

系列文章目录

鸿蒙开发案例：进京赶考（1）

鸿蒙开发案例：进京赶考（2）

鸿蒙开发案例：进京赶考（3）

鸿蒙开发案例：进京赶考（4）

---

案例介绍

“进京赶考”是一款抽卡游戏，玩家在游戏界面中通过随机抽取到不同颜色的卡片，可获得不 同积分；抽卡结束后，根据积分的高低对游戏成绩进行判定（状元、榜眼、探花、进士）。本篇接上篇实现GameAbility的游戏界面及抽卡功能，运行效果如图所示

---

一、完成 Ability 间通信

在 GameAbility.ts 文件中获取 Entryability 传递过来的数据，通过 AppStorage 来存储 Want 对象，修改GameAbility的onCreate方法如下：该方法的want参数携带着参数，首先通过want取得传递的参数name的值，然后通过AppStorage的SetOrCreate方法存储成应用级变量

onCreate(want, launchParam) {
    let index:string=want?.parameters?.name;
    AppStorage.SetOrCreate('name',index);
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

修改 GamePage.ets文件，增加如下代码获取应用级变量的值

let name=AppStorage.Get<string>('name');

二、游戏功能实现

1.规则

在着手游戏功能的代码实现之前，先阐明游戏的具体规则如下：

⚫ 共有红黄蓝绿四张卡,初始分数 10 分，抽卡机会共 3 次；

⚫ 红卡+50，黄卡+10，蓝卡-5，绿卡归 0；

⚫ 每轮游戏共 3 次抽卡机会，每抽一次、记录一次得分

⚫ 抽卡结束后根据总得分进行成绩分段：状元（≥50）、榜眼（40）、探花（25）、进士 （10）、壮志未酬（<10）；

⚫ 抽到红卡（得分≥50）游戏结束，再次点击抽卡时会自动清 0 剩余次数；

⚫ 抽到绿卡（得分归 0）游戏结束，自动清 0 剩余次数；

⚫ 3 次机会用完,游戏结束；

⚫ 游戏结束可点击 “看结果”按钮可查看最终成绩。

2.修改GamePage.ets文件

注意：为方便通过数组操作图片资源，把图片资源移到resources-rawfile-images(images为新建目录）目录下，如图所示

代码如下：

let name=AppStorage.Get<string>('name');
@Entry
@Component
struct GamePage {
  imgArray:string[]=['images/red.jpg','images/yellow.jpg','images/blue.jpg','images/purple.jpg','images/green.jpg']
  @State score:number=10//分数
  @State times:number=3//抽卡次数
  build() {
    Column({space:4}){
      //统计栏
      Row({space:5}){
         Text(name+'得分'+this.score).textStyle()
         Text('抽卡次数'+this.times).textStyle()
      }.rowStyle()

      //展示区
      Row({space:4}){
        Column({space:4}){
          Image($rawfile(`${this.imgArray[0]}`)).borderColor(0xf21225).imgStyle()
          Text('状元')
        }
        Column({space:4}){
          Image($rawfile(`${this.imgArray[1]}`)).borderColor(0xfbd501).imgStyle()
          Text('榜眼')
        }
      }

      Row({space:4}){
        Column({space:4}){
          Image($rawfile(`${this.imgArray[2]}`)).borderColor(0x3f97fd).imgStyle()
          Text('探花')
        }
        Column({space:4}){
          Image($rawfile(`${this.imgArray[3]}`)).borderColor(0x9800fc).imgStyle()
          Text('榜眼')
        }
      }
      Button('去抽卡')
        .cardStyle()
      Button('看结果')
        .cardStyle()

    }.width('100%')
    .height('100%')
  }
}

//自定义按钮样式
@Extend(Button) function cardStyle () {
  .width('50%')
  .height('8%')
  .borderRadius(8)
  .fontSize(24)
  .fontWeight(600)
  .shadow({ radius: 10, color: 0xD3D3D3, offsetX: 20, offsetY: 20 })
  .margin({ top: '2%' })
}
//自定义图片样式
@Extend(Image) function imgStyle () {
  .width('45%')
  .height('25%')
  .borderWidth(4)
  .borderRadius(30)
}
//自定义文本样式
@Extend(Text) function textStyle () {
  .fontSize(24)
  .fontWeight(600)
  .fontColor(0xB0C4DE)
}
//自定义行样式
@Extend(Row) function rowStyle () {
  .width('80%')
  .height('10%')
  .borderRadius(10)
  .margin({ top: '1%', bottom: '4%' })
  .shadow({ radius: 10, color: 0xD3D3D3, offsetX: 20, offsetY: 20 })
  .backgroundColor(0xFF8247)
  .justifyContent(FlexAlign.Center)
}

经过如上修改，在真机上的运行效果如图所示：

 3.实现去抽卡功能

点击“去抽卡”按钮，随机获取四张卡中的任意一张，随机获取势必要生成1-4之间的随机数

继续修改GamePage.ets文件，增加如下变量的定义：

  @State rangNumber: number = 0 //随机生成数
  @State level: number = 0 //卡等级

增加随机生成卡等级的函数

//定义随机抽卡函数
  randomGrad(){
     let rand=Math.random();
     this.rangNumber=1+Math.round(rand*3);//四舍五入
     switch (this.rangNumber){
       //抽到红卡，+50
       case 1:this.score=this.score+50
              break;
       //抽到黄卡，+50
       case 2:this.score=this.score+10
              break;
      //抽到蓝卡，-5
       case 3:this.score=this.score-5
              break;
       //抽到绿卡，归0
       case 4:this.score=0
     }
    //弹窗回显相应颜色卡片
    this.level=this.rangNumber
  }

 在common文件夹下新建customComponent文件夹，如图所示：

新建CustomDialog.ets文件，创建自定义弹窗组件，用以呈现抽卡过程，代码如下：

//自定义弹窗组件
@CustomDialog
export struct CustomDialogExample {
  @Link level: number //双向传递
  @Link score: number
  imgArray:string[]=['images/redCard.png','images/yellowCard.png','images/blueCard.png','images/greenCard.png']
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  build() {
    Column() {
      Text('再抽一次').fontSize(24).margin({ top: '5%',bottom:'5%' })
        .onClick(() => {
          this.controller.close()
          this.cancel()
        })
      Image($rawfile(this.imgArray[this.level-1])).height('80%').width('90%').margin({bottom:'10%'})
    }
  }
}

 自定义弹窗

  //自定义弹窗
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept,
      score: $score,
      level: $level
    }),
    cancel: this.existApp,
    autoCancel: true
  })
  //弹窗回调
  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  existApp() {
    console.info('Click the callback in the blank area')
  }

 创建抽卡积分和抽卡次数判断函数

//创建抽卡积分和抽卡次数判断函数
  judgeFunction() {
    this.times--
    if (this.times >= 0 && this.score < 50 && this.score > 0) {
      this.randomGrade()
      this.dialogController.open()
    } else {
      if (this.times < 0) {
        this.times = 0
        AlertDialog.show(
          {
            title: '提示',
            message: '您的抽卡次数已用完',
            confirm: {
              value: '关闭',
              action: () => {
                console.info('Button-clicking callback')
              }
            },
            cancel: () => {
              console.info('Closed callbacks')
            }
          }
        )
      }
      if (this.score >= 50) {
        this.times = 0
        AlertDialog.show(
          {
            title: '提示',
            message: '您已高中状元,无须再抽',
            confirm: {
              value: '关闭',
              action: () => {
                console.info('Button-clicking callback')
              }
            },
            cancel: () => {
              console.info('Closed callbacks')
            }
          }
        )
      }
      if (this.score <= 0) {
        this.times = 0
        AlertDialog.show(
          {
            title: '提示',
            message: '很遗憾,下次继续努力', confirm: {
            value: '关闭',
            action: () => {
              console.info('Button-clicking callback')
            }
          },
            cancel: () => {
              console.info('Closed callbacks')
            }
          }
        )
      }
    }
  }

---

总结

例如：本篇实现了抽卡界面及其抽卡功能，主要涉及自定义对话框组件及其调用，随机数生成，应用级数据生成。