黑马的抽卡小游戏

interface imageCount{
  url:string
  count:number
}
//求随机数

// console.log('税基树',Math.random());
//向下取整
// console.log('税基树',Math.floor(Math.random()));


@Entry
@Component
struct animal{
  @State name:string = '生肖抽卡'
  @State arr:string[] = ['pg','hw','xm']
  @State prize:string = ''//默认没有中江
  //pand判断是否中大奖的状态
  @State isGet:boolean = false

  //随机的生肖卡序号
  @State randomIndex:number= -1
  //遮罩曾的控制
  @State maskopacity:number = 0//透明度
  @State maskInmgX: number=0
    @State maskInmgY: number=0
  @State maskindex:number = -1
  @State images:imageCount[]=[
    {url:'app.media.bg_00',count: 0},
    {url:'app.media.bg_01',count: 0},
    {url:'app.media.bg_02',count: 0},
    {url:'app.media.bg_03',count: 0},
    {url:'app.media.bg_04',count: 0},
    {url:'app.media.bg_05',count: 0}
  ]
  build() {
    Stack(){
      //卡片层
      Column(){
        Grid(){

          ForEach(this.images,(item:imageCount,index: number) => {
            GridItem(){
              Badge(
                {
                  count:item.count,
                  position:BadgePosition.RightTop,
                  style:{
                    fontSize:14,
                    badgeSize:20,
                    badgeColor:'#fa2a2d'
                  }
                }
              ){
                Image($r(item.url))
                  .width(80)
              }
            }
          })
        }.width('100%')
        .height(300)

        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .margin({
          top:100
        })
        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({top:50})
          .onClick(()=>{
//点击时修改参数
            this.maskopacity = 1
            this.maskindex = 99
            this.maskInmgX = 1
            this.maskInmgY=1
            //点击之后随机生成，然后保存到randomIndex
           this.randomIndex =  Math.floor(Math.random()*6)
            console.log('抽中了',this.randomIndex);
          })
      }

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


      //点击展示层
      Column({space:30}){
        //抽卡遮挡层
        Text('获得战胜小卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r(`app.media.img_0${this.randomIndex}`))
          .width(200)
          .scale({
            x:this.maskInmgX,
            y:this.maskInmgY
          })
          .animation({
            duration:500
          })
          Button('开心收下')
            .onClick(()=>{
              this.maskopacity  =0
              this.maskindex = -1
              //congzhi重置
              this.maskInmgX =0
              this.maskInmgY = 0
              //修改替换整个对象
              this.images[this.randomIndex] ={
                url:`app.media.img_0${this.randomIndex}`,
                count: this.images[this.randomIndex].count+1
              }
              //判断数据项都大于0，只要有一个为0 都没有集齐
              let  flag:boolean =true
              for (let item of this.images) {
               if(item.count == 0){
                 flag =false
                 break
               }
              }
              this.isGet =flag
              //判断是否中奖，如果中奖，则需要骤降
              if(flag){
                let  randomIndex:number =Math.floor(Math.random()*3)
                this.prize = this.arr[randomIndex]
              }
            })
            .width(200)
          .height(50)
          .backgroundColor(Color.Transparent)
            .border({
              width: 2,
              color:'#fff9e0'
            })


      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
      //YANSE颜色调透明度
      .backgroundColor('#b3000000')
      .opacity(this.maskopacity)
      .zIndex(this.maskindex)
      //增加动画
      //当元素有状态的改变用animation 改变状态效果
      .animation({
        duration:1000
      })
if(this.isGet){


  //抽大奖的遮罩层
  Column(){
    Text('恭喜哦，获得手机一步')
      .fontColor('#f5ebcf')
      .fontSize(25)
      .fontWeight(700)
    Image($r(`app.media.${this.prize}`))
      .width(300)
    Button('再来一次')
      .width(200)
      .height(50)
      .backgroundColor(Color.Transparent)
      .border({width:2,color:'#fff9e0'})
      .onClick(() =>{
        this.isGet = false
        this.prize =''
        this.images = [
          {url:'app.media.bg_00',count: 0},
          {url:'app.media.bg_01',count: 0},
          {url:'app.media.bg_02',count: 0},
          {url:'app.media.bg_03',count: 0},
          {url:'app.media.bg_04',count: 0},
          {url:'app.media.bg_05',count: 0}
        ]
      })
  }
  .justifyContent(FlexAlign.Center)
  .width('100%')
  .height('100%')
  .backgroundColor('#cc000000')
}
    }


}
}