生肖抽卡 + 鸿蒙篇

最新推荐文章于 2025-04-24 17:49:02 发布

沐谦_申金

最新推荐文章于 2025-04-24 17:49:02 发布

阅读量793

点赞数 5

分类专栏： HarmonyOS 鸿蒙开发yyds 文章标签：华为 harmonyos

本文链接：https://blog.csdn.net/qq_68577316/article/details/140641409

版权

HarmonyOS 同时被 2 个专栏收录

5 篇文章

订阅专栏

鸿蒙开发yyds

4 篇文章

订阅专栏

游戏背景与文化价值

中国生肖，又称为十二生肖，是中国古代流传下来的一种纪年方式，由鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪这十二种动物组成。每一种生肖都有其独特的象征意义和性格特征，与中国人的生活哲学、文学艺术乃至日常习俗紧密相连。生肖抽卡项目正是基于这一深厚的文化底蕴，通过数字化手段，让玩家能够以一种新颖的方式接触到这一古老的传统。

游戏规则

启动抽卡：用户只需简单地点击“立即抽卡”按钮，即可开始他们的抽卡之旅。每一抽都是一个充满期待的瞬间，因为用户永远不知道下一张卡牌会带来什么样的惊喜。
显示抽中图片：抽卡后，系统会随机选择一张生肖卡牌展示给用户。每张卡牌不仅是一幅精美的插图，更蕴含着丰富的文化和历史故事，等待玩家去探索。

特别设定

为了让游戏更加刺激和有趣，特别设定了第一张生肖卡牌的抽取概率为极低的0.0001（即万分之一）。这张稀有的卡牌不仅代表了好运和幸运，也成为了玩家追求的目标。这种稀缺性设计，增加了游戏的挑战性和吸引力，鼓励玩家不断尝试，同时也为那些幸运儿提供了额外的成就感和奖励。

效果展示

在这里插入图片描述

源码

// 1.定义接口（每个列表上的数据结构）
interface ImageCount {
  url: string,
  count: number
}

@Entry
@Component
struct Index {
  @State randomIndex: number = 1
  // 基于接口，准备数据
  @State imagecount: 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 }
  ]
  // 控制遮罩的显隐
  @State maskOpacity: number = 0 //透明度
  @State maskZIndex: number = -1 //显示层级
  @State maskImageX: number = 0 //水平方向缩放比
  @State maskImageY: number = 0 //垂直方向缩放比

  build() {
    Stack() {
      Column() {
        Grid() {
          ForEach(this.imagecount, (item: ImageCount, index: number) => {
            GridItem() {
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  badgeSize: 16,
                  fontSize: 14
                }
              }) {
                Image($r(item.url))
                  .width(80)
              }
            }
          })
        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .width('100%')
        .height(300)
        .margin({
          top: 100
        })

        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({ top: 50 })
          .onClick(() => {
            //   点击时，修改我们的遮罩参数，让遮罩显示
            this.maskOpacity = 1
            this.maskZIndex = 99
            //   点击时图片需要缩放
            this.maskImageX = 1
            this.maskImageY = 1
            //   计算随机数
            this.randomIndex = Math.floor(Math.random() * 6)
            // 设定第一张图片被选中的概率为0.001%
            const randomNumber = Math.random();
            if (randomNumber < 0.00001) {
              this.randomIndex = 0;
            } else {
              // 剩余的图片被选中的概率均等
              this.randomIndex = Math.floor((randomNumber - 0.01) / (1 - 0.01) * (this.imagecount.length - 1)) + 1;
            }

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

      // .backgroundColor(Color.Orange)

      Column({ space: 30 }) {
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r(`app.media.img_0${this.randomIndex}`))
          .width(200)// 控制元素的缩放
          .scale({
            x: this.maskImageX,
            y: this.maskImageY
          })
          .animation({
            duration: 500
          })
        Button('开心收下')
          .width(200)
          .height(50)
          .backgroundColor(Color.Transparent)
          .border({
            width: 2,
            color: '#fff9e0'
          })
          .onClick(() => {
            //   点击时，修改我们的遮罩参数，让遮罩显示
            this.maskOpacity = 0
            this.maskZIndex = -1
            //   点击时图片需要缩放
            this.maskImageX = 0
            this.maskImageY = 0

            //   开心收下,对象数组的情况需要更新，需要修改替换整个对象
            this.imagecount[this.randomIndex] = {
              url: `app.media.img_0${this.randomIndex}`,
              count: this.imagecount[this.randomIndex].count + 1
            }
          })
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#cc000000')
      .justifyContent(FlexAlign.Center)
      // 设置透明度
      .opacity(this.maskOpacity)
      .zIndex(this.maskZIndex)
      //   动画
      .animation({
        duration: 1000
      })
    }
  }
}