废话不多说直接上代码
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>
声明:代码逻辑灵感来自博主@面壁思过程,感谢阅读