Vue扭蛋机营销小游戏

最近有一个需求做一个营销类型小游戏
所以做了一个扭蛋机类型的小游戏出来
大体逻辑：
点击按钮=》播放音乐、扭蛋机内部球滚动=》弹出球=》音乐停止、显示中奖信息
如图所示

h5或小程序主要是通过后台页面进行配置游戏规则以及背景图片、扭蛋图片、按钮、出口图片、顶部标题图片，以及可以配置按钮和出口以及顶部标题位置，更大的进行可配置，满足更多节日场景的使用，只需要上传自己想要的样式进行搭配即可

图示

该功能主要的逻辑就是后台通过配置对应的按钮显示的位置前台显示对应的位置
当前后台使用的是元素的拖拽获取当前元素在父级距离顶部以及左边的位置坐标
前台在初始化时候显示在对应的位置

后台拖拽获取位置以及前台显示对应的位置

//@mousedown.stop="mouseButton" 通过鼠标左键按下的事件触发函数
//获取当前元素的信息mouseButton(e) {this.activeButton = true;let dragBox = this.$refs.buttonRef;e.preventDefault();this.dragMove(dragBox, e, "btn");},//鼠标抬起获取当前元素在父级中的位置信息dragMove(dragBox, e, type) {//算出鼠标相对元素的位置let disX = e.clientX - dragBox.offsetLeft;let disY = e.clientY - dragBox.offsetTop;document.onmousemove = (e) => {//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置let left = e.clientX - disX;let top = e.clientY - disY;//控制拖拽的位置 不能拖出父级元素范围内let bthW=375-this.buttonW/2let titleW=375-this.titleW/2let exitW=375-this.exitW/2let titleH = 812-this.titleH/2-250let buttonH = 812-this.buttonH/2-250let exitH = 812-this.exitH/2-250if (left < 0) {left = 0;// 拖拽的位置 等于 总宽度 - 元素宽度/2 等于可移动的位置} else if (left > bthW && type == "btn") {left = bthW;} else if (left > titleW && type == "title") {left = titleW;} else if (left > exitW && type == "exit") {left = exitW;}// 拖拽的位置 等于 总高度 - 元素高度/2 -去要保留的高度 等于可移动的位置if (top > titleH && type == "title") {top = titleH;} else if (top > buttonH && type == "btn") {top =  buttonH;} else if (top >  exitH && type == "exit") {top = exitH;} else if (top < 0) {top = 0;}//移动当前元素dragBox.style.left = left + "px";dragBox.style.top = top + "px";switch (type) {case "exit":this.activityAddData.gacha.exitLeft = left + "px";this.activityAddData.gacha.exitTop = top + "px";break;case "btn":this.activityAddData.gacha.buttonLeft = left + "px";this.activityAddData.gacha.buttonTop = top + "px";break;case "title":this.activityAddData.gacha.titleLeft = left + "px";this.activityAddData.gacha.titleTop = top + "px";break;}};document.onmouseup = (e) => {e.preventDefault();//鼠标弹起来的时候不再移动document.onmousemove = null;//预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）document.onmouseup = null;this.activeButton = false;this.activeTitle = false;this.activeExit = false;};},//前台 通过返回接口获取位置信息 前台适配显示对应的位置<viewclass="title position-absolute":style="{ marginLeft: exitL * 2 + 'rpx', marginTop: exitT * 2 + 'rpx' }"><img:class="isHidden ? 'exit-ball' : 'exit-hidden'"class="position-absolute":src="ballImg1"/><img:style="{ width: exitW + 'rpx', height: exitH + 'rpx' }":src="exitImg"alt=""/></view>

接一下来还有一个逻辑就是点击按钮让扭蛋在元素内运动主要用了css3的动画效果

//通过循环显示所有扭蛋<view class="ball"><imgv-for="(item, index) in itemBall":key="index":src="item.img"alt="":class="isActive ? 'site' + (index + 1) : ''"class="ball-style"/></view>//通过点击按钮 给扭蛋添加样式 拿一个扭蛋距离 通过@keyframes 设置扭蛋的运动轨迹 具体用法自行百度//定时器设置运动时间和停止时间.site2 {animation: around2 3s linear infinite;}@keyframes around2 {0% {transform: translate(0upx, 0upx) rotate(0deg);}5% {transform: translate(45upx, -90upx) rotate(50deg);}10% {transform: translate(50upx, -150upx) rotate(70deg);}15% {transform: translate(210upx, -90upx) rotate(260deg);}20% {transform: translate(100upx, -120upx) rotate(80deg);}25% {transform: translate(70upx, -150upx) rotate(140deg);}30% {transform: translate(-100upx, -60upx) rotate(60deg);}35% {transform: translate(-20upx, -100upx) rotate(260deg);}40% {transform: translate(-80upx, -80upx) rotate(260deg);}45% {transform: translate(0upx, 0upx) rotate(0deg);}50% {transform: translate(120upx, -150upx) rotate(0deg);}55% {transform: translate(82upx, -150upx) rotate(50deg);}60% {transform: translate(250upx, -150upx) rotate(70deg);}65% {transform: translate(210upx, -90upx) rotate(260deg);}70% {transform: translate(100upx, -180upx) rotate(80deg);}75% {transform: translate(70upx, -110upx) rotate(140deg);}80% {transform: translate(100upx, -60upx) rotate(60deg);}85% {transform: translate(-20upx, -80upx) rotate(260deg);}90% {transform: translate(-80upx, -80upx) rotate(260deg);}95% {transform: translate(78upx, -170upx) rotate(0deg);}100% {transform: translate(150upx, -150upx) rotate(0deg);}}

上述只是一个大体的逻辑因为具体功能代码过多所以就不贴代码了只为记录自己开发的过程

Vue扭蛋机营销小游戏相关推荐

css3扭蛋机,微信小程序扭蛋抽奖机CSS3动画实现详解_咋地 _前端开发者
前言最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了.先上动图 wxml文件: 这个做得我头 ...
css3扭蛋机,微信小程序扭蛋抽奖机css3动画实现详解.pdf
微微信信小小程程序序扭扭蛋蛋抽抽奖奖机机css3动动画画实实现现详详解解前前言言最近快速上线一个抽奖活动,又不想 canvas做,思考了很久,还是决定使 css3的动画来做,只要小球动得快,就没 ...
飞桨首款韩女团小卡扭蛋机
前言其实一直想做一个韩国女团的安利(推荐)项目,奈何自己太菜了,一直没搞.一眨眼就到2021年年底了,也就想着结合自己的长处写一个充满韩范项目吧,恰巧遇到飞桨黑客松 48H Coding Party ...
Java幸运盒子代码_幸运盒子扭蛋机小程序app开发
互联网产品是植根于互联网大环境的产品,幸运盒子扭蛋机小程序app开发是互联网产品的基本生长土壤.互联网的思想.原则和方法,必然以类似于"基因"继承的形式在每一个具体互联网产品中得以 ...
想做盲盒扭蛋机小程序-如何选择服务商
如果是选择盲盒扭蛋机小程序模板开发服务商,模板所提供的功能原原不足以满足多元化玩法,甚至会变成一种商品商城销售模式. 所以如果需要选择小程序的话一定要选择有成功的盈利玩法案例的服务商来提供版本体验. ...
扭蛋机html源码,微信小程序wxss制作扭蛋机
1 #zs#扭蛋机#fzs# 2 .egg{3 width: 100%;4 position: absolute;5 z-index: 3;6 top: 260rpx;7 }8 .egg .egg_j ...
PHP扭蛋机原理,微信小程序扭蛋抽奖机css3动画实现详解
前言最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了.先上动图 wxml文件: 这个做得我头 ...
bilibili校招题目——扭蛋机
题目描述 22娘和33娘接到了小电视君的扭蛋任务: 一共有两台扭蛋机,编号分别为扭蛋机2号和扭蛋机3号,22娘使用扭蛋机2号,33娘使用扭蛋机3号. 扭蛋机都不需要投币,但有一项特殊能力: 扭蛋机2号 ...
B站笔试真题之[编程题]扭蛋机
题目 22娘和33娘接到了小电视君的扭蛋任务: 一共有两台扭蛋机,编号分别为扭蛋机2号和扭蛋机3号,22娘使用扭蛋机2号,33娘使用扭蛋机3号. 扭蛋机都不需要投币,但有一项特殊能力: 扭蛋机2号:如 ...

Vue扭蛋机营销小游戏

Vue扭蛋机营销小游戏相关推荐

最新文章

热门文章