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') } } } }
黑马的抽卡小游戏
最新推荐文章于 2024-08-18 21:06:49 发布