鸿蒙开发案例:进京赶考(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')
            }
          }
        )
      }
    }
  }

总结

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

  • 24
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值