九宫格小游戏vue

废话不多说直接上代码

html

<template>
  <div class="jiugongge">
    <div class="contain-out">
      <div
        class="blink"
        v-for="(item,index) in circleList"
        :key="index"
        :style="{'top':(item.topCircle)/100+'rem','left':(item.leftCircle)/100+'rem','background-color':(index%2==0)?colorCircleFirst:colorCircleSecond}"
      ></div>

      <div class="container-in">
        <div
          class="content-out"
          v-for="(item,index) in awardList"
          :key="index"
          :style="{top:(item.topAward)/100+'rem',left:(item.leftAward)/100+'rem','background-color':(index==indexSelect)?colorAwardSelect:colorAwardDefault}"
        >
          <img class="award-image" :src="item.imageAward" />
        </div>
        <div
          class="start-btn"
          :style="{'background-color':isRunning?'darkgray':'darkkhaki'}"
          @click="startGame"
        >START</div>
      </div>
    </div>
  </div>
</template>

js:

<script>
export default {
  data() {
    return {
      circleList: [], //圆点数组
      awardList: [], //奖品数组   
      colorCircleFirst: "wheat", //圆点颜色1#FFDF2F
      colorCircleSecond: "wheat", //圆点颜色2#FE4D32
      colorAwardDefault: "#F5F0FC", //奖品默认颜色
      colorAwardSelect: "cornflowerblue", //奖品选中颜色
      indexSelect: 0, //被选中的奖品index
      isRunning: false, //是否正在抽奖
      imageAward: [
        {
          name: "小猪",
          img:
            "https://image.soole.com.cn/40cbf626-0559-42d8-a5d9-1fb158129856",
        },
        {
          name: "小鸡",
          img:
            "https://image.soole.com.cn/40cbf626-0559-42d8-a5d9-1fb158129856",
        },
        {
          name: "再接再厉哦",
          img:
            "https://image.soole.com.cn/40cbf626-0559-42d8-a5d9-1fb158129856",
        },
        {
          name: "小鸭",
          img:
            "https://image.soole.com.cn/40cbf626-0559-42d8-a5d9-1fb158129856",
        },
        {
          name: "小狗",
          img:
            "https://image.soole.com.cn/40cbf626-0559-42d8-a5d9-1fb158129856",
        },
        {
          name: "小虎",
          img:
            "https://image.soole.com.cn/40cbf626-0559-42d8-a5d9-1fb158129856",
        },
        {
          name: "小牛",
          img:
            "https://image.soole.com.cn/40cbf626-0559-42d8-a5d9-1fb158129856",
        },
        {
          name: "小羊",
          img:
            "https://image.soole.com.cn/40cbf626-0559-42d8-a5d9-1fb158129856",
        },
      ],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      let _this = this;
      //圆点设置的每一个位置的偏移量  总共62个原点
      let leftCircle = 9;
      let topCircle = 9;
      let circleList = [];
      for (var i = 0; i < 63; i++) {
        if (i == 0) {
          topCircle = 30;
          leftCircle = 10;
        } else if (i < 16) {
          topCircle = 30;
          leftCircle = leftCircle + 137.5;
        } else if (i == 16) {
          topCircle = 30;
          leftCircle = 2200;
        } else if (i < 32) {
          topCircle = topCircle + 130.5;
          leftCircle = 2200;
        } else if (i == 32) {
          topCircle = 2100;
          leftCircle = 2200;
        } else if (i < 48) {
          topCircle = 2100;
          leftCircle = leftCircle - 137.5;
        } else if (i == 48) {
          topCircle = 2100;
          leftCircle = leftCircle - 137.5;
        } else if (i < 63) {
          topCircle = topCircle - 137.5;
          leftCircle = 7.5;
        } else {
          return;
        }
        circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
      }
      _this.circleList = circleList; //原点
      //设置圆点闪烁
      setInterval(function () {
        if (_this.colorCircleFirst == "wheat") {
          _this.colorCircleFirst = "#FE4D32";
          _this.colorCircleSecond = "wheat";
        } else {
          _this.colorCircleFirst = "wheat";
          _this.colorCircleSecond = "#FE4D32";
        }
      }, 500); //设置圆点闪烁的效果

      //奖品item设置
      let awardList = [];

      //间距
      let topAward = 26;
      let leftAward = 40;
      for (var j = 0; j < 8; j++) {
        if (j == 0) {
          topAward = 25;
          leftAward = 45;
        } else if (j < 3) {
          topAward = topAward;
          //250.6666是宽.15是间距.下同
          leftAward = leftAward + 660.6666 + 15;
        } else if (j < 5) {
          leftAward = leftAward;
          //150是高,15是间距,下同
          topAward = topAward + 640 + 15;
        } else if (j < 7) {
          leftAward = leftAward - 649 - 15;
          topAward = topAward;
        } else if (j < 8) {
          leftAward = leftAward;
          topAward = topAward - 649 - 15;
        }
        let imageAward = _this.imageAward[j];
        awardList.push({
          topAward: topAward,
          leftAward: leftAward,
          name: imageAward.name,
          imageAward: imageAward.img,
        });
      }

      _this.awardList = awardList;
    },
    startGame: function () {
      if (this.isRunning) return;

      this.isRunning = true; //静止点击
      const _this = this;
      let indexSelect = 0; //默认从0开始
      let i = 0; //控制速度的
      let timer = setInterval(() => {
        indexSelect++;
        i+=40
        indexSelect = indexSelect % 8;
        _this.indexSelect = indexSelect;

        //固定下标停止,当满足转动时间并且奖品下标是‘x’的时候停止定时器
        if (i > 560) {
          //去除循环
          clearInterval(timer);
          this.slow(i,indexSelect);
        }
      }, 100);
    },
    //匀速效果
    slow(i,indexSelect) {
      let _this = this;
      let timg = setInterval(() => {
        indexSelect++;
        i+=30
        indexSelect = indexSelect % 8;
        _this.indexSelect = indexSelect;

        if (i > 700 && indexSelect == 3) {
          clearInterval(timg);
          _this.$dialog
            .confirm({
              title: "恭喜",
              message: "获得了" + _this.awardList[3].name,
              //当点击了弹框确定之后  重置开始按钮状态并且重置获奖下标从0开始
            })
            .then(() => {
              _this.isRunnings = false;
              _this.indexSelect = 0;
            });
        }

      }, 350);
    },
  },
};
</script>

css部分

<style scoped>
/* @import url(); 引入css类 */
.jiugongge {
  margin: 0;
  padding: 0;
  width: 100%;
  background: cadetblue !important;
  position: absolute;
}
.contain-out {
  height: 22rem;
  width: 22.5rem;
  /* background-color: #b136b9; */
  background: teal;
  margin: 12rem auto;
  border-radius: 0.4rem;
  box-shadow: 0 0.1px 0 #871a8e;
  position: relative;
}
.container-in {
  width: 20.8rem;
  height: 19.5rem;
  background-color: bisque;
  border-radius: 0.4rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.content-out {
  position: absolute;
  height: 6rem;
  width: 6.1rem;
  background-color: cornflowerblue;
  border-radius: 0.15rem;
  box-shadow: 0 0.05px 0 beige;
}
.blink {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 0.5rem;
  width: 0.5rem;
}
.start-btn {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 6rem;
  width: 6rem;
  background-color: cornflowerblue;
  box-shadow: 0 0.05px 0 #871a8e;
  color: white;
  text-align: center;
  font-size: 0.4rem;
  font-weight: bolder;
  line-height: 6.5rem;
}
.award-image {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 5rem;
  width: 5rem;
}
</style>

声明：代码逻辑灵感来自博主@面壁思过程，感谢阅读