yichael_proadvanced/components/modal/action-jump/action-jump.vue

<!-- 新版本跳区域部分文件 -->
<template>
	<view style="width: 750rpx;">
		<view class="flex justify-center" style="margin-top: 68rpx;">
			<!-- 目前格子数量不代表数字，显示完成度而已 -460rpx;-->
			<view class="grid-progress-vertical-container" style="top:-376rpx;">
				<view class="grid-progress-vertical-bar">
					<view class="grid-progress-vertical-child" v-for="(item, index) in maxShowCount +1" :key="index"
						v-if="index!==0">
						<view
							:class="showCurCount>=index? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
						</view>
						<view :class="(index%5 == 0||index == 1)?'':'grid-progress-text-hidden'"
							class="grid-progress-vertical-text" style="position: absolute;right: 0;top: -4px;">
							{{Math.floor(taskSignCount / 26 * index)}}
						</view>
					</view>
				</view>
				<view class="grid-progress-vertical-bar">
					<view class="grid-progress-vertical-child" v-for="(item, index) in maxShowCount +1" :key="index"
						v-if="index!==0">
						<view :class="(index%5 == 0||index == 1)?'':'grid-progress-text-hidden'"
							class="grid-progress-vertical-text" style="position: absolute;left: 0;top: -4px;">
							{{Math.floor(taskSignCount / 26 * index)+taskSignCount/2}}
						</view>
						<!-- 设置空位 -->
						<view></view>
						<view
							:class="showCurCount>=index+13? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="position-relative">
			<!-- <image class="position-absolute-left-top" style="width: 86.12px;height:55.96px; left: 146rpx;top:-100rpx;"
				src="../../../static/modal/action-jump/progress-tip-add.png"></image> -->
			<view class="position-absolute-left-top flex justify-center align-center " style="width: 86.12px;height:55.96px; 
			left: 146rpx;top:-90rpx; ">
				<view style="transform: scale(0.5);">
					<view class="sprite-yellow-arrow " :class="bRuning?'animation-play-state-play':''"></view>
				</view>
			</view>
			<view class="position-absolute-right-bottom flex justify-center align-center "
				style="width: 317rpx; height:138px; right: 46rpx; bottom: 15rpx;">
				<view class="flex  flex-direction justify-between" style="transform: scale(0.5);  height: 276px; ">
					<block v-if="bJumpPlay">
						<view class="sprite-rightToLeftArrow" :class="bJumpPlay?'sprite-rightToLeftArrow-play':''">
						</view>
						<view class="sprite-rightToLeftArrow" :class="bJumpPlay?'sprite-rightToLeftArrow-play':''">
						</view>
					</block>
					<block v-else>
						<image style="width: 317px; height: 42px;"
							src="../../../static/modal/action-jump/progress-tip.png"></image>
						<image style="width: 317px; height: 42px;"
							src="../../../static/modal/action-jump/progress-tip.png"></image>
					</block>

				</view>
			</view>
			<canvas canvas-id="actionJumpCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
			<canvas class="position-absolute-center" canvas-id="effectCanvas"
				:style="{ width: canvasW + 'px', height: '164px' }"></canvas>
		</view>
		<view class="flex align-center justify-center" style="font-size: 14px; width:750rpx;">
			<view style="position: relative;">
				<image style="width: 135px;height: 75px;" src="../../../static/modal/action-jump/Fill.png"></image>
				<view class="mid-absolute flex flex-direction align-center justify-center text-white">
					<view class="flex align-center">
						<image style="width: 22rpx;height: 28rpx;"
							src="../../../static/modal/action-jump/jumpSpeed.png"></image>
						<view style="margin-left: 6rpx;">平均速度</view>
					</view>
					<view style="margin-top: 12rpx;">{{averageSpeed}}</view>
				</view>
			</view>
			<view id="ActionJumpPlay" class="flex" style="position: relative;" @click="onControllerPlay">
				<image style="width: 110px;height: 110px;"
					src="../../../static/modal/action-jump/mid-button-orange@2x.png">
				</image>

				<image v-if="!bJumpPlay" class="mid-absolute" style="left:12rpx; width: 56rpx;height: 70rpx;"
					src="../../../static/play.png">
				</image>
				<image v-else class="mid-absolute" style="width: 100rpx;height: 100rpx;"
					src="../../../static/e-pause.png">
				</image>
			</view>
			<view style="position: relative;">
				<image style="width: 135px;height: 75px; transform: scaleX(-1);"
					src="../../../static/modal/action-jump/Fill.png"></image>
				<view class="mid-absolute flex flex-direction align-center justify-center text-white">
					<view class="flex align-center">
						<image style="width: 22rpx;height: 28rpx;"
							src="../../../static/modal/action-jump/jumpCalorie.png"></image>
						<view style="margin-left: 6rpx;">卡路里</view>
					</view>
					<view style="margin-top: 12rpx;">{{Math.floor(jumpCalorie)}}</view>
				</view>
			</view>
		</view>

		<view class="flex align-center justify-center" style="width: 750rpx;margin-top: 16rpx;">
			<view class="flex justify-center align-center" style="height: 120rpx; width: 444rpx; ">
				<view class="text-12px text-white text-center">
					{{taskDescribe}}
				</view>
			</view>
		</view>


		<!-- <view style="height: 41px;"></view> -->

		<!-- 测试按钮 -->
		<!-- 	<view style="display: flex;justify-content: space-between;">
			<view>{{isY?'Y':'X'}}</view>
			<button @click="onChangeY">Y为旋转轴</button>
			<button @click="onChangeX">X为旋转轴</button>
		</view> -->

		<!-- #ifdef H5 -->
		<view style="display: flex;justify-content: space-between;" class="margin-top margin-bottom">
			<button @click="onJumpType(0)">jump</button>
			<button @click="onJumpType(1)">left</button>
			<button @click="onJumpType(2)">right</button>
			<button @click="onJumpType(3)">rLeft</button>
			<button @click="onJumpType(4)">rRight</button>
		</view>
		<!-- #endif -->


		<!-- <view style="display: flex;justify-content: space-around; padding-bottom: 100rpx;">
			<view style="font-size: 14px;">t:{{countdown}}</view>
			<view style="font-size: 14px;">e:{{eliminationCount}}</view>
			<view style="font-size: 14px;">f:{{faultCount}}</view>
		</view> -->
	</view>

</template>

<script>
	import ActionJump from "@/util/util-js/action/jump-0.2.js"
	import {
		CONDITIONPASSED
	} from "@/util/util-js/enum.js"

	import Firework from "@/util/util-js/effect/firework.js"
	import Animation from "@/util/util-js/Animation.js"
	import puchConfig from "@/util/util-js/puchConfig.js"

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: mapState(['systemInfo','bOldDeviceType']),
		components: {

		},
		props: {
			showTime: {
				type: Number,
				default: 0
			},
			levelData: {
				type: Object,
				default: null
			},
			currentMode: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isY: true,
				canvasW: 0, // 画布宽
				canvasH: 0, // 画布高
				// SystemInfo: {}, // 设备信息

				directionJumpRight: null,
				directionJumpLeft: null,
				midJump: null,
				rotateJumpRight: null,
				rotateJumpLeft: null,
				directionJumpWhiteRight: null,
				directionJumpWhiteLeft: null,
				midJumpWhite: null,
				rotateJumpWhiteRight: null,
				rotateJumpWhiteLeft: null,
				//参考图片
				cankao: null,

				jumpTipImage: null,
				JumpTipOrange: null,
				jumpNormalLine: null,
				jumpNormalRect: null,
				jumpNormalWidth: 70,
				jumpNormalHeight: 164,

				jumpProgressTip: null,

				jumpTypeArray: [{
					jumpName: 'NORMAL',
					jumpCode: 0,
					icon: 'midJump',
					scaleX: 1,
					bTrigger: false,
					bShow: true,
				}, {
					jumpName: 'LEFT',
					jumpCode: 1,
					icon: 'directionJump',
					scaleX: 1,
					bTrigger: false,
					bShow: true,
				}, {
					jumpName: 'RIGHT',
					jumpCode: 2,
					icon: 'directionJump',
					scaleX: 1,
					bTrigger: false,
					bShow: true,
				}, {
					jumpName: 'LEFT_ROTATE',
					jumpCode: 3,
					icon: 'rotateJump',
					scaleX: 1,
					bTrigger: false,
					bShow: true,
				}, {
					jumpName: 'RIGHT_ROTATE',
					jumpCode: 4,
					icon: 'rotateJump',
					scaleX: 1,
					bTrigger: false,
					bShow: true,
				}],
				spawnArray: [],
				deleteSpawn: null, //已删除的对象
				deleteImage: null,
				/**
				 * 生成的背景位置
				 */
				spawnPos: [],
				spawnAnimation: null,
				spawnProcess: 1,

				//下一个生成是相反的方向
				bNextSpawnRightDirection: false,
				bNextSpawnRightRotateDirection: false,

				//生成预制的模板，用count 来判断生成哪一种
				template: [{ //原地
					count: 1,
					spawnList: [
						[0]
					]
				}, {
					count: 2,
					spawnList: [
						[2, 1],
						[1, 2],
						[3, 4],
						[4, 3]
					]
				}, {
					count: 3,
					spawnList: [
						[2, 0, 1],
						[1, 0, 2],
						[3, 0, 4],
						[4, 0, 3]
					]
				}, ],
				//模板对象池，管理生成对象
				templatePool: [],

				levelType: 0,
				countdown: 60,
				countdownInterval: null,

				faultCount: 0,
				eliminationCount: 0,

				bJumpPlay: false,
				jumpCalorie: 0,

				averageSpeedInterval: null,
				averageSpeed: 0,
				tempHitCount: 0,

				//硬件设备处理
				BLEAccIndex: 0,
				xA: 0,
				yA: 0,
				zA: 0,
				actionJumpObj: null,

				/**
				 * 交互数据处理
				 */
				//当前选择的关卡信息
				selfLevelData: null,
				// 双人模式下 数据
				//标记块数量
				taskSignCount: 0, //总数
				taskSignCurCount: 0, //当前计数
				//{"type":1,"explain":"规定时间内跳完所有标志块","limitType":1}
				taskConditionPassed: null,
				taskDescribe: '',
				//满格的数值是 25
				maxShowCount: 13,
				addShowCountUnit: 0,
				showCurCount: 0,
				roundingCount: 0,
				//游戏结束
				isGameOver: false,


				//pk模式下操作
				leftShowCurCount: 0,
				rightShowCurCount: 0,
				isleftPlayer: true,

				/**
				 * 是否允许绘制
				 */
				canOnDraw: false,
				/**
				 * 是否去到下一个关卡
				 */
				canGoNext: false,
				/**
				 * 生成的特效
				 */
				canSpawnTemp: null,

				onLogData: '',

				/**
				 * 是否显示关卡提示
				 */
				bTipLevel: false,

				/**
				 * 烟花相关
				 */
				// firework collection
				fireworks: [],
				fireworkImage: null,
				loop: null,
				count: 100,
				effectCanvas: null,
				effectCurrentSpawn: null,
				effectSpawnPosX: 0,
				/**
				 * 烟花特效
				 */
				bDrawBoomEffect: false,
				//绘制箭头效果
				bRuning: false,
				bRuningInfinite: false,
				yellowRuningTimeout: null,
			}
		},
		watch: {
			levelData(val) {
				//更新数据
				// console.log("levelData ============>"+JSON.stringify(val));
				if (val) {
					this.taskSignCount = val.signCount;
					this.taskConditionPassed = val.conditionPassed;
					this.taskDescribe = val.describe;
					this.addShowCountUnit = (this.maxShowCount * 2) / this.taskSignCount;
					// console.log("this.addShowCountUnit:", this.addShowCountUnit, this.maxShowCount * 2, this
					// 	.taskSignCount);
					this.showCount = 0;
					//用signType 做等级类型
					this.levelType = val.signType;

					// console.log(JSON.stringify(this.taskConditionPassed));
				}

			},
			currentMode(val) {
				// console.log('==========> action jump currentMode:', val);
			}
		},
		created() {
			let _self = this;
			this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
			this.effectCanvas = uni.createCanvasContext("effectCanvas", this);
			// this.SystemInfo = this.systemInfo; // uni.getSystemInfoSync();
			this.canvasW = this.systemInfo.windowWidth; // 画布宽度
			this.canvasH = 147.68;
			this.onLoadImage();

			setTimeout(() => {
				this.onListenActionJump();
			}, 2000)

			//更新一次状态
			const value = uni.getStorageSync('levelButtonPrompt');
			if (value) {
				_self.bTipLevel = !value.isSelected;
			} else {
				_self.bTipLevel = true;
			}

			// console.log('==========>levelButtonPrompt:', _self.bTipLevel);
			if (this.averageSpeedInterval) {
				clearInterval(this.averageSpeedInterval);
				this.averageSpeedInterval = null;
			}
			//计算平均速度
			this.averageSpeedInterval = setInterval(() => {
				this.averageSpeed = this.tempHitCount;
				this.tempHitCount = 0;
			}, 3000)
		},
		methods: {
			...mapMutations(['onWriteBLEConnectionValue', 'onConvertDeviceData']),
			//更新新手状态提示
			onUpdateTipLevelValue(value) {
				this.bTipLevel = value;
			},
			onListenActionJump() {
				let _self = this;
				console.log("*****************onListenActionJump*****************************");
				_self.actionJumpObj = new ActionJump();
				_self.actionJumpObj.addEventListener('resultant', (e) => {
					if (e.type == 'stateDataOfJump') {
						//发送给game，在game里面处理判断
						this.listenStateDataOfJump(e);
					} else if (e.type == 'stop') {
						this.onClearData();
						this.actionJumpObj.resetAll();

						if (this.canOnDraw) {
							this.canOnDraw = false;
							// //这里更新特效
							// this.onDrawEffect(this.canSpawnTemp);
							this.onDraw("tipHit", true);
						}
						if (this.canGoNext) {
							this.canGoNext = false;
							// //这里更新特效
							// this.onDrawEffect(this.canSpawnTemp);
							//绘制新触发状态
							this.onDraw("normal", false);
							setTimeout(() => {
								this.startJumpGame();
							}, 500)
						}
						// console.log('stop');
						//这里处理生成下一个
					} else if (e.type == 'log') {
						if (e.logType == 'normal') {
							console.log(e.data);
						} else if (e.logType == 'error') {
							console.error(e.data);
						} else if(e.logType == 'warn'){
							console.warn(e.data);
						}
					}
				})
			},
			//load 相关图片
			onLoadImage() {
				let _self = this;
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/directionJump-left.png",
					success: function(image) {
						_self.directionJumpLeft = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/directionJump-right.png",
					success: function(image) {
						_self.directionJumpRight = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/midJump.png",
					success: function(image) {
						_self.midJump = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/rotateJump-right.png",
					success: function(image) {
						_self.rotateJumpRight = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/rotateJump-left.png",
					success: function(image) {
						_self.rotateJumpLeft = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/directionJumpWhite-right.png",
					success: function(image) {
						_self.directionJumpWhiteRight = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/directionJumpWhite-left.png",
					success: function(image) {
						_self.directionJumpWhiteLeft = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/midJumpWhite.png",
					success: function(image) {
						_self.midJumpWhite = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/rotateJumpWhite-right.png",
					success: function(image) {
						_self.rotateJumpWhiteRight = image;
					}
				});

				uni.getImageInfo({
					src: "../../../static/modal/action-jump/rotateJumpWhite-left.png",
					success: function(image) {
						_self.rotateJumpWhiteLeft = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/jumpTip.png",
					success: function(image) {
						_self.jumpTipImage = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/jump-tip-orange@2x.png",
					success: function(image) {
						_self.JumpTipOrange = image;
					}
				})
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/progress-tip.png",
					success: function(image) {
						_self.jumpProgressTip = image;
					}
				})

				uni.getImageInfo({
					src: "../../../static/modal/action-jump/jumpNormal-line.png",
					success: function(image) {
						_self.jumpNormalLine = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/jumpNormal-rect.png",
					success: function(image) {
						_self.jumpNormalRect = image;
						_self.onDrawBg(true);
					}
				});


				uni.getImageInfo({
					src: "../../../static/modal/action-jump/cankao.png",
					success: function(image) {
						_self.cankao = image;
					}
				});

				/**
				 * 烟花照片
				 */
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/boom.png",
					success: function(image) {
						_self.fireworkImage = image;
					}
				});

			},
			/**
			 * 重置生成数组，重置倒计时
			 */
			resetJumpGame() {

				this.spawnArray = [];
				this.templatePool = [];
				if (this.countdownInterval) {
					clearInterval(this.countdownInterval);
					this.countdownInterval = null;
				}

				// this.resetCountdown(60);

			},
			startJumpGame() {
				this.isGameOver = false;
				this.resetJumpGame();
				//开始游戏
				this.index = 0;
				// this.levelType = 5;
				let spawnCount = 7;
				let _ranType = Math.floor(Math.random() * 2);
				//生成二个占位
				this.addTemplatePoolFromType(false, this.template[0].spawnList[0][0]);
				this.addTemplatePoolFromType(false, this.template[0].spawnList[0][0]);
				if (this.levelType == 0) {
					//随便生成一组跳的数据
					let _spawnList = this.template[0].spawnList;
					for (let i = 0; i < 30; i++) {
						//再对象池里面生成一组对象
						this.addTemplatePoolFromType(true, _spawnList[0][0]);
					}
					//先生成spawnCount个
					for (let i = 0; i < spawnCount; i++) {
						this.spawnArray.push(this.templatePool[this.index]);
						this.index++;
					}

				} else if (this.levelType == 1) {
					//生成一组 左跳右跳
					let _spawnList = this.template[1].spawnList;
					for (let i = 0; i < 30; i++) {
						let ran = Math.floor(Math.random() * 2);
						for (let j = 0; j < _spawnList[ran].length; j++) {
							//再对象池里面生成一组对象
							this.addTemplatePoolFromType(true, _spawnList[ran][j]);
						}
					}
					//先生成spawnCount个
					for (let i = 0; i < spawnCount; i++) {
						this.spawnArray.push(this.templatePool[this.index]);
						this.index++;
					}

				} else if (this.levelType == 2) {
					//生成一组 左跳右跳原地
					let _spawnList = this.template[2].spawnList;
					for (let i = 0; i < 30; i++) {
						let ran = Math.floor(Math.random() * 2);
						for (let j = 0; j < _spawnList[ran].length; j++) {
							//再对象池里面生成一组对象
							this.addTemplatePoolFromType(true, _spawnList[ran][j]);
						}
					}
					//先生成spawnCount个
					for (let i = 0; i < spawnCount; i++) {
						this.spawnArray.push(this.templatePool[this.index]);
						this.index++;
					}


				} else if (this.levelType == 3) {
					//生成一组 左旋跳右旋跳
					let _spawnList = this.template[1].spawnList;
					for (let i = 0; i < 30; i++) {
						let ran = Math.floor(Math.random() * 2) + 2;
						for (let j = 0; j < _spawnList[ran].length; j++) {
							//再对象池里面生成一组对象
							this.addTemplatePoolFromType(true, _spawnList[ran][j]);
						}
					}
					//先生成spawnCount个
					for (let i = 0; i < spawnCount; i++) {
						this.spawnArray.push(this.templatePool[this.index]);
						this.index++;
					}
				} else if (this.levelType == 4) {
					//生成一组 左旋跳右旋跳
					let _spawnList = this.template[2].spawnList;
					for (let i = 0; i < 30; i++) {
						let ran = Math.floor(Math.random() * 2) + 2;
						for (let j = 0; j < _spawnList[ran].length; j++) {
							//再对象池里面生成一组对象
							this.addTemplatePoolFromType(true, _spawnList[ran][j]);
						}
					}
					//先生成spawnCount个
					for (let i = 0; i < spawnCount; i++) {
						this.spawnArray.push(this.templatePool[this.index]);
						this.index++;
					}

				} else if (this.levelType == 5) {
					for (let i = 0; i < 20; i++) {
						//随便生成三组数据
						let _newArray = [];
						let _spawnList2 = this.template[2].spawnList;
						let ran2 = Math.floor(Math.random() * 2);
						let ran3 = Math.floor(Math.random() * 2);
						if (_ranType >= 1) {
							ran2 += 2;
							ran3 += 2;
						}
						_newArray = _newArray.concat(_spawnList2[ran2]);
						_newArray = _newArray.concat(_spawnList2[ran3]);
						for (let j = 0; j < _newArray.length; j++) {
							this.addTemplatePoolFromType(true, _newArray[j]);
						}
					}
					//先生成spawnCount个
					for (let i = 0; i < spawnCount; i++) {
						this.spawnArray.push(this.templatePool[this.index]);
						this.index++;
					}
				}
				this.onDraw("tipHit", false);
			},
			/**
			 * 生成对应预制对象
			 * @param {Object} bShow
			 * @param {Object} _jumpType
			 */
			addTemplatePoolFromType(bShow, _jumpType) {

				for (let i = 0; i < this.jumpTypeArray.length; i++) {
					if (this.jumpTypeArray[i].jumpCode == _jumpType) {
						let _jumpPrefab = Object.assign({}, this.jumpTypeArray[i], {
							bShow: bShow,
							bInit: true,
							position: 0,
							animation: null, //动画
						});
						this.templatePool.push(_jumpPrefab);
						break;
					}
				}
			},
			//单纯的绘制八个背景
			onDrawBg(bDraw) {
				this.spawnPos = [];

				if (bDraw) {
					this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
				}

				let _currentBgStartX = this.canvasW / 2;
				let count = 7;
				let _currentPos = -12,
					_addPos = 0;

				// this.actionJumpCanvas.drawImage(this.jumpProgressTip.path, _currentBgStartX, 5, 171, 24.66);
				// this.actionJumpCanvas.drawImage(this.jumpProgressTip.path, _currentBgStartX, 116, 171, 24.66);
				for (let i = 0; i < count; i++) {
					if (0 !== i) {
						_currentPos += this.jumpNormalWidth;
					} else {
						_currentPos -= this.jumpNormalWidth;
					}

					if (2 === i) {
						//结尾时候快消除完绘制一次大图背景。不然会为空白
						if (this.spawnArray.length < 3)
							this.actionJumpCanvas.drawImage(this.jumpTipImage.path, _currentPos, 0, 120, this.canvasH);

						if (bDraw) {
							this.actionJumpCanvas.drawImage(this.JumpTipOrange.path, _currentPos + 3, 7, 113, this
								.canvasH -
								14);
						}

						// this.actionJumpCanvas.drawImage(this.midJump.path, _currentPos + 30, 46, 60, 60);
						//添加对应生成点
						this.spawnPos.push({
							center: _currentPos + 30
						})
						_currentPos += 50;
					} else {
						this.actionJumpCanvas.drawImage(this.jumpNormalLine.path, _currentPos, 0, this.jumpNormalWidth,
							this.canvasH);
						if (bDraw) {
							this.actionJumpCanvas.drawImage(this.jumpNormalRect.path, _currentPos, 0, this.jumpNormalWidth,
								this.canvasH);
						}

						// this.actionJumpCanvas.drawImage(this.midJump.path, _currentPos + 16, 55, 40, 40);
						//添加对应生成点
						this.spawnPos.push({
							center: _currentPos + 16
						})
					}

				}
				if (bDraw) {
					this.actionJumpCanvas.draw();
				}
			},
			onDraw(type, bAnimation) {
				let _self = this;
				if (bAnimation && _self.spawnAnimation == null) {
					_self.spawnProcess = 0;
					_self.spawnAnimation = new Animation({
						timing: 'linear',
						duration: 200,
						onProcess: function onProcess(process) {
							_self.spawnProcess = process;
							_self.onDraw('normal', true);
							// console.log("process=" + process);
						},
						onAnimationFinish: function onAnimationFinish() {
							// console.log("finish animation");
							_self.spawnAnimation = null;
						}
					})
				}
				this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
				//单纯绘制背景
				this.onDrawBg(false);
				//计算一个节点数组
				// let _oldRectMoveDis = 1;
				for (let i = 0; i < this.spawnArray.length; i++) {
					//默认 mid 图标
					let _temp = this.spawnArray[i].bTrigger ? this.midJump : this.midJumpWhite;
					if (this.spawnArray[i].icon == 'directionJump') {
						if (this.spawnArray[i].jumpName == "RIGHT") {
							_temp = this.spawnArray[i].bTrigger ? this.directionJumpRight : this.directionJumpWhiteRight;
						} else {
							_temp = this.spawnArray[i].bTrigger ? this.directionJumpLeft : this.directionJumpWhiteLeft;
						}
					} else if (this.spawnArray[i].icon == 'rotateJump') {
						if (this.spawnArray[i].jumpName == "RIGHT_ROTATE") {
							_temp = this.spawnArray[i].bTrigger ? this.rotateJumpRight : this.rotateJumpWhiteRight;
						} else {
							_temp = this.spawnArray[i].bTrigger ? this.rotateJumpLeft : this.rotateJumpWhiteLeft;
						}
					}
					this.actionJumpCanvas.save();
					// let _opacity = this.spawnArray[i].bTrigger ? 0.7 : 1;
					// this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bShow ? _opacity : 0;
					// this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);

					let _currentPos = this.spawnPos[i].center;
					let _currentCenterPos = 0;

					if (2 === i) {
						//这里分两部分走，从小图走到大图
						let _spawnBiggerToLeft = this.spawnArray[i];
						//这里记录一个生成点，后面用于生成特效
						this.effectSpawnPosX = _currentPos;
						//大图
						let tempPosition = _currentPos;
						if (!bAnimation || _spawnBiggerToLeft.bInit) {
							_spawnBiggerToLeft.position = _currentPos;
							_spawnBiggerToLeft.bInit = false;
						} else {
							tempPosition = _spawnBiggerToLeft.position - Math.abs(_currentPos - _spawnBiggerToLeft
								.position) * _self.spawnProcess;

						}
						if (1 === this.spawnProcess) {
							_spawnBiggerToLeft.position = tempPosition;
						} else {
							//绘制一次前面方块背景前移
							this.actionJumpCanvas.drawImage(this.jumpNormalRect.path, tempPosition - 16, 0, this
								.jumpNormalWidth,
								this.canvasH);
							this.actionJumpCanvas.clearRect(this.spawnPos[i].center - 30, 0, 120, this.canvasH);
						}
						let _width = 40 + 20 * _self.spawnProcess;
						this.actionJumpCanvas.drawImage(_temp.path, tempPosition, 55 - 9 * _self.spawnProcess, _width,
							_width);

						//绘制多一次背景
						this.actionJumpCanvas.drawImage(this.jumpTipImage.path, this.spawnPos[i].center - 30, 0, 120, this
							.canvasH);

						this.actionJumpCanvas.drawImage(this.JumpTipOrange.path, this.spawnPos[i].center - 27, 7, 113, this
							.canvasH -
							14);
					} else {
						//小图
						let _otherObj = this.spawnArray[i];
						let tempPosition = _currentPos;
						if (!bAnimation || _otherObj.bInit) {
							_otherObj.position = _currentPos;
							_otherObj.bInit = false;
							// console.log(i + " add== " + _otherObj.position + " == " + tempPosition);
						} else {
							tempPosition = _otherObj.position - Math.abs(_currentPos - _otherObj.position) * _self
								.spawnProcess;
							// if (i === 1) {
							// 	console.log(tempPosition + "==" + _otherObj.position + "==" + Math.abs(_currentPos -
							// 		_otherObj.position));
							// }
						}
						if (1 === this.spawnProcess) {
							_otherObj.position = tempPosition;
						}
						// if (1 === i) {
						// 	_oldRectMoveDis = Math.abs(_currentPos - _otherObj.position);
						// }

						this.actionJumpCanvas.drawImage(this.jumpNormalRect.path, tempPosition - 16, 0, this
							.jumpNormalWidth,
							this.canvasH);
						if (this.spawnArray[i].bShow) {
							this.actionJumpCanvas.drawImage(_temp.path, tempPosition, 55, 40, 40);
						}

					}
					this.actionJumpCanvas.restore();
				}

				this.actionJumpCanvas.draw();
			},
			onDrawEffect(_temp) {
				if (!this.bRuning) {
					this.bRuning = true;
					// console.log(this.bRuning);
					if (this.yellowRuningTimeout) {
						clearTimeout(this.yellowRuningTimeout)
						this.yellowRuningTimeout = null;
					}
					this.yellowRuningTimeout = setTimeout(() => {
						this.bRuning = false;
						// console.log(this.bRuning);
					}, 1000)
				}


				//根据当前消除的生成一个
				// console.log("生成的_temp:" + JSON.stringify(_temp));
				let spawnTemp = this.midJump;
				let offest = 5;
				if (_temp.icon == 'directionJump') {
					spawnTemp = _temp.jumpName == "RIGHT" ? this.directionJumpRight : this.directionJumpLeft;
				} else if (_temp.icon == 'rotateJump') {
					spawnTemp = _temp.jumpName == "RIGHT_ROTATE" ? this.rotateJumpRight : this.rotateJumpLeft;
					offest = _temp.jumpName == "RIGHT_ROTATE" ? 8 : 6;
				}
				let tempFirework = new Firework(this.fireworkImage,
					spawnTemp, _temp.scaleX, this.effectSpawnPosX, 0, this.canvasW, 164, offest);
				this.fireworks.push(tempFirework);
				this.bDrawBoomEffect = true;
				this.onInitFirework();
			},
			onClear() {
				this.resetJumpGame();

				this.onDrawBg(true);

				this.xA = 0;
				this.yA = 0;
				this.zA = 0;

				this.actionJumpObj.resetAll();
			},

			/**
			 * 统一绘制 效果 背景，交互，烟花
			 */
			onInitFirework() {
				if (this.loop != null) {
					return;
				}

				this.loop = setInterval(() => {
					if (!this.bDrawBoomEffect) {
						clearInterval(this.loop);
						this.loop = null;
						// console.log("结束绘制");
						this.effectCanvas.clearRect(0, 0, this.canvasW, 164);
						this.effectCanvas.draw();
						return;
					}
					this.effectCanvas.clearRect(0, 0, this.canvasW, 164);
					if (this.bDrawBoomEffect) {
						// loop over each firework, draw it, update it
						var i = this.fireworks.length;
						while (i--) {
							this.fireworks[i].draw(this.effectCanvas, () => {
								this.fireworks.splice(i, 1);
								if (this.fireworks.length == 0) {
									this.bDrawBoomEffect = false;
								}
							});

						}
					}
					this.effectCanvas.draw();
				}, 30)
			},
			onJumpType(event) {
				// console.log("onJumpType:", event);
				if (this.isGameOver || !this.bJumpPlay) return;
				this.eliminateJumpPrefab(event);
			},

			// update (dt) {}
			//模拟测试调用
			eliminateJumpPrefab(_jumpType) {
				//只触发第二个
				if (this.spawnArray.length < 3 || this.spawnAnimation != null) {
					return;
				}
				let _temp = this.spawnArray[2];
				//如果当前的跳类型和预制目标一样
				if (_jumpType == _temp.jumpCode) {
					_temp.bTrigger = true;
					this.deleteSpawn = this.spawnArray.splice(0, 1);

					if (this.index < this.templatePool.length) {
						this.spawnArray.push(this.templatePool[this.index]);
						this.index++;
					}
					//这里更新特效
					let _endTemp = Object.assign({}, _temp);
					this.onDrawEffect(_endTemp);
					//绘制新触发状态
					this.onDraw('tipHit', true);
					//成功
					this.setEliminationCount(1);
					//替换数组
					// console.log(this.index + " == " + this.spawnArray.length);
					if (this.spawnArray.length < 3 && this.index > 3) {
						clearInterval(this.countdownInterval);
						this.countdownInterval = null;
						//绘制新触发状态
						this.onDraw("normal", false);
						setTimeout(() => {
							this.startJumpGame();
						}, 2000)
					}
				} else {
					//失误
					this.setFaultCount(1);
				}
			},

			//设置倒计时
			setCountdown(value) {
				this.countdown -= value;
				// this.countdownLabel.string = '倒计时：' + this.countdown;
				this.$emit('actionJumpCountDownUpdate', {
					countDown: this.countdown
				});
			},
			resetCountdown(value) {
				this.countdown = value;
				// this.countdownLabel.string = '倒计时：' + this.countdown;
				this.$emit('actionJumpCountDownUpdate', {
					countDown: this.countdown
				});
			},
			//设置ui信息
			setEliminationCount(value) {
				this.tempHitCount++;
				this.taskSignCurCount++;
				this.roundingCount += this.addShowCountUnit;
				this.eliminationCount += value;

				// this.eliminationLabel.string = '消除数量：' + this.eliminationCount.toString();
				this.$emit('actionJumpDataUpdate', {
					eliminationCount: this.eliminationCount,
					faultCount: this.faultCount
				});
				this.jumpCalorie += puchConfig.getJumpCalorie(this.eliminationCount + this.faultCount);

				//如果是pk模式。不走下面判断
				if (this.currentMode == 'pkMode') return;

				if (CONDITIONPASSED.ENERGYBARFULL == this.taskConditionPassed.limitType) {
					//能量条的条件下才显示能量条动
					//取两位后计算Math floor,不然会有偏差值问题  Math.floor（39.9999999+ 0.1111111） = 39
					this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
					//1.能量槽满的时候，说明踩中次数到达	
					if (this.taskSignCurCount >= this.taskSignCount)
						this.onGameOver("energyBarFull");
				} else if (CONDITIONPASSED.SKIPALLFLAGWITHINTIME == this.taskConditionPassed.limitType) {
					//规定时间下也给显示能量条
					this.showCurCount = Math.floor(this.roundingCount.toFixed(2));
					//2.规定时间内跳完所有标志块
					if (this.taskSignCurCount >= this.taskSignCount)
						this.onGameOver("skipAllFlagWithinTime");
				} else if (this.taskConditionPassed.isScore) {
					//3.达到一定分数
					//如果是用分数判断
					//分数是 跳对的加1分，错的扣1分，0不扣分。
					let curScore = this.eliminationCount - this.faultCount;
					curScore = curScore < 0 ? 0 : curScore;
					//当前分数达到，胜利
					if (curScore >= this.taskConditionPassed.limitScore)
						this.onGameOver("score");
				}
			},
			onGameOver(type) {
				this.isGameOver = true;
				//处理参数
				this.onClear();
				this.onClearData();
				this.bJumpPlay = false;
				/**
				 * 判断胜利和失败
				 */
				let myWin = false; //默认失败
				//比如, 1.充满左右两边蓄能槽.2.规定时间内跳完所有标志块.
				if (type == "energyBarFull") {
					//1.能量槽满的时候，说明踩中次数到达	
					if (this.taskSignCurCount >= this.taskSignCount) {
						myWin = true;
					}
				} else if (type == 'skipAllFlagWithinTime') {
					myWin = true;
				} else if (type == "timeUp") {
					//2.规定时间内跳完所有标志块
					//查看消除数量是否到达总数,未达成就是未完成
					if (this.taskSignCurCount >= this.taskSignCount) {
						myWin = true;
					}
				} else if (type == "score") {
					myWin = true;
				}
				console.log(type, {
					myWin: myWin
				});
				this.$emit('gameOver', {
					myWin: myWin,
					type: 'calorieMode',
					isOffEvent: true
				});
			},
			//pk模式下结束游戏关卡
			onPKModeGameOver(type) {
				this.isGameOver = true;
				//处理参数
				this.onClear();
				this.onClearData();
				this.bJumpPlay = false;

				this.$emit('gameOver', {
					type: 'pkMode',
					isOffEvent: true
				});
			},
			setFaultCount(value) {
				this.tempHitCount++;
				this.faultCount += value;
				// this.faultLabel.string = '失误：' + this.faultCount;
				this.$emit('actionJumpDataUpdate', {
					eliminationCount: this.eliminationCount,
					faultCount: this.faultCount
				});
				this.jumpCalorie += puchConfig.getJumpCalorie(this.eliminationCount + this.faultCount);

			},

			//控制播放
			onControllerPlay() {
				if (this.bJumpPlay) {
					//仅仅暂停，没有清空数据
					this._changePlay(false);
					this.$emit("actionJumpControllerPlay", false);
				} else {
					this.$emit("actionJumpCheck");
				}
			},
			onContinueGame() {
				this._changePlay(true);
			},
			onClearActionJumpData() {
				console.log("onClearActionJumpData");
				this.onClear();
				this.onClearData();
			},
			//修改状态
			_changePlay(bPlaying) {
				if (bPlaying) {
					this.bJumpPlay = bPlaying;
				} else {
					this.bJumpPlay = !this.bJumpPlay;
				}
			},

			onActionJumpPlay() {
				this.onClear();
				this.onClearData();
				this.startJumpGame();
				this._changePlay(true);

				//reset 对应计算数据
				this.taskSignCurCount = 0;
				this.showCurCount = 0;
				this.roundingCount = 0;

				this.faultCount = 0;
				this.eliminationCount = 0;
			},

			getCurrentJumpType() {
				let _temp = this.spawnArray[2];
				return _temp.jumpCode;
			},

			//监听跳的状态数据
			listenStateDataOfJump(data) {

				if (this.spawnArray.length < 3) return;
				let _jumpType = this.getCurrentJumpType();
				//初始全部默认状态
				let _tempState = [{
						jumpName: 'NORMAL',
						jumpCode: 0,
						bTrigger: false,
						describe: '正常跳'
					},
					{
						jumpName: 'LEFT',
						jumpCode: 1,
						bTrigger: false,
						describe: '左直跳'
					},
					{
						jumpName: 'RIGHT',
						jumpCode: 2,
						bTrigger: false,
						describe: '右直跳'
					},
					{
						jumpName: 'LEFT_ROTATE',
						jumpCode: 3,
						bTrigger: false,
						describe: '左旋转跳'
					},
					{
						jumpName: 'RIGHT_ROTATE',
						jumpCode: 4,
						bTrigger: false,
						describe: '右旋转跳'
					}
				];


				let {
					currentMaxValue,
					oGyroValue,
					peakOfWaveMaxValue,
					valleyOfWaveMinValue
				} = data
				// console.log('stateDataOfJump:');
				// console.log(JSON.stringify(data));
				this.onLogData = data;
				let _rotateLimit = 4;
				let _jumpLimit = 0;

				switch (_jumpType) {
					case 0:
						//JumpType.NORMAL = 0
						_tempState[0].bTrigger = true;
						this.eliminateJumpPrefabFormTemp(_tempState);
						break;
					case 1:
						if (currentMaxValue < -_jumpLimit) {
							//left jump
							_tempState[1].bTrigger = true;
						}
						this.eliminateJumpPrefabFormTemp(_tempState);
						break;
					case 2:
						if (currentMaxValue > _jumpLimit) {
							//right jump
							_tempState[2].bTrigger = true;
						}
						this.eliminateJumpPrefabFormTemp(_tempState);
						break;
					case 4:
						if (oGyroValue > _rotateLimit) {
							_tempState[4].bTrigger = true;
						}
						this.eliminateJumpPrefabFormTemp(_tempState);
						break;
					case 3:
						if (oGyroValue < -_rotateLimit) {
							_tempState[3].bTrigger = true;
						}
						this.eliminateJumpPrefabFormTemp(_tempState);
						break;
					default:
						console.log('没有对应的_jumpType', _jumpType);
						break;
				}

				// if (currentMaxValue == 0) {

				// } else {
				// 	// console.log('2====', data);

				// 	if (this.isY) {
				// 		//如果是检测到旋转跳
				// 		if (oGyroValue > _rotateLimit) {
				// 			// console.log('y right:', oGyroValue);
				// 			_tempState[4].bTrigger = true;
				// 		} else if (oGyroValue < -_rotateLimit) {
				// 			// console.log('y left:', oGyroValue);
				// 			_tempState[3].bTrigger = true;
				// 		}
				// 		if (valleyOfWaveMinValue < -_jumpLimit) {
				// 			//left jump
				// 			_tempState[1].bTrigger = true;
				// 		} else if (peakOfWaveMaxValue > _jumpLimit) {
				// 			//right jump
				// 			_tempState[2].bTrigger = true;
				// 		}
				// 	} else {
				// 		//如果是检测到旋转跳
				// 		if (oGyroValue < -5) {
				// 			// console.log('x right:', oGyroValue);
				// 			_tempState[4].bTrigger = true;
				// 		} else if (oGyroValue > 5) {
				// 			// console.log('x left:', oGyroValue);
				// 			_tempState[3].bTrigger = true;
				// 		}
				// 		if (valleyOfWaveMinValue < -_jumpLimit) {
				// 			//left jump
				// 			_tempState[1].bTrigger = true;
				// 		} else if (peakOfWaveMaxValue > _jumpLimit) {
				// 			//right jump
				// 			_tempState[2].bTrigger = true;
				// 		}
				// 	}

				// 	this.eliminateJumpPrefabFormTemp(_tempState);
				// }
			},
			eliminateJumpPrefabFormTemp(_tempState) {
				//只触发第三个
				if (this.spawnArray.length < 3) {
					return;
				}
				let _temp = this.spawnArray[2];
				let bSuccess = false;
				for (let i = 0; i < _tempState.length; i++) {
					let _state = _tempState[i];
					if (_state.bTrigger) {
						console.log(this.eliminationCount + ',识别跳的类型:' + _state.describe + ',当前预制类型:' + _temp.jumpName +
							"\n直跳判断值:" + this.onLogData.currentMaxValue + ",旋转跳值:" + this.onLogData.oGyroValue);
					}
					//如果当前的跳类型和预制目标一样
					if (_state.jumpCode == _temp.jumpCode && _state.bTrigger) {
						//成功
						bSuccess = true;
						break;
					}
				}
				//如果存在其中一个为true
				if (bSuccess) {
					_temp.bTrigger = true;
					this.canSpawnTemp = _temp;
					setTimeout(() => {
						//这里更新特效
						this.onDrawEffect(this.canSpawnTemp);
					}, 150);
					this.deleteSpawn = this.spawnArray.splice(0, 1);

					if (this.index < this.templatePool.length) {
						this.spawnArray.push(this.templatePool[this.index]);
						this.index++;
					}
					//成功
					this.setEliminationCount(1);
					//替换数组
					// console.log(this.index + " == " + this.spawnArray.length);
					if (this.spawnArray.length < 3 && this.index > 3) {
						clearInterval(this.countdownInterval);
						this.countdownInterval = null;
						//绘制新触发状态
						this.canGoNext = true;
					} else {
						//绘制新触发状态
						this.canOnDraw = true;
					}

				} else {
					//失误
					this.setFaultCount(1);
				}


			},


			/**
			 * @param {Object} gameData
			 * 识别跳部分数据处理
			 */
			onBLERopeUpdate(gameData) {
				if (!this.bJumpPlay || this.isGameOver || this.spawnAnimation != null) return;

				//********陀螺仪角速度********
				let {
					gx,
					gy,
					gz
				} = gameData.gyro;
				let {
					min,
					s,
					ms
				} = gameData;
				//-gameData.acc.ax * 10;
				let _ax = gameData.acc.ax * 10;
				let _ay = gameData.acc.ay * 10;
				let _az = gameData.acc.az * 10;
				//低通滤波分离重力
				let alpha = 0.8;
				this.xA = alpha * this.xA + (1 - alpha) * _ax;
				this.yA = alpha * this.yA + (1 - alpha) * _ay;
				this.zA = alpha * this.zA + (1 - alpha) * _az;

				//高通滤波获取线性速度
				let linear_acceleration_x = _ax - this.xA;
				let linear_acceleration_y = _az - this.zA;
				let linear_acceleration_z = _ay - this.yA;

				let _temp = {
					linearAcc: {
						lAccX: linear_acceleration_x,
						lAccY: linear_acceleration_y,
						lAccZ: linear_acceleration_z
					}, //gameData.acc,
					oriAcc: {
						oAccX: _ax,
						oAccY: _ay,
						oAccZ: _az
					},
					gravityAcc: {
						gravityX: this.xA,
						gravityY: this.yA,
						gravityZ: this.zA
					},
					bLimitRebound: false,
					resultant: Math.sqrt(_ax * _ax +
						_ay * _ay + _az * _az),
					runIndex: this.BLEAccIndex,
					//陀螺仪
					oriGyro: {
						oGyroX: gx,
						oGyroY: gy,
						oGyroZ: gz
					},
					//输入当前轴,旧设备使用Y轴，即为true
					bYAxis: this.bOldDeviceType?true:false,
				};
				this.actionJumpObj.updateJump(_temp);
				this.BLEAccIndex++;
			},
			onClearData() {
				this.BLEAccIndex = 0;
			},
			onChangeY() {
				this.isY = true;
			},
			onChangeX() {
				this.isY = false;
			},
			onGetActionJumpPlayView(callback) {
				let view = uni.createSelectorQuery().select('#ActionJumpPlay');
				view.boundingClientRect(data => {
					if (callback)
						callback(data);
				}).exec();
			},

			onTipLevel() {
				this.$emit("tipLevel", {
					hiddenType: 'normal'
				});
				console.log("**************22");
			}
		}
	}
</script>

<style lang="scss">
	.mid-absolute {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}

	.action-jump-timer {
		position: absolute;
		top: -150rpx;
	}

	.grid-progress-vertical-container {
		min-height: 376rpx;
	}

	.grid-progress-vertical-bar {
		max-height: 376rpx;
	}

	.grid-progress-vertical-child {
		width: 35px;
		height: 7.36px;
		margin: 7.36px 0 0 0;
		position: relative;
	}

	.grid-progress-vertical-active {
		width: 28rpx;
	}

	.grid-progress-vertical-inactive {
		width: 28rpx;
	}

	.sprite-yellow-arrow {
		display: inline-block;
		overflow: hidden;
		background-repeat: no-repeat;
		width: 194px;
		height: 232px;
		background-image: url('@/static/modal/action-jump/yellow-arrow.png');

		// border: 1rpx solid #00CE47;
	}

	.animation-play-state-play {
		animation: yellowArrowRun 1s steps(1, end); // infinite
		animation-play-state: running;
	}

	.animation-play-state-paused {
		animation-play-state: paused;
	}

	/**
	 * 箭头动画
	 */
	@keyframes yellowArrowRun {
		0% {
			background-position: -0px -0px;
		}

		5% {
			background-position: -0px -0px;
		}

		10% {
			background-position: -194px -0px;
		}

		15% {
			background-position: -388px -0px;
		}

		20% {
			background-position: -582px -0px;
		}

		25% {
			background-position: -776px -0px;
		}

		30% {
			background-position: -0px -232px;
		}

		35% {
			background-position: -194px -232px;
		}

		40% {
			background-position: -388px -232px;
		}

		45% {
			background-position: -582px -232px;
		}

		50% {
			background-position: -776px -232px;
		}

		55% {
			background-position: -0px -464px;
		}

		60% {
			background-position: -194px -464px;
		}

		65% {
			background-position: -388px -464px;
		}

		70% {
			background-position: -582px -464px;
		}

		75% {
			background-position: -776px -464px;
		}

		80% {
			background-position: -0px -696px;
		}

		85% {
			background-position: -194px -696px;
		}

		90% {
			background-position: -388px -696px;
		}

		95% {
			background-position: -582px -696px;
		}

		100% {
			background-position: -776px -696px;
		}
	}

	.sprite-rightToLeftArrow {
		display: inline-block;
		overflow: hidden;
		background-repeat: no-repeat;
		width: 317px;
		height: 42px;
		background-image: url('@/static/modal/action-jump/rightToLeftArrow.png');

		// border: 1rpx solid #00CE47;
	}

	.sprite-rightToLeftArrow-play {
		animation: rightToLeftArrowRun 1s steps(1, end) infinite;
	}

	@keyframes rightToLeftArrowRun {
		0% {
			background-position: -0px -0px;
		}

		3.33% {
			background-position: -0px -0px;
		}

		6.66% {
			background-position: -317px -0px;
		}

		9.99% {
			background-position: -0px -42px;
		}

		13.33% {
			background-position: -317px -42px;
		}

		16.66% {
			background-position: -0px -84px;
		}

		19.99% {
			background-position: -317px -84px;
		}

		23.33% {
			background-position: -0px -126px;
		}

		26.66% {
			background-position: -317px -126px;
		}

		29.99% {
			background-position: -0px -168px;
		}

		33.33% {
			background-position: -317px -168px;
		}

		36.66% {
			background-position: -0px -210px;
		}

		39.99% {
			background-position: -317px -210px;
		}

		43.33% {
			background-position: -0px -252px;
		}

		46.66% {
			background-position: -317px -252px;
		}

		49.99% {
			background-position: -0px -294px;
		}

		53.33% {
			background-position: -317px -294px;
		}

		56.66% {
			background-position: -0px -336px;
		}

		59.99% {
			background-position: -317px -336px;
		}

		63.33% {
			background-position: -0px -378px;
		}

		66.66% {
			background-position: -317px -378px;
		}

		69.99% {
			background-position: -0px -420px;
		}

		73.33% {
			background-position: -317px -420px;
		}

		76.66% {
			background-position: -0px -462px;
		}

		79.99% {
			background-position: -317px -462px;
		}

		83.33% {
			background-position: -0px -504px;
		}

		86.66% {
			background-position: -317px -504px;
		}

		89.99% {
			background-position: -0px -546px;
		}

		93.33% {
			background-position: -317px -546px;
		}

		96.66% {
			background-position: -0px -588px;
		}

		100% {
			background-position: -317px -588px;
		}
	}
</style>