抽奖卡片练习
interface Card {
name: string
count: number
}
@Entry
@Component
struct Job01 {
@State card: Card[] = [
{ name: 'bg_00', count: 0 },
{ name: 'bg_01', count: 0 },
{ name: 'bg_02', count: 0 },
{ name: 'bg_03', count: 0 },
{ name: 'bg_04', count: 0 },
{ name: 'bg_05', count: 0 },
]
@State cardOpacity: number = 0
@State cardZindex: number = -1
@State cardRandom: number = 0
@State cardAngle: number = -180
@State cardScale: number = 0
@State isGet: boolean = false
@State Jp: string[] = ['hw', 'pg', 'xm']
build() {
Column() {
Stack() {
// 结构1
Column() {
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.card, (item: Card) => {
Column() {
Image($r(`app.media.${item.name}`))
.width(80)
// if (item.count > 0) {
// Text(`${item.count}`)
// .position({ x: 70, y: 0 })
// .backgroundColor(Color.Red)
// .width(20)
// .aspectRatio(1)
// .textAlign(TextAlign.Center)
// .borderRadius(10)
// .fontSize(12)
// .opacity(1)
// }
Text(`${item.count}`)
.position({ x: 70, y: 0 })
.backgroundColor(Color.Red)
.width(20)
.aspectRatio(1)
.textAlign(TextAlign.Center)
.borderRadius(10)
.fontSize(12)
.opacity(
item.count > 0 ? 1 : 0
)
}
.margin(20)
})
}
Button('立即抽卡')
.backgroundColor(Color.Red)
.width(200)
.onClick(() => {
this.cardOpacity = 1
this.cardZindex = 99
this.cardRandom = Math.floor(Math.random() * this.card.length)
this.cardAngle = 0
this.cardScale = 1
})
}
if (this.isGet == false) {
// 结构2
Column({ space: 20 }) {
Text('获得生肖卡')
.fontColor('#ffffff')
.fontSize(25)
Image($r(`app.media.img_0${this.cardRandom}`))
.width(300)
.rotate({ angle: this.cardAngle })
.scale({ x: this.cardScale, y: this.cardScale })
.animation({
duration: 300
})
Button('开心收下')
.width(200)
.backgroundColor(Color.Red)
.onClick(() => {
this.cardOpacity = 0
this.cardZindex = -1
this.cardScale = 0
this.cardAngle = -180
this.card[this.cardRandom] = {
name: `img_0${this.cardRandom}`,
count: this.card[this.cardRandom].count + 1
}
let sum: number = 0
for (let item of this.card) {
if (item.count > 0) {
sum++
} else {
break
}
}
if (sum == this.card.length) {
this.isGet = true
this.cardRandom = Math.floor(Math.random() * this.Jp.length)
}
})
}
.opacity(this.cardOpacity)
.zIndex(this.cardZindex)
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.backgroundColor('rgba(0,0,0,0.8)')
} else {
// 结构 3
Column({ space: 20 }) {
Text('中奖了')
.fontColor('#ffffff')
.fontSize(25)
Image($r(`app.media.${this.Jp[this.cardRandom]}`))
.width(300)
Button('再来一次')
.width('100%')
.backgroundColor(Color.Red)
.onClick(() => {
this.card =
[
{ name: 'bg_00', count: 0 },
{ name: 'bg_01', count: 0 },
{ name: 'bg_02', count: 0 },
{ name: 'bg_03', count: 0 },
{ name: 'bg_04', count: 0 },
{ name: 'bg_05', count: 0 },
]
this.cardOpacity = 0
this.cardZindex = -1
this.cardRandom = 0
this.cardAngle = -180
this.cardScale = 0
this.isGet = false
})
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.backgroundColor('rgba(0,0,0,0.8)')
}
}
}
.height('100%')
.width('100%')
}
}