vue小游戏砸金蛋

声明：只是自己写的一个demo如果想要直接商用红红绿绿那一种效果的话可以不用看了。代码仅供参考

html：

  <div>
    <div class="outside">
      <div class="cz" :class="usecz"></div>
      <div class="cs">可参与的次数为{{canClick}}</div>
      <div class="eggoutside">
        <div class="egg1" :class="run==1?eggrun:''" @click="boom(1)"></div>
        <div class="egg2" :class="run==2?eggrun:''" @click="boom(2)"></div>
        <div class="egg3" :class="run==3?eggrun:''" @click="boom(3)"></div>
      </div>
    </div>
  </div>

script部分

<script>
export default {
  data() {
    return {
      run: "",
      eggrun: {
        eggs1: true,
      },
      usecz: {
        useczLeft: false,
        useczCenter: false,
        useczRig: false,
      },
      canClick: 2,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    boom: function (x) {
      if (this.canClick != 0 && this.canClick != "") {
        this.go(x);
      } else {
        this.$toast("您的参与次数已经上限啦");
      }
    },
    go: function (x) {
      if (x == 1) {
        this.usecz = {
          useczLeft: true,
          useczCenter: false,
          useczRig: false,
        };
      } else if (x == 2) {
        this.usecz = {
          useczLeft: false,
          useczCenter: true,
          useczRig: false,
        };
      } else {
        this.usecz = {
          useczLeft: false,
          useczCenter: false,
          useczRig: true,
        };
      }
      this.canClick = this.canClick - 1;
      setTimeout(() => {
        this.run = x;
        this.$toast("恭喜您中了🥇");
      }, 1000);
    },
  },
};
</script>

重要的样式部分

<style scoped>
/* @import url(); 引入css类 */
.outside {
  width: 100%;
  height: 26rem;
  position: relative;
  background: bisque;
}
.eggoutside {
  width: 100%;
  height: 8rem;
  position: absolute;
  background: cadetblue;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}
.egg1,
.egg2,
.egg3 {
  width: 22%;
  height: 8rem;
  background: burlywood;
  border-radius: 3rem 3rem 1.5rem 1.5rem;
}
@keyframes eggmove {
  0%{
    background-position: 0 -3rem;
  }
 11.11%{
    background-position:11.11% -3rem;
 }
 22.22%{
    background-position:22.22% -3rem;
 }
 33.33%{
    background-position: 33.33% -3rem;
 }
 44.44%{
    background-position:44.44% -3rem;
 }
 55.55%{
    background-position:55.55% -3rem;
 }
 66.66%{
    background-position:66.66% -3rem;
 }
 77.77%{
    background-position:77.77% -3rem;
 }
  88.88%{
    background-position:88.88% -3rem;
 }
  100%{
    background-position:93.88% -3rem;
 }
}
.eggs1 {
  background-image: url("../assets/img/Game/d1.png");
  background-position: 93% -3rem;
  background-repeat: x;
  /* animation: eggmove 6s linear; */
   animation: eggmove 3s forwards  step-start;
}
.cs {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 1rem;
}
.cz {
  width: 8rem;
  height: 8rem;
  background: url("../assets/img/Game/cz.png");
  background-size: contain;
  position: absolute;
  bottom: 11rem;
  right: 8rem;
}
.useczLeft {
  animation: czmoveLeft 2s linear forwards;
}
.useczCenter {
  animation: czmoveCenter 2s linear forwards;
}
.useczRig {
  animation: czmoveRig 2s linear forwards;
}
@keyframes czmoveLeft {
  0% {
    /* transform: rotate(25deg); */
  }
  10% {
    transform: rotate(25deg);
  }
  30% {
    left: 1rem;
  }
  50% {
    bottom: 4rem;
  }
  60% {
    transform: rotate(-30deg);
  }
  80% {
    transform: rotate(-100deg);
  }
  90% {
    left: 8rem;
  }
  100% {
    transform: rotate(0);
    bottom: 11rem;
  }
}
@keyframes czmoveCenter {
  0% {
    /* transform: rotate(25deg); */
  }
  10% {
    transform: rotate(25deg);
  }
  30% {
    right: 1rem;
  }
  50% {
    bottom: 4rem;
  }
  60% {
    transform: rotate(-30deg);
  }
  80% {
    transform: rotate(-100deg);
  }
  90% {
    left: 8rem;
  }
  100% {
    transform: rotate(0);
    bottom: 11rem;
  }
}
@keyframes czmoveRig {
  0% {
    /* transform: rotate(25deg); */
  }
  10% {
    transform: rotate(25deg);
  }
  30% {
    right: -3rem;
  }
  50% {
    bottom: 4rem;
  }
  60% {
    transform: rotate(-30deg);
  }
  80% {
    transform: rotate(-100deg);
  }
  90% {
    bottom: 11rem;
  }
  100% {
    transform: rotate(0);
    right: 8rem;
  }
}
</style>

里面有用到一张图我把图片放网盘上如果需要的话自己去下载
链接: https://pan.baidu.com/s/18TMP3cGYmuMWqOY9kU_g1g 密码: d32o