передовой
Недавно у компании было мероприятие по розыгрышу игровых автоматов, что все еще немного сложно для меня, потому что я не делал этого раньше, поэтому я начал искать различные плагины в Интернете и обнаружил, что большинство из них jquery, или их много., полный процесс не может пойти вниз, и даже если он захочет потратить деньги на покупку своего кода, я просто хочу сказать, что все делятся и общаются друг с другом, почему вы так эгоистичен, поэтому сегодня я поделюсь своим подкинутым игровым автоматом, Вам удобно развиваться в дальнейшем, и каждый может найти недостатки и указать на них, чтобы вместе добиться прогресса.
Для проекта требуется Sprite Figure oh
Посмотреть рендеры
В коде есть комментарии, с которыми легче начать работу. Я использую метод сохранения страны с кривой, то есть он не совершенен и не очень гибок.Как только положение карты спрайта определено, старайтесь не перемещать его, иначе положение y- ось карты спрайтов нужно в следующий раз перенастроить.Это очень извините, я надеюсь друзья, которые это увидят, могут дать мне какой-нибудь совет.
Автор был занят в последнее время, и еще не извлек эффект из публичного компонента, было бы хорошо, если бы была возможность извлечь публичный компонент позже. Это сэкономит много вещей.
Ну, давайте не будем говорить глупость, давайте перейдем на идеи и код.
Логическое мышление: игровые автоматы.
На самом деле, я только начал думать, что результат лотереи - это передний план, затем глубже и обнаружил, что этого не делать, но безопасность не высока, затем обмен с небольшим партнером, чтобы узнать результаты розыгрыша общего класса лотереи. по фону, в этот раз все намного проще, потому что вам нужно только показать результаты, как результаты.
В основном используемая технология
Лотерея игровых автоматов использует переход css3 и переход css3 для достижения эффекта плавной прокрутки путем изменения положения оси Y фонового изображения спрайта.
backgroundPositionYДля отображения различных призов, чтобы добиться эффекта счастливого розыгрыша. js можно добиться эффекта вращения через таймер
Первый шаг, макет
<template>
<div id="slotMachine">
<div class="PosRela priceCenter HomeBGColor Width100">
<img class="Width100 Height100" src="../img/2@2x.png">
<!-- 老虎机抽奖框 -->
<div class="PosAbso trigerCenter">
<transition name="down-up-translate-fade">
<div class="SpriteChart" :style="{backgroundPositionY: priceOne + 'rem'}"></div>
</transition>
<transition name="down-up-translate-fade">
<div class="SpriteChart" :style="{backgroundPositionY: priceTwo + 'rem'}"></div>
</transition>
<transition name="down-up-translate-fade">
<div class="SpriteChart" :style="{backgroundPositionY: priceThr + 'rem'}"></div>
</transition>
</div>
</div>
<!-- 前往抽奖区参与活动赢好礼！ -->
<!-- DrawToast 是封装的公共弹窗组件 -->
<DrawToast v-show='isGoToPrice' @fromChild="GoToPrice">
<div class="PosRela GoToPrice" slot="luckyDrawCenter">
<img class="Width100 Height100" src="../img/弹窗@2x (1).png">
<div class="PosAbso Width100 Font17 FontWeight GoToPriceText">前往抽奖区参与活动赢好礼！</div>
</div>
</DrawToast>
<!-- 获得福利券弹窗 -->
<DrawToast v-show='isGetWelfare' @fromChild="GetWelfare">
<div class="PosRela GetWelfare" slot="luckyDrawCenter">
<img class="Width100 Height100" src="../img/弹窗-点击抽奖@2x.png">
<div class="PosAbso Width100 Font20 FontWeight constrGet">恭喜您获得</div>
<div class="PosAbso Width100 getVoucher">
<div class="getVoucherName Font24 FontWeight Ellipsis">0.8%福利券</div>
</div>
<div class="PosAbso Width100 Font14 PrizesIssued">奖品已发放，您可在个人中心查看！</div>
<div class="PosAbso Width100 FontWeight commonButton CheckNow">
<img class="Height100" src="../img/按钮-立即抽奖@2x (1).png">
<div class="PosAbso Width100 Height100 Font18 ColorWhite FontWeight">立即查看</div>
</div>
</div>
</DrawToast>
</div>
</template>
<style lang="less" scoped>
//这是项目公共的css，在本项目中用到的rem是2倍算法，所以要从你的设计图尺寸乘2除以100得到。
@import url('../../../components/tigerBaseCss/index');
.priceCenter {
height: 4.22rem;
border: 1px solid blue;
.trigerCenter {
border: 1px solid blue;
width: 5.5rem;
height: 3rem;
overflow: hidden;
left: 1rem;
top: 0.6rem;
border-radius: 0.1rem;
.SpriteChart {
width: 1.75rem;
border: 1px solid red;
height: 9.8rem;
background: url("../img/choujiangzuhe.png") center center repeat-y;
background-size: 100% 100%;
float: left;
margin-right: 0.1rem;
background-attachment: scroll;
&:nth-child(2) {}
&:nth-child(3) {
float: right;
margin: 0;
}
}
.down-up-translate-fade-enter-active,
.down-up-translate-fade-leave-active {
transition: all 0.1s;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
}
.down-up-translate-fade-enter,
.down-up-translate-fade-leave-active {
opacity: 1;
}
.down-up-translate-fade-enter {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
}
.down-up-translate-fade-leave-active {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
}
}
}
//弹窗内公共弹窗样式
.commonButton {
height: 0.9rem;
div {
top: 0;
left: 0;
line-height: 0.8rem;
}
}
.GoToPrice {
width: 5.48rem;
height: 5.58rem;
.GoToPriceText {
top: 4.2rem;
color: #DF2531;
}
}
.GetWelfare {
width: 5.6rem;
height: 5.5rem;
.constrGet {
color: #B46C38;
top: 1.02rem;
}
.getVoucher {
top: 2.22rem;
.getVoucherName {
width: 3rem;
margin: auto;
color: #E04D4B;
}
}
.PrizesIssued {
color: #B46C38;
top: 3rem;
}
.CheckNow {
top: 3.9rem;
}
}
</style>
Шаг вторая: логика
<script>
export default {
data() {
return {
isGoToPrice: false, //前往抽奖区参与活动赢好礼！
isGetWelfare: false, //获得福利券弹窗
priceOne: 8.1, //控制滚动图的位置，显示那个奖品在中间的位置（需要雪碧图)
priceTwo: 35.44, //也就是背景雪碧图的y轴的位置
priceThr: 53.02,
textone: 0, //抽中某个奖品第一列的展示的图片，下边俩以此类推
texttwo: 0,
textthe: 0,
}
},
mounted() {
},
watch: {
//通过监听第三列的图的y轴的位置判断中的什么奖，展示该奖的名字
priceThr(newValue, olderValue) {
const that = this;
switch (newValue) {
case 1181.2: //这个模拟的中奖的情况，所以弹出中奖弹层
setTimeout(() => {
//控制中奖弹层是否弹出
that.isGetWelfare = true;
}, 500);
break;
case 1276.88: //这个位置未中奖 所以弹出很抱歉
setTimeout(() => {
that.isGoToPrice = true;
}, 500);
break;
}
}
},
methods: {
//开始抽奖
beganDraw() {
console.log(this.LuckyDraw);
if (this.LuckyDraw > 0) {
//此处需要调接口，从接口里获取是否中奖，然后改变number的值，这样就可以在this.showPrize(number);方法中设置雪碧图的详细位置
let number = 7;
this.showPrize(number);
//该方法是通过定时器来控制雪碧图的位置，以达到转动的效果
this.startDraw();
}
},
startDraw() {
this.timeone(10);
setTimeout(() => {
this.timetwo(0);
}, 500);
setTimeout(() => {
this.timethe(0);
}, 1000);
},
timeone(num) {
var t = setInterval(() => {
if (num <= this.textone) {
num += 10;
this.priceOne = num;
} else {
clearInterval(t);
this.priceOne = this.textone;
}
}, 30);
},
timetwo(num) {
var t = setInterval(() => {
if (num <= this.texttwo) {
num += 10;
this.priceTwo = num;
} else {
clearInterval(t);
this.priceTwo = this.texttwo;
}
}, 30);
},
timethe(num) {
var t = setInterval(() => {
if (num <= this.textthe) {
num += 10;
this.priceThr = num;
} else {
clearInterval(t);
this.priceThr = this.textthe;
}
}, 30);
},
// 根据抽奖信息判断抽中的奖品
showPrize(num) {
console.log(num);
const that = this;
switch (num) {
case 1: // 抽中每个奖项的展示图（也就是雪碧图的y轴的位置），需要单独设置
that.textone = 1091;
that.texttwo = 1091;
that.textthe = 1091;
break;
case 2:
that.textone = 1112; //这里的数值都可以设置成变量，方便控制
that.texttwo = 1112;
that.textthe = 1112;
break;
case 3:
that.textone = 1135;
that.texttwo = 1135;
that.textthe = 1135;
break;
case 4:
that.textone = 1158;
that.texttwo = 1158;
that.textthe = 1158;
break;
case 5:
that.textone = 1181.2;
that.texttwo = 1181.2;
that.textthe = 1181.2;
break;
case 6:
that.textone = 1203;
that.texttwo = 1203;
that.textthe = 1203;
break;
case 7: //若有未中奖情况单独设置一个或多个未中奖的展示图（也就是雪碧图的y轴的位置）
that.textone = 1210.5;
that.texttwo = 1253.43;
that.textthe = 1276.88;
break;
}
},
}
};
</script>