套圈

前方的物品，循环往左移动，用户点击套圈操控按钮，抛出绳索，随机套住一只最近的物品。其为可控组件（详细说明可查看基础玩法组件逻辑规范）

另外，套圈主要由目标、绳索等组成，捕获与脱逃状态都是由目标与绳索叠加形成，暂时只支持3个目标

按需引入

import Vue from 'vue'
import Ringtoss from '@tuia/market-ui/lib/Ringtoss'
import '@tuia/market-ui/lib/Ringtoss/style'

Vue.use(Ringtoss)

代码演示

<mk-ringtoss
  ref="ringtoss"
  v-bind="baseConfig"
  @clickStart="clickStart"
/>

点击展开js部分代码

export default {
  data() {
    return {
      // 静态配置可以 freeze 来减少vue监听 （非必需）
      baseConfig: Object.freeze({
        // 中间奖品
        prizeImgArray: [
          '//yun.tuisnake.com/mami-media/img/50d7608a-ociowk8pm5.png',
          '//yun.tuisnake.com/mami-media/img/691aa62e-d5xwaga1hn.png',
          '//yun.tuisnake.com/h5-mami/couponPrize/lucky.png',
        ],
      }),
    };
  },

  methods: {
    async clickStart() {
      const ringtoss = this.$refs.ringtoss;
      if (!ringtoss.isWaitStart) {
        return;
      }
      await ringtoss.start();
      // ... 一些操作
      // 获取当前将要命中的目标
      const index = ringtoss.getHitIndex();
      // 调用停止
      await ringtoss.stop({
        // 传入需要套中物品的索引
        index,
        // （可不传）传入是否逃脱
        escape: false,
        // （可不传）如果想要命中非 getHitIndex() 获取的目标，则传入 true 让绳子待定合适的时机
        waitCheck: false,
      });
      // 判断是否还可以继续玩
      if (true) {
        await ringtoss.reset();
      } else {
        // 不可玩就禁用
        await ringtoss.disable();
      }
    },
  },
};

推荐出图规范

按照以下尺寸格式出图，可以更快速更方便地定制使用

资源名	对应参数	宽x高	说明	示例
精简版球图	simpleItemImgConfig.img	275x325（单帧）	左右居中，与绳子匹配，可为动画
绳子等待动画图	ropeImgConfig.wait	360x640（单帧）	帧动画横行合并成一张图
绳子捕获动画图	ropeImgConfig.catch	275x735（单帧）	帧动画横行合并成一张图，其和球图组合形成完整捕获图
绳子逃跑动画图	ropeImgConfig.escape	275x325（单帧）	帧动画横行合并成一张图，其和球图组合形成完整逃跑图
开始按钮图片	btnImg	425x325	居中
开始按钮按下图片	btnPressImg	425x325	居中
开始按钮禁用图片	btnDisableImg	425x325	居中

API

支持基本的屏幕适配以及基础玩法组件逻辑规范涉及的API

基本类型定义

// 样式值定义
export type StyleValueType = string | number;
// 样式对象定义
export type StyleType = Record<string, StyleValueType>;

// 宽高定义
export interface SizeType extends StyleType {
  width: number;
  height: number;
}

export interface RingtossItemType<T> {
  wait: T,
  catch: T,
  escape: T,
};

// 帧动画配置
export interface FrameAniType {
  // 帧数
  count: number;
  // 时长，单位s
  time: number;
  // 更多
  more?: string;
}

export type RingtossStatusType = keyof RingtossItemType<any>;

export interface RingtossSimpleConfigType {
  img: string;
  length: number;
  width: number;
  height: number;
};

export interface EndOptType {
  index: number;
  waitCheck?: boolean;
  escape?: boolean;
};

// 插槽使用参数
export interface btnMoreType {
  // 是否按钮按下状态
  isPress: boolean;
}

Props

参数	说明	类型	默认值
containerSize	容器宽高	SizeType	{ width: 750, height: 800 }
itemImgConfig	套圈元素图片配置	RingtossItemType<string>[]	-
itemSizeConfig	套圈元素宽高	RingtossItemType<SizeType>	-
itemFrameAniConfig	套圈元素帧动画配置，只支持帧横向平铺	RingtossItemType<FrameAniType>	-
simpleItemImgConfig	精简版套圈元素图片配置，各种状态图片一致，优先级比拆开配置低	RingtossSimpleConfigType	{ img: '//yun.tuisnake.com/market-ui/3d6d9297-d313-4d70-9b43-dae7f49b71a1.png', length: 3, width: 275, height: 325, }
ropeImgConfig	绳子图片配置	RingtossItemType<string>	{ wait: '//yun.tuisnake.com/market-ui/89bdbc65-26c1-42d2-98d0-201ef30e3e2e.png', catch: '//yun.tuisnake.com/market-ui/e7f983f3-79fc-46fa-8c14-84db12b747a6.png', escape: '//yun.tuisnake.com/market-ui/7e2142f4-3472-4204-a0ba-cb93ada1e7df.png', }
ropeSizeConfig	绳子宽高	RingtossItemType<SizeType>	{ wait: { width: 360, height: 640, }, catch: { width: 275, height: 735, }, escape: { width: 275, height: 325, }, }
ropeFrameAniConfig	套圈帧动画配置	RingtossItemType<FrameAniType | null>	{ wait: { count: 8, time: 0.4, more: 'infinite', }, catch: null, escape: null, }
prizeImgArray	奖品图片列表，不传则不显示	string[]	-
prizeSize	奖品图片宽高	SizeType	{ width: 180, height: 180, }
prizeStyleConfig	奖品各状态下的样式	RingtossItemType<StyleType>	{ wait: { top: 30 }, catch: { top: 30 }, escape: { top: 30 }, }
btnStyle	按钮样式	StyleType	{ width: 425, height: 345, left: 162.5, bottom: -80, }
btnImg	按钮图片	string	//yun.tuisnake.com/market-ui/c38689ec-22e9-471e-bff3-66c7bc48c028.png
btnPressImg	按钮按下图片	string	//yun.tuisnake.com/market-ui/8ea4608a-3151-40db-b10f-b8df0104083d.png
btnDisableImg	按钮禁用图片	string	//yun.tuisnake.com/market-ui/a45604cd-a677-400a-87a1-de727765a3ab.png
ropeCatchLight	套中时光效	StyleType	{ width: 180, height: 100, top: 40, left: 60, animation: 'bgFrameAni steps(8) 0.4s 0.2s ', 'background-image': 'url(//yun.tuisnake.com/h5-mami/dist/ropeWave.6b1be46ed1d5443889f752f073e18ded.png)', }
handStyle	手势样式	StyleType	{ width: 160, height: 170, top: 690, left: 420, }
handImg	手势图片	string	//yun.tuisnake.com/tact/turnCircle/bcb4fc7e-18c1-46d7-bdae-2e91147196c1.png
forceUnitFunc	自定义屏幕适配转换方法，详见屏幕适配	addUnitFuncType	undefined

Slots

名称	作用域	说明
catchLight	无	捕获时光效
hand	无	手势替换
btnMore	btnMoreType	按钮上更多信息插槽

Events

名称	参数	说明
clickStart	无	点击开始按钮
stateChange	StateChangeDataType	状态变化事件，详见基础玩法组件逻辑规范

Methods

对于基础玩法组件的stop方法入参做了限定，来确定命中目标

名称	入参	出参	说明
start	无	Promise	开始方法，规范详见基础玩法组件逻辑规范
stop	EndOptType	Promise	结束方法，详见基础玩法组件逻辑规范
reset	无	Promise	重置方法，详见基础玩法组件逻辑规范
disable	无	Promise	禁用方法，详见基础玩法组件逻辑规范
getState	无	StateConstant	获取状态方法，详见基础玩法组件逻辑规范
getHitIndex	无	number	获取当前时机将会捕获目标的索引
addUnitFunc	StyleValueType	string	单位转换方法（仅处理数字），优先使用forceUnitFunc，若未定义则按照750=100vw来转换，详见屏幕适配
addUnitForAll	StyleType	StyleType	对样式对象中所有数字样式进行转换处理，详见屏幕适配

State

暴露了部分computed的数据，方便外部判断

参数	说明	类型	示例
isWaitStart	是否为等待开始状态，详见基础玩法组件逻辑规范	boolean	true
isDisable	是否为禁用状态，详见基础玩法组件逻辑规范	boolean	false