mpvue小程序实现老虎机
一、效果图:二、说明很简单的三列数字在Y轴旋转,然后将三列数字布局在一个老虎机的背景图上,点击按钮触发旋转事件,旋转到哪个数字停下来可以设置,可以由后端传回获奖数字。三、代码<template><div class="page"><div class="slot-machine"&
·
一、效果图:
二、说明
很简单的三列数字在Y轴旋转,然后将三列数字布局在一个老虎机的背景图上,点击按钮触发旋转事件,旋转到哪个数字停下来可以设置,可以由后端传回获奖数字。
三、代码
<template>
<div class="page">
<div class="slot-machine">
<img class="back-slot" mode="widthFix" src="https://img-blog.csdnimg.cn/2022010610424153423.jpeg" >
<div class="mp-slot">
<div class="mp-slot-box" >
<div v-for="(item,some) in num" class="slot-group" :key="some" :style="{transform: 'translateY('+transY1+'px)'}">
<div class="slot-item">{{item}}</div>
</div>
</div>
<div class="mp-slot-box" >
<div v-for="(item,some) in num" class="slot-group" :key="some" :style="{transform: 'translateY('+transY2+'px)'}">
<div class="slot-item">{{item}}</div>
</div>
</div>
<div class="mp-slot-box" >
<div v-for="(item,some) in num" class="slot-group" :key="some" :style="{transform: 'translateY('+transY3+'px)'}">
<div class="slot-item">{{item}}</div>
</div>
</div>
</div>
</div>
<button @click="start" class="press" :style="{opacity: changeColor}"></button>
</div>
</template>
<script>
export default {
data () {
return {
num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,0],
height: 95, // 单个数字高度
len: 10, // 单个项目数字个数
transY1: 0, // 第一列初始位置
num1: 3, // 第一列结束数字
transY2: 0, // 第二列初始位置
num2: 3, // 第二列结束数字
transY3: 0, // 第三列初始位置
num3: 3, // 第三列结束数字
transY4: 0, // 第四列初始位置
num4: 3, // 第四列结束数字
speed: 24, // 速度
changeColor: 1
}
},
onLoad () {
},
onShow () {
},
methods: {
start () {
this.changeColor = 0.1
let { isStart, len, height, transY1, transY2, transY3, transY4, speed, num1, num2, num3, num4, endCallBack } = this
if (isStart) return
this.isStart = true
const totalHeight = height * len
const sRange = Math.floor(Math.random() * 2 + 2)
const halfSpeed = speed / 2
const endDis1 = num1 == 0 ? 10 * height : num1 * height
const endDis2 = num2 == 0 ? 10 * height : num2 * height
const endDis3 = num3 == 0 ? 10 * height : num3 * height
const endDis4 = num4 == 0 ? 10 * height : num4 * height
let i1 = 1; let i2 = 1; let i3 = 1; let i4 = 1
this.timer = setInterval(() => {
if (i1 <= sRange) {
transY1 -= speed
if (Math.abs(transY1) > totalHeight) {
transY1 += totalHeight
i1++
}
} else if (i1 > sRange && i1 < sRange + 2) {
transY1 -= halfSpeed
if (Math.abs(transY1) > totalHeight) {
transY1 += totalHeight
i1++
}
} else {
if (transY1 == endDis1) return
let dropSpeed = (endDis1 + transY1) / halfSpeed
dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < 1 ? 1 : dropSpeed
transY1 -= dropSpeed
transY1 = Math.abs(transY1) > endDis1 ? transY1 = -endDis1 : transY1
}
this.timer1 = setTimeout(() => {
if (i2 <= sRange) {
transY2 -= speed
if (Math.abs(transY2) > totalHeight) {
transY2 += totalHeight
i2++
}
} else if (i2 > sRange && i2 < sRange + 2) {
transY2 -= halfSpeed
if (Math.abs(transY2) > totalHeight) {
transY2 += totalHeight
i2++
}
} else {
if (transY2 == endDis2) return
let dropSpeed = (endDis2 + transY2) / halfSpeed
dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < 1 ? 1 : dropSpeed
transY2 -= dropSpeed
transY2 = Math.abs(transY2) > endDis2 ? transY2 = -endDis2 : transY2
}
}, 200)
this.timer2 = setTimeout(() => {
if (i3 <= sRange) {
transY3 -= speed
if (Math.abs(transY3) > totalHeight) {
transY3 += totalHeight
i3++
}
} else if (i3 > sRange && i3 < sRange + 2) {
transY3 -= halfSpeed
if (Math.abs(transY3) > totalHeight) {
transY3 += totalHeight
i3++
}
} else {
if (transY3 == endDis3) return
let dropSpeed = (endDis3 + transY3) / halfSpeed
dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < 1 ? 1 : dropSpeed
transY3 -= dropSpeed
transY3 = Math.abs(transY3) > endDis3 ? transY3 = -endDis3 : transY3
}
}, 400)
this.timer3 = setTimeout(() => {
if (i4 <= sRange) {
transY4 -= speed
if (Math.abs(transY4) > totalHeight) {
transY4 += totalHeight
i4++
}
} else if (i4 > sRange && i4 < sRange + 2) {
transY4 -= halfSpeed
if (Math.abs(transY4) > totalHeight) {
transY4 += totalHeight
i4++
}
} else {
let dropSpeed = (endDis4 + transY4) / halfSpeed
if (num4 < 3) {
dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < .1 ? .1 : dropSpeed
} else if (num4 < 5 && num4 >= 3) {
dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < .3 ? .3 : dropSpeed
} else {
dropSpeed = dropSpeed > halfSpeed ? halfSpeed : dropSpeed < .3 ? .3 : dropSpeed
}
transY4 -= dropSpeed
transY4 = Math.abs(transY4) > endDis4 ? transY4 = -endDis4 : transY4
if (Math.abs(transY4) >= endDis4) {
clearInterval(this.timer)
clearTimeout(this.timer1)
clearTimeout(this.timer2)
clearTimeout(this.timer3)
this.isStart = false
}
}
}, 600)
this.transY1=transY1
this.transY2=transY2
this.transY3=transY3
this.transY4=transY4
}, 1000 / 60)
this.changeColor = 1
},
reset () {
this.transY1 = 0
this.transY2 = 0
this.transY3 = 0
this.transY4 = 0
}
}
}
</script>
<style scoped>
.mp-slot{
width: 65%;
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
padding-top: 65px;
}
.back-slot{
width: 100%;
position: absolute;
}
.press{
width: 100px;
height: 80px;
background-color:rgba(243,54,74,0.6);
position:fixed;
left:140px;
top:215px;
border-radius: 35px;
}
.press::after{
border: none;
}
.mp-slot-box{
width: 80px;
height:95px;
line-height: 95px;
font-size: 36px;
font-weight: bold;
color: #f3364a;
overflow: hidden;
text-align: center;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)