Vue实现红包雨小游戏的示例代码

<!-- 红包雨 -->
<div id="wrapper"></div>

<!-- 抢红包面板 -->
<div id="panel">
    <div id="hb">
        <span id="text">{{ result }}</span>
        <div id="btn" @click="gameOn">继续抢红包</div>
    </div>
</div>

animation: dropDowm 3s forwards; /* 旋转动画 */
@keyframes dropDowm {
  0% {
    top: 0px;
    transform: translateY(-100%) rotate(0deg);
  }
  100% {
    top: 110%;
    transform: translateY(0%) rotate(360deg);
  }
}

mouseHandler(e) {
      var event = e || window.event,
        money = event.target.dataset.money;
      if (money) {
        this.result = "恭喜抢到红包" + money + "元";
        for (var i = 0, len = this.imgList.length; i < len; i++) {
          this.imgList[i].style.animationPlayState = "paused";
        }
        panel.style.display = "block";
        this.totalMoney += Number(money);
      }
    }

 for (var i = 0; i < num; i++) {
        let img = new Image();
        img.src = this.imgUrl;
        // 随机设置红包分布
        img.style.left = this.ranNum(0, window.innerWidth) + "px";
        let delay = this.ranNum(0, 100) / 10;
        // 设置红包出现时间
        img.style.animationDelay = delay + "s";
        if (this.delayTime < delay) {
          this.delayTime = delay;
          this.lastImg = img;
        }
        //设置每个红包的金额
        img.dataset.money = this.ranNum(0, 1000) / 100;

<template>
  <div id="app">
    <!-- 红包雨 -->
    <div id="wrapper"></div>
    <!-- 抢红包面板 -->
    <div id="panel">
      <div id="hb">
        <span id="text">{{ result }}</span>
        <div id="btn" @click="gameOn">继续抢红包</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      totalMoney: 0, // 所有抢到红包的总金额
      delayTime: 0, // 延时
      lastImg: null, // 最后一张掉落的图片
      imgList: null, // 红包随机序列
      result: "", // 游戏结果
      imgUrl: require("./assets/hongbao.jpg"),
    };
  },
  methods: {
    // @breif:开始游戏
    start() {
      let dom = this.createDom(20);
      this.imgList = document.getElementsByTagName("img");
      document.getElementById("wrapper").appendChild(dom);
    },
    // @breif: 创建红包序列
    createDom(num) {
      // 创建文档碎片
      let frag = document.createDocumentFragment();
      for (var i = 0; i < num; i++) {
        let img = new Image();
        img.src = this.imgUrl;
        // 随机设置红包分布
        img.style.left = this.ranNum(0, window.innerWidth) + "px";
        let delay = this.ranNum(0, 100) / 10;
        // 设置红包出现时间
        img.style.animationDelay = delay + "s";
        if (this.delayTime < delay) {
          this.delayTime = delay;
          this.lastImg = img;
        }
        //设置每个红包的金额
        img.dataset.money = this.ranNum(0, 1000) / 100;
        frag.appendChild(img);
      }
      return frag;
    },
    // @breif:继续游戏
    gameOn() {
      document.getElementById("panel").style.display = "none";
      for (let i = 0, len = this.imgList.length; i < len; i++) {
        this.imgList[i].style.animationPlayState = "running";
      }
    },
    // 监听鼠标事件
    mouseHandler(e) {
      var event = e || window.event,
        money = event.target.dataset.money;
      if (money) {
        this.result = "恭喜抢到红包" + money + "元";
        for (var i = 0, len = this.imgList.length; i < len; i++) {
          this.imgList[i].style.animationPlayState = "paused";
        }
        panel.style.display = "block";
        this.totalMoney += Number(money);
      }
    },
    // 监听动画事件
    annimationHandler(e) {
      document.getElementById("panel").style.display = "block";
      this.result = "恭喜总共抢到了" + this.totalMoney.toFixed(2) + "元";
    },    // @breif:产生min~max间的随机数
    ranNum(min, max) {
      return Math.ceil(Math.random() * (max - min) + min);
    },
  },
  mounted() {
    this.start();
    window.addEventListener("mousedown", this.mouseHandler);
    this.lastImg.addEventListener("webkitAnimationEnd", this.annimationHandler);
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

body {
  height: 100%;
  width: 100%;
  background: url("./assets/background.jpg");
  background-size: cover;
  overflow: hidden;
}

#wrapper img {
  position: absolute;
  transform: translateY(-100%); /* 下落动画 */
  animation: dropDowm 3s forwards; /* 旋转动画 */
}
@keyframes dropDowm {
  0% {
    top: 0px;
    transform: translateY(-100%) rotate(0deg);
  }
  100% {
    top: 110%;
    transform: translateY(0%) rotate(360deg);
  }
}

#panel {
  display: none;
}

#panel::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

#hb {
  width: 350px;
  height: 450px;
  border-radius: 20px;
  background-color: #e7223e;
  color: #fad755;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -225px;
  margin-left: -175px;
  font-size: 30px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#btn {
  background-color: #fad755;
  color: #e7223e;
  font-size: 18px;
  margin-top: 10px;
  padding: 10px;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>