鸿蒙开发案例：进京赶考（5）完结

系列文章目录

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

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

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

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

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

---

案例介绍

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

---

一、创建积分等级判断函数

抽卡结束后，可点击“去查看”按钮跳转至 FinalGrade 查看最终的游戏结果。 首先，创建积分等级判断函数，对积分进行等级判断（“甲”、“乙”、“丙”、“丁”四个 积分等级，对应“状元”、“榜眼”、“探花”、“进士”四个游戏结果）。

在GamePage.ets文件中增加创建积分等级判断函数，代码如下：

  //积分等级判断函数
  confirmGrade() {
    if (this.score >= 50) {
      this.gradeLevel = '甲' //状元
    }
    if (this.score == 40) {
      this.gradeLevel = '乙' //榜眼
    }
    if (this.score == 25) {
      this.gradeLevel = '丙' //探花
    }
    if (this.score < 25 && this.score > 0) {
      this.gradeLevel = '丁' //进士
    }
    if (this.score <= 0) {
      this.gradeLevel = '末' //落榜
    }
  }

二、创建 FinalGrade.ets 文件，用以显示游戏结果

代码如下：

import router from '@ohos.router'
@Entry
@Component
struct FinalGrade {
  //从路由中获取功名等级
  @State lv: string = router.getParams()['lv']
  build() {
    Column({ space: 10 }) {
      Column() {
        if (this.lv == '甲') {
          Image($rawfile('images/red.jpg')).imgStyle()
          Text('春风得意马蹄疾').textStyle().fontColor(0xf21225)
          Text('一日看尽长安花').textStyle().fontColor(0xf21225)
        }
        else if (this.lv == '乙') {
          Image($rawfile('images/yellow.jpg')).imgStyle()
          Text('丹阙万人窥榜眼').textStyle().fontColor(0xfbd501)
          Text('碧幢千骑拥遨头').textStyle().fontColor(0xfbd501)
        }
        else if (this.lv == '丙') {
          Image($rawfile('images/blue.jpg')).imgStyle()
          Text('探花时节日偏长').textStyle().fontColor(0x3f97fd)
          Text('恬淡春风称意忙').textStyle().fontColor(0x3f97fd)
        }
        else if (this.lv == '丁') {
          Image($rawfile('images/purple.jpg')).imgStyle()
          Text('圣上喜迎新进士').textStyle().fontColor(0x9800fb)
          Text('民间应得好官人').textStyle().fontColor(0x9800fb)
        }
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}
@Extend(Image) function imgStyle () {
  .width('100%')
  .height('60%')
}
@Extend(Text) function textStyle() {
  .fontSize(30)
  .fontWeight(700)
}

三、创建查看游戏结果函数 

代码如下：

 //查看游戏结果
  lookGrade() {
    if (this.times > 0) {
      AlertDialog.show(
        {
          title: '提示',
          message: '您的抽卡还未完成,无法查看功名!!!',
          confirm: {
            value: '关闭',
            action: () => {
              console.info('Button-clicking callback')
            }
          },
          cancel: () => {
            console.info('Closed callbacks')
          }
        }
      )
    } else {
      if (this.gradeLevel == '末') {
        AlertDialog.show(
          {
            title: '提示',
            message: '很遗憾,您的成绩欠佳,未能中第!!!',
            confirm: {
              value: '关闭',
              action: () => {
                console.info('Button-clicking callback')
              }
            },
            cancel: () => {
              console.info('Closed callbacks')
            }
          }
        )
      } else {
        router.pushUrl({
          url: 'pages/FinalGrade',
          params: {
            lv: this.gradeLevel
          }
        })
      }
    }
  }

 四、增加看结果按钮的事件处理

 Button('看结果')
        .cardStyle()
        .onClick(()=>{
          this.confirmGrade()
          this.lookGrade()
        })

---

总结

本篇主要实现了游戏界面中看结果的功能，通过router进行了传值操作。至此该案例所有功能全部结束。笔者初学Harmony，按照鸿蒙实验手册把整个案例顺了一遍，其中也有感到尚模糊的地方，随着不断学习，希望有更深入的理解。