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/2
        let titleW=375-this.titleW/2
        let exitW=375-this.exitW/2
        let titleH = 812-this.titleH/2-250
        let buttonH = 812-this.buttonH/2-250
        let exitH = 812-this.exitH/2-250
        if (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;
      };
    },


//前台 通过返回接口获取位置信息 前台适配显示对应的位置
   <view
      class="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">
      <img
        v-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);
    }
  }

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