ProAdvanced/components/modal/boxing-post/boxing-post.vue

<template>
	<view style="width: 90%; margin-bottom: 50rpx;">

		<!-- 计时器 -->
		<view class="boxingTimer flex justify-center">
			<boxingCountDown ref="boxingCountDownRef" :show-day="false" :second="showSportTime" color="#9695f7" background-color="#FFFFFF"
			 border-color="#007AFF" splitorColor="#FFFFFF" />
		</view>
		<!-- 拳头特效 -->
		<!-- <efBone v-if="bGuideEF||(doubleHitCount>0&&doubleHitCount%doubleHitLimit == 0)" ref="refEfBone" @randomIndex="_efRandomIndex"></efBone> -->
		<!-- v-else 拳击部分 -->
		<view class="flex justify-around " style="margin-bottom: 16rpx; height: 300rpx;">
			<view class="flex flex-direction justify-between">
				<image :src="bLAnimation?'/static/modal/boxing-post/left-hook-h@2x.png':'/static/modal/boxing-post/left-hook-m@2x.png'"
				 class="boxing-png " :class="bLAnimation?' boxing-change ':''" mode="aspectFit"></image>
				<view class="text-white text-13px" style="margin: 35rpx 0;">左勾拳</view>
			</view>
			<view class="flex flex-direction justify-between">
				<image :src="bMAnimation?'/static/modal/boxing-post/straight-h@2x.png':'/static/modal/boxing-post/straight-m@2x.png'"
				 class="boxing-png " :class="bMAnimation?' boxing-change ':''" mode="aspectFit"></image>
				<view class="text-white text-13px" style="margin: 35rpx 0;">直拳</view>
			</view>
			<view class="flex flex-direction justify-between">
				<image :src="bRAnimation?'/static/modal/boxing-post/right-hook-h@2x.png':'/static/modal/boxing-post/right-hook-m@2x.png'"
				 class="boxing-png " :class="bRAnimation?' boxing-change ':''" mode="aspectFit"></image>
				<view class="text-white text-13px" style="margin: 35rpx 0;">右勾拳</view>
			</view>
		</view>


		<!-- 显示数据 -->
		<view class="flex justify-around " style="margin-bottom: 16rpx;">
			<view class="flex flex-direction justify-between">
				<view class="boxing-count-bg">
					{{hitCount}}
				</view>
				<view class="text-white text-13px" style="margin: 10rpx 0;">击中</view>
			</view>
			<view class="flex flex-direction justify-between">
				<view class="boxing-count-bg">
					{{doubleHitCount}}
				</view>
				<view class="text-white text-13px" style="margin: 10rpx 0;">连</view>
			</view>
			<view class="flex flex-direction justify-between">
				<view class="boxing-count-bg">
					{{missCount}}
				</view>
				<view class="text-white text-13px" style="margin: 10rpx 0;">失误</view>
			</view>
		</view>
		<!-- 对话框 -->
		<view class="flex justify-center " style="margin-bottom: 32rpx;">
			<view class="boxing-post-talkbubble">
				你离{{evaluateName}}还差{{evaluatePower}}公斤
			</view>
		</view>

		<!-- 步骤条 -->
		<!-- <customStep ref="customStepRef" @onCustomSetBasics="_customSetBasics"></customStep> -->
		<!-- 控制按钮 -->
		<controlButtons ref="customControlButtons" :showLeftRight='false' @onControlPlayTap="_customControlPlay"></controlButtons>

		<view class="vertical-container">
			<view class="vertical-bar">
				<view class="vertical-child" v-for="(item, index) in 20" :key="index">
					<view :class="powerCount>=index+1? 'vertical-active':'vertical-inactive'"></view>
					<view :class="index%5 == 0?'':'text-hidden'" class="vertical-text">{{index+1}}</view>
				</view>
			</view>
			<view class="vertical-bar">
				<view class="vertical-child" v-for="(item, index) in 20" :key="index">
					<view :class="index%5 == 0?'':'text-hidden'" class="vertical-text">{{index+21}}</view>
					<view :class="powerCount>=index+21? 'vertical-active':'vertical-inactive'"></view>
				</view>
			</view>
		</view>
		<button @tap="onTestHit('left')">左</button>
		<!-- <button @tap="onTestHit('mid')">中({{accHitCountAdd}})</button>
		<button @tap="onTestHit('right')">右</button> -->

	</view>
</template>

<script>
	import customStep from "@/components/my-custom-step/my-custom-step.vue"
	import controlButtons from "@/components/my-control-buttons/my-control-buttons.vue"
	import efBone from "./ef-bone.vue"

	import boxingCountDown from '@/components/uni-count-down/uni-count-down.vue'

	import puchConfig from "@/util/util-js/puchConfig.js"

	import EquipmentAction from "@/util/util-js/EquipmentAction.js"


	export default {
		components: {
			customStep,
			controlButtons,
			efBone,
			boxingCountDown
		},
		props: {
			bUpdate: {
				type: Boolean,
				default: false
			},
			// 默认男性
			bMan: {
				type: Boolean,
				default: true
			},
			showTime: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				hitCount: 0,
				addCount: 0,
				missCount: 0,
				doubleHitCount: 0,
				powerCount: 0,
				//当前打击的最大值
				powerMaxCount: 0,
				//连击数的限制值
				doubleHitLimit: 10,

				bRAnimation: false,
				bLAnimation: false,
				bMAnimation: false,

				xA: 0,
				yA: 0,
				zA: 0,
				xO: 0,
				yO: 0,
				zO: 0,

				calZVector: 0,
				calXVector: 0,

				bCanXL: false,
				bCanXR: false,
				bCanZ: false,

				ZCount: 0,
				LCount: 0,
				RCount: 0,

				//临时值
				addZCount: 0,
				addLCount: 0,
				addRCount: 0,

				mass: 5,

				//大概消耗的卡路里
				calorie: 0,

				leftHookUrl: "/static/modal/boxing-post/left-hook.mp3",
				rightHookUrl: "/static/modal/boxing-post/right-hook.mp3",
				straightHookUrl: "/static/modal/boxing-post/straight-hook.mp3",
				hookAudioContext: null,
				//新手语音提示
				leftTipUrl: "/static/modal/boxing-post/tipLeft.mp3",
				rightTipUrl: "/static/modal/boxing-post/tipRight.mp3",
				straightTipUrl: "/static/modal/boxing-post/tipStraight.mp3",
				greatTipUrl: "/static/modal/boxing-post/tipGreat.mp3",
				giveGoTipUrl: "/static/modal/boxing-post/tipGiveItAGo.mp3",
				startTraining: "/static/modal/boxing-post/tipStartTraining.mp3",
				//击打状态音效
				hitUrl: "/static/elect/hit.mp3",
				missUrl: "/static/elect/miss.mp3",


				oldxA: 0,
				oldzA: 0,
				bUpdateOnce: false,
				bDelayOnce: false,

				autoBoxingTip: null,
				//播放时间
				autoDuration: 800,
				//是否在播放
				bPlay: false,
				//新手
				bGuide: false,
				//是否是特殊拳击
				bGuideEF: false,

				//动画
				powerInterval: null,
				//特殊一击
				powerEFTimeObj: null,

				evaluateName: "平民战五渣",
				evaluatePower: 5,

				//男拳击显示的名字
				manNameList: [
					'平民战五渣',
					'鹰眼侠',
					'蝙蝠侠',
					'金刚狼',
					'美国队长',
					'蜘蛛侠',
					'钢铁侠',
					'闪电侠',
					'毒液',
					'绿巨人',
					'超人',
					'雷神',
					'众神之王奥丁',
					'灭霸',
					'天启'
				],
				//女拳击显示的名字
				womanNameList: [
					'平民战五渣',
					'豹女',
					'毒藤女',
					'猫女',
					'小丑女',
					'黑寡妇',
					'蜘蛛女',
					'暴风女',
					'美杜莎',
					'女浩克',
					'女武神',
					'雅典娜',
					'绯红女巫',
					'惊奇队长',
					'爱神维纳斯'
				],

				//全力一击随机对象
				efRandomObj: null,
				bHitEFRandomObj: false,

				//运动时间
				showSportTime: this.showTime,
				sportTimeInterval: null,

				//下一个进行播放的对象
				endSetTimeout: null,

				//X轴的变化数组值
				xAccArray: [],
				xMax: 0,
				maxTimeoutId: null,
				bMaxPause: false,
				xMin: 0,
				minTimeoutId: null,
				bMinPause: false,
				bCalculation: false,
				calTimeout: null,

				//动态变化的角度比 z/x
				angleRatio: 1,

				//当前basic
				basic: 0,

				//拳击数据判断对象
				EquipmentActionObj: null,

				accHitCountAdd: 0
			}
		},
		watch: {
			bUpdate(val) {

			},
			showTime(val) {
				this.showSportTime = val;
			}
		},
		created() {
			let _self = this;

			_self.hookAudioContext = uni.createInnerAudioContext();
			_self.hookAudioContext.autoplay = false;
			_self.hookAudioContext.src = _self.straightHookUrl;
			_self.hookAudioContext.volume = 1;

			console.log(" ***** boxing-post created ******");
			_self.onBindAcc();
			// this.onBindOri();

			_self.EquipmentActionObj = new EquipmentAction();
			// console.warn("_self.EquipmentActionObj:", _self.EquipmentActionObj);
			_self.EquipmentActionObj.addEventListener("resultantHit", (e) => {
				// console.warn("_self.EquipmentActionObj11.addEventListener:", e);
				// this.accHitCountAdd = e.acc;
				if (((this.doubleHitCount > 0 && this.doubleHitCount % this.doubleHitLimit == 0) ||
						this.bGuide) && this.efRandomObj) {
					this.onHit(this.efRandomObj.direction, e.acc, e.power);
				} else {
					if (this.bLAnimation)
						this.onHit("xRCount", e.acc, e.power);
					else if (this.bRAnimation)
						this.onHit("xLCount", e.acc, e.power);
					else if (this.bMAnimation)
						this.onHit("zLCount", e.acc, e.power);
				}


			})

		},
		beforeDestroy() {
			console.log(" ***** boxing-post destroyed ******");
			this.onUnbindAcc();
			// this.onUnbindOri();

			let _self = this;
			if (_self.powerInterval) {
				clearInterval(_self.powerInterval);
				_self.powerInterval = null;
			}

			//停掉当前的随机播放
			if (_self.autoBoxingTip) {
				clearInterval(_self.autoBoxingTip);
				_self.autoBoxingTip = null;
			}

			if (_self.hookAudioContext)
				_self.hookAudioContext.destroy();

			if (_self.sportTimeInterval) {
				clearInterval(_self.sportTimeInterval);
				_self.sportTimeInterval = null;
			}

			if (_self.endSetTimeout) {
				clearTimeout(_self.endSetTimeout);
				_self.endSetTimeout = null;
			}
		},
		methods: {
			moveBoxingHandle() {
				return;
			},
			//测试打击
			onTestHit(data) {
				let _self = this;
				let maxPower = Math.floor(Math.random() * 300);
				console.log("maxPower:", maxPower);
				// if (data == "left")
				// 	this.onHit("xRCount", 0, maxPower);
				// else if (data == "right")
				// 	this.onHit("xLCount", 0, maxPower);
				// else if (data == "mid")
				// 	this.onHit("zLCount", 0, maxPower);
				if (this.bLAnimation)
					this.onHit("xRCount", 0, maxPower);
				else if (this.bRAnimation)
					this.onHit("xLCount", 0, maxPower);
				else if (this.bMAnimation)
					this.onHit("zLCount", 0, maxPower);
			},
			//平时击打的力量槽动画播放
			onPlayPowerAnimation(bGreat) {
				if (bGreat) {
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.greatTipUrl;
					this.hookAudioContext.play();
				} else {
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.hitUrl;
					this.hookAudioContext.play();
				}


				let _self = this;


				// if (_self.powerInterval) {
				// 	clearInterval(_self.powerInterval);
				// 	_self.powerInterval = null;
				// }

				// let bAdd = true;
				// _self.powerCount = 0;
				// let _duraciotn = 300 / _self.powerMaxCount;

				// _self.powerInterval = setInterval(function() {

				// 	// if (_self.powerCount >= _self.powerMaxCount) {
				// 	// 	bAdd = false;
				// 	// } else if (_self.powerCount == 0 && !bAdd) {
				// 	// 	clearInterval(_self.powerInterval);
				// 	// 	_self.powerInterval = null;
				// 	// 	return;
				// 	// }

				// 	// if (bAdd)
				// 	// 	_self.powerCount++;
				// 	// else
				// 	// 	_self.powerCount--;
				// 	//递增
				// 	if (_self.powerCount >= _self.powerMaxCount) {
				// 		clearInterval(_self.powerInterval);
				// 		_self.powerInterval = null;
				// 		return;
				// 	}
				// 	_self.powerCount++;

				// }, _duraciotn); //300ms/40格
			},
			//特殊一击时候力量槽
			onPlayEFHitAnimation() {
				let _self = this;

				if (_self.powerEFTimeObj) {
					clearTimeout(_self.powerEFTimeObj);
					_self.powerEFTimeObj = null;
				}

				let _duraciotn = 300 / (_self.powerMaxCount - _self.powerCount);

				if (_self.powerCount > _self.powerMaxCount - 2) {
					_duraciotn = 1000;
				} else if (_self.powerCount > _self.powerMaxCount / 2) {
					_duraciotn *= 5;
				}

				_self.powerEFTimeObj = setTimeout(() => {

					if (_self.powerCount == _self.powerMaxCount) {
						clearTimeout(_self.powerEFTimeObj);
						_self.powerEFTimeObj = null;
						_self.powerCount = 0;
						return;
					}

					_self.powerCount++;

					_self.onPlayEFHitAnimation();

				}, _duraciotn); //300ms/40格
			},
			onBindAcc(globalAcc) {
				uni.$on('watchAcceleration', this.updateAcc);
			},
			onUnbindAcc() {
				uni.$off('watchAcceleration', this.updateAcc);
			},
			onBindOri(globalOri) {
				uni.$on('watchOrientation', this.updateOri);
			},
			onUnbindOri() {
				uni.$off('watchOrientation', this.updateOri);
			},
			onResetCal() {
				this.xAccArray = [];
				this.xMax = 0;
				this.xMin = 0;
				this.bCalculation = false;
				this.oldxA = 0;
				this.oldzA = 0;
				this.calTimeout = null;
			},
			updateAcc(acc) {
				this.xA = acc.xAxis;
				this.yA = acc.yAxis;
				this.zA = acc.zAxis;

				//在acc 中更新数据
				// this.updateData();

				if (!this.bUpdate || !this.bPlay) return;

				this.EquipmentActionObj.updateAcc({
					xA: acc.xAxis,
					zA: acc.yAxis,
					yA: acc.zAxis
				})

				// if (Math.abs(this.xA) > 8 && this.oldxA != this.xA && !this.bCalculation) {
				// 	this.xAccArray.push(this.xA);
				// 	this.oldxA = this.xA;

				// 	if (this.calTimeout == null) {
				// 		this.calTimeout = setTimeout(() => {
				// 			this.bCalculation = true;
				// 			for (let i = 0; i < this.xAccArray.length; i++) {
				// 				if (this.xAccArray[i] < 0 && this.xAccArray[i] < this.xAccArray[this.xMin]) {
				// 					this.xMin = i;
				// 				} else if (this.xAccArray[i] > 0 && this.xAccArray[i] > this.xAccArray[this.xMax]) {
				// 					this.xMax = i;
				// 				}
				// 			}
				// 			console.log(this.xAccArray, "==", this.xMin, "==", this.xMax);
				// 			if (this.xAccArray[this.xMin] < 0 && this.xAccArray[this.xMax] > 0) {
				// 				if (this.xMin > this.xMax)
				// 					this.onHit("xRCount", this.xAccArray[this.xMin], Math.ceil(Math.abs(this.xAccArray[this.xMin]) * puchConfig.BOXING_MASS));
				// 				else if (this.xMin < this.xMax)
				// 					this.onHit("xLCount", this.xAccArray[this.xMax], Math.ceil(Math.abs(this.xAccArray[this.xMax]) * puchConfig.BOXING_MASS));
				// 			} else if (this.xAccArray[this.xMin] < 0) {
				// 				this.onHit("xLCount", this.xAccArray[this.xMin], Math.ceil(Math.abs(this.xAccArray[this.xMin]) * puchConfig.BOXING_MASS));
				// 			} else if (this.xAccArray[this.xMax] > 0) {
				// 				this.onHit("xRCount", this.xAccArray[this.xMax], Math.ceil(Math.abs(this.xAccArray[this.xMax]) * puchConfig.BOXING_MASS));
				// 			}
				// 			setTimeout(() => {
				// 				this.onResetCal();
				// 			}, 100);
				// 			this.calTimeout = null;
				// 		}, 200);
				// 	}
				// } else if (this.zA < -10 && this.oldzA != this.zA && this.xAccArray.length == 0) {
				// 	console.log("this.zA:", this.zA);
				// 	this.oldzA = this.zA;
				// 	setTimeout(() => {
				// 		this.onResetCal();
				// 	}, 200);
				// 	this.onHit("zLCount", this.zA, Math.ceil(Math.abs(this.zA) * puchConfig.BOXING_MASS));
				// }
			},
			updateOri(ori) {
				this.xO = ori.beta;
				this.zO = ori.alpha;
				this.yO = ori.gamma;
			},
			//步骤条调整速度
			_customSetBasics(data) {
				console.log(data);
				let _self = this;
				if (_self.autoBoxingTip) {
					clearInterval(_self.autoBoxingTip);
					_self.autoBoxingTip = null;
				}

				if (0 === data.basics)
					_self.autoDuration = 800;
				else
					_self.autoDuration = 3000 - data.basics * 260;
				console.log("_self.autoDuration:", _self.autoDuration);

				_self.basic = data.basics;

				if (!_self.bPlay || _self.bGuide) return;

				if (0 != _self.basic) {
					//自动调用拳击图标
					_self.autoBoxingTip = setInterval(function() {
						_self.onAutoPlayBoxingTip();
					}, _self.autoDuration);
				}

			},
			_customControlButton(data) {
				//修改步骤条,绑定回调 _customSetBasics 
				this.$refs.customStepRef.onChangeBasicsFromDirection(data);
			},
			_customControlPlay(data) {
				let _self = this;
				//1.检查是否符合要求，再进行训练
				if (data.bControlRun) {
					//如果运行中直接停掉
					if (_self.autoBoxingTip) {
						clearInterval(_self.autoBoxingTip);
						_self.autoBoxingTip = null;
					}

					if (_self.sportTimeInterval) {
						clearInterval(_self.sportTimeInterval);
						_self.sportTimeInterval = null;
					}

					this.bPlay = false;
					this.$refs.customControlButtons.onPlay();

					//如果是新手教程，也直接停掉
					this.bGuide = false;
					this.bGuideEF = false;

					this.bRAnimation = false;
					this.bLAnimation = false;
					this.bMAnimation = false;

					this.$emit("boxingPostControlPlay", false);
				} else {
					this.$emit("boxingPostCheck");
				}

			},
			//新手引导
			onGuideBoxingPostPlay() {
				console.log("onGuideBoxingPostPlay");
				let _self = this;
				_self.bPlay = true;
				//
				_self.bGuide = true;
				// 按钮事件
				_self.$refs.customControlButtons.onPlay();

				// 右勾拳
				_self.onPlayBoxingTipIndex(0, () => {

				});


			},
			//训练退出时候，重新信息
			onBoxingPostStop() {
				this.addLCount = 0;
				this.addRCount = 0;
				this.addZCount = 0;
				// this.calorie = 0;
				this.powerCount = 0;
			},

			//调用播放
			onBoxingPostPlay(bPlaying) {

				let _self = this;

				if (bPlaying) {
					_self.bPlay = true;
					// 按钮事件
					_self.$refs.customControlButtons.onPlay(true);

					if (_self.sportTimeInterval) {
						clearInterval(_self.sportTimeInterval);
						_self.sportTimeInterval = null;
					}

					//play true 时候，开启时间计算
					_self.sportTimeInterval = setInterval(() => {
						_self.showSportTime++;

						if (_self.showSportTime >= 20 && _self.showSportTime % 20 == 0) {
							_self.$emit("updateSportTime", _self.showSportTime);
						}
					}, 1000)
				}

				if (_self.autoBoxingTip) {
					clearInterval(_self.autoBoxingTip);
					_self.autoBoxingTip = null;
				}

				//如果是0，打一拳调用一次
				if (0 == _self.basic) {
					_self.onAutoPlayBoxingTip();
				} else {
					_self.onAutoPlayBoxingTip();
					_self.autoBoxingTip = setInterval(function() {
						_self.onAutoPlayBoxingTip();
					}, _self.autoDuration);
				}


			},
			//新手定时播放
			onPlayBoxingTipIndex(_index, callback) {
				if (_index === 0) {
					//右勾拳
					this.bRAnimation = true;
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.rightTipUrl;
					this.hookAudioContext.play();
					if (callback)
						callback();

					//
					this.angleRatio = 10;

				} else if (_index === 1) {
					//左勾拳
					this.bLAnimation = true;
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.leftTipUrl;
					this.hookAudioContext.play();
					if (callback)
						callback();

					this.angleRatio = 10;

				} else if (_index === 2) {
					//直拳
					this.bMAnimation = true;
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.straightTipUrl;
					this.hookAudioContext.play();
					if (callback)
						callback();

					this.angleRatio = 0.5;

				} else if (_index === 3) {
					this.bGuideEF = true;
					this.hookAudioContext.stop();
					this.hookAudioContext.src = this.giveGoTipUrl;
					this.hookAudioContext.play();
					if (callback)
						callback();

				}
				console.log("this.hookAudioContext:", this.hookAudioContext);

			},

			//随机播放
			onAutoPlayBoxingTip() {
				// console.log("onAutoPlayBoxingTip .powerCount:",this.powerCount);
				//重置动画
				this.bRAnimation = false;
				this.bLAnimation = false;
				this.bMAnimation = false;

				let _index = Math.floor(Math.random() * 3);
				// console.log("_index==",_index);
				// return;
				if (_index === 0) {

					//右勾拳
					if (!this.bRAnimation) {
						this.bRAnimation = true;
						this.hookAudioContext.stop();
						this.hookAudioContext.src = this.rightHookUrl;
						this.hookAudioContext.play();
					}

					this.angleRatio = 10;

				} else if (_index === 1) {

					//左勾拳
					if (!this.bLAnimation) {
						this.bLAnimation = true;
						this.hookAudioContext.stop();
						this.hookAudioContext.src = this.leftHookUrl;
						this.hookAudioContext.play();
					}

					this.angleRatio = 10;
				} else if (_index === 2) {

					//直拳
					if (!this.bMAnimation) {
						this.bMAnimation = true;
						this.hookAudioContext.stop();
						this.hookAudioContext.src = this.straightHookUrl;
						this.hookAudioContext.play();
					}

					this.angleRatio = 0.5;
				}
			},

			onHit(direction, direValue, power) {

				// console.log(direction, direValue, power);
				let temp = {
					direction: direction,
					value: direValue,
					mass: this.mass, //质量
					hitPower: power //计算的力
				}

				//设置200 为最大值，最大值时候分为40份。即单位是 7.5
				let _maxPower = 200;
				if (power >= _maxPower) {
					this.powerMaxCount = 40;
				} else {
					this.powerMaxCount = Math.ceil(power / 5);
				}

				//如果是男性用户
				let _nameList = this.manNameList;
				if (!this.bMan) {
					_nameList = this.womanNameList;
				}
				//名字相对于最大力量 的 间隔单位
				let _nameUnit = _maxPower / _nameList.length;
				let _nameIndex = Math.ceil(power / _nameUnit);

				if (_nameIndex < _nameList.length - 1) {
					//console.log("名称下标：", _nameList[_nameIndex], "下一个目标：", _nameList[_nameIndex + 1]);
					this.evaluateName = _nameList[_nameIndex + 1];
					//下一个目标的公斤值
					let _nextPower = Math.ceil((_nameIndex + 1) * _nameUnit);
					//console.log("_nextPower:", _nextPower, power);
					this.evaluatePower = _nextPower - power;
				} else {
					this.evaluateName = _nameList[_nameList.length - 1];
					this.evaluatePower = 0;
				}

				//如果是新手流程
				if (this.bGuide) {

					// if (this.bGuideEF) {

					// 	if (!this.efRandomObj) return;

					// 	let bHitEF = false;
					// 	if (this.efRandomObj.direction == direction) {
					// 		// this.RCount++;
					// 		bHitEF = true;
					// 	} else if (this.efRandomObj.direction == direction) {
					// 		// this.LCount++;
					// 		bHitEF = true;
					// 	} else if (this.efRandomObj.direction == direction) {
					// 		// this.ZCount++;
					// 		bHitEF = true;
					// 	}
					// 	//播放全力一击特效,特效完成后回调
					// 	if (bHitEF) {
					// 		this.bHitEFRandomObj = true;
					// 		//播放进度动画
					// 		this.onPlayEFHitAnimation();

					// 		//爆炸同时抖动
					// 		this.$emit("shake");

					// 		this.$refs.refEfBone.onEFHit(() => {
					// 			// this.doubleHitCount++;
					// 			this.bGuideEF = false;
					// 			this.bGuide = false;

					// 			this.hookAudioContext.stop();
					// 			this.hookAudioContext.src = this.greatTipUrl;
					// 			this.hookAudioContext.play();
					// 			setTimeout(() => {
					// 				this.hookAudioContext.stop();
					// 				this.hookAudioContext.src = this.startTraining;
					// 				this.hookAudioContext.play();
					// 				setTimeout(() => {
					// 					this.$emit("boxingGuideFinish");
					// 				}, 3000);
					// 			}, 1000)

					// 			this.bHitEFRandomObj = false;


					// 		});
					// 	}
					// } else {
					//根据是否播放的拳击，来判断是否击中
					if (direction == "xLCount" && this.bRAnimation) {
						//右勾拳
						// this.RCount++;
						// this.doubleHitCount++;
						this.bRAnimation = false;
						//播放进度动画
						this.onPlayPowerAnimation(true);

						setTimeout(() => {
							//播放下一个拳击
							this.onPlayBoxingTipIndex(1);

						}, 1500)

					} else if (direction == "xRCount" && this.bLAnimation) {
						//左勾拳
						// this.LCount++;
						// this.doubleHitCount++;
						this.bLAnimation = false;
						//播放进度动画
						this.onPlayPowerAnimation(true);
						//播放下一个拳击
						setTimeout(() => {
							//播放下一个拳击
							this.onPlayBoxingTipIndex(2);

						}, 1500)

					} else if (direction == "zLCount" && this.bMAnimation) {
						//直拳
						// this.ZCount++;
						// this.doubleHitCount++;
						this.bMAnimation = false;
						//播放进度动画
						this.onPlayPowerAnimation(true);
						//全力一击
						setTimeout(() => {
							//播放下一个拳击
							// this.onPlayBoxingTipIndex(3);
							this.bGuide = false;
							this.$emit("boxingGuideFinish");
						}, 1500)
					}
					// }



				} else {
					// //如果单次是特殊一击
					// if (this.doubleHitCount > 0 && this.doubleHitCount % this.doubleHitLimit == 0) {

					// 	if (this.bHitEFRandomObj) return;
					// 	if (!this.efRandomObj) return;

					// 	let bHitEF = false;
					// 	if (this.efRandomObj.direction == direction) {
					// 		this.RCount++;
					// 		bHitEF = true;
					// 	} else if (this.efRandomObj.direction == direction) {
					// 		this.LCount++;
					// 		bHitEF = true;
					// 	} else if (this.efRandomObj.direction == direction) {
					// 		this.ZCount++;
					// 		bHitEF = true;
					// 	}
					// 	//播放全力一击特效,特效完成后回调
					// 	if (bHitEF) {
					// 		this.bHitEFRandomObj = true;
					// 		//播放进度动画
					// 		this.onPlayEFHitAnimation();

					// 		//爆炸同时抖动
					// 		this.$emit("shake");

					// 		this.$refs.refEfBone.onEFHit(() => {
					// 			this.doubleHitCount++;
					// 			setTimeout(() => {
					// 				//新手教程，恢复随机播放
					// 				this.onBoxingPostPlay();
					// 			}, 1000);

					// 			this.bHitEFRandomObj = false;


					// 		});
					// 	}

					// } else 
					// {
					//如果没有显示动画，不能打击
					if (!this.bRAnimation && !this.bLAnimation && !this.bMAnimation)
						return;

					//如果力量槽达到最大值，同步卡路里，并且清空记录值
					if (this.powerCount >= 40) {
						console.log("同步卡路里");
						this.$emit('updateCalorie', this.calorie);

						this.addLCount = 0;
						this.addRCount = 0;
						this.addZCount = 0;

					}

					//根据是否播放的拳击，来判断是否击中
					if (direction == "xLCount" && this.bRAnimation) {
						//右勾拳
						this.RCount++;
						this.addRCount++;
						this.doubleHitCount++;
						this.bRAnimation = false;
						//播放进度动画
						this.onPlayPowerAnimation();
					} else if (direction == "xRCount" && this.bLAnimation) {
						//左勾拳
						this.LCount++;
						this.addLCount++;
						this.doubleHitCount++;
						this.bLAnimation = false;
						//播放进度动画
						this.onPlayPowerAnimation();
						// console.log("xRCount");
					} else if (direction == "zLCount" && this.bMAnimation) {
						//直拳
						this.ZCount++;
						this.addZCount++;
						this.doubleHitCount++;
						this.bMAnimation = false;
						//播放进度动画
						this.onPlayPowerAnimation();
						// console.log("zLCount");
					}
					// else if (this.bRAnimation || this.bLAnimation || this.bMAnimation) {
					// 	//如果没有击打的,设置miss
					// 	this.missCount++;
					// 	this.doubleHitCount = 0;

					// 	this.hookAudioContext.stop();
					// 	this.hookAudioContext.src = this.missUrl;
					// 	this.hookAudioContext.play();
					// 	console.log("miss");
					// 	this.bRAnimation = false;
					// 	this.bLAnimation = false;
					// 	this.bMAnimation = false;
					// }
					//停掉当前的随机播放
					if (this.autoBoxingTip) {
						clearInterval(this.autoBoxingTip);
						this.autoBoxingTip = null;
					}
					// console.log(11111);
					//判断当前连击数
					// if (this.doubleHitCount > 0 && this.doubleHitCount % this.doubleHitLimit == 0) {

					// 	this.hookAudioContext.stop();
					// 	this.hookAudioContext.src = this.giveGoTipUrl;
					// 	this.hookAudioContext.play();
					// } else {
					this.endSetTimeout = setTimeout(() => {

						// console.log("start");
						//更新随机播放
						this.onBoxingPostPlay();
					}, 400);

					// }

					// }

					//每10次更新一次卡路里
					// if (this.hitCount !==0 && 0 == this.hitCount % 10) {
					// 	//打一拳，大约消耗的热量，是450*4/60=1.875 焦耳。 
					// 	//因为打拳一小时，需要消耗的热量是450大卡，而一分钟约打一下，一大卡是4焦耳。
					// 	//现在大概是2s 打一下，1.875/30
					// 	// this.calorie = Math.floor((10 * 1.875) / (4*30));
					// 	this.calorie = puchConfig.getBoxingCalorie(10);
					// 	console.log("更新卡路里======：", this.calorie);
					// 	this.$emit('updateCalorie', this.calorie);
					// }

					this.hitCount = this.ZCount + this.LCount + this.RCount;
					this.addCount = this.addZCount + this.addLCount + this.addRCount;
					this.calorie = puchConfig.getBoxingCalorie(this.addCount);
					//10 大卡，为一个周期 分40份
					console.log("this.calorie:", this.calorie, this.calorie * 4);
					this.powerCount = parseInt(this.calorie * 4);
				}


			},

			updateData() {
				if (!this.bUpdate || !this.bPlay) return;

				//1.求出z 和 x 的加速度矢量
				//z轴的重力加速度矢量分量
				// this.calZVector = (Math.cos(this.xO / 180 * Math.PI) * 9.8);
				//x轴的重力加速度的矢量分量
				// if (this.yA > 9.8)
				// 	this.yA = 9.8;
				// let tempXVector = Math.pow(9.8, 2) - (Math.pow(this.calZVector, 2) + Math.pow(this.yA, 2));
				// this.calXVector = Math.sqrt(Math.abs(tempXVector));
				//2.当前的加速度矢量减去分量，就是打击的加速度
				// let tempZ = Math.abs(this.zA) - Math.abs(this.calZVector);
				// let tempX = Math.abs(this.xA) - Math.abs(this.calXVector);
				let tempZ = Math.abs(this.zA);
				let tempX = Math.abs(this.xA);
				//3.判断 那个轴的打击方向，就走哪个轴的计算流程
				//直拳判断 
				let zAcc = Math.abs(this.zA) - Math.abs(this.oldzA);
				let leftAcc = Math.abs(this.xA) - Math.abs(this.oldxA);
				let rightAcc = this.xA - this.oldxA;

				let tempLimit = puchConfig.SENDITIVITY; //灵敏度
				//判断方位，用比值 直拳方向 和 左右方向 比。
				//如果比值相同 等于约定的数值，以1为标准，则是正勾拳
				if (Math.abs(leftAcc) != 0) {
					let tempDirection = Math.abs(zAcc) / Math.abs(leftAcc);
					if (tempDirection > this.angleRatio) {
						if (zAcc > tempLimit && this.zA < -tempLimit) {
							if (this.bUpdateOnce)
								return;
							console.log("走直拳");
							this.bUpdateOnce = true;
							let _endPower = Math.abs(tempZ) * this.mass;
							this.onHit("zLCount", tempZ, Math.ceil(_endPower));
							// console.log("zLCount:", this.zA, leftAcc, rightAcc, zAcc);
							// console.log("xA:", this.xA, " zA:", this.zA, " leftAcc:", leftAcc, " rightAcc:", rightAcc, " zAcc:", zAcc);

						}
					} else {
						if ((leftAcc > tempLimit || zAcc > tempLimit) && this.xA > tempLimit) {
							if (this.bUpdateOnce)
								return;
							console.log("走左勾拳");
							this.bUpdateOnce = true;
							let _endPower = (Math.abs(tempX) + Math.abs(tempZ)) * this.mass;
							this.onHit("xRCount", tempX, Math.ceil(_endPower));
							// console.log("xRCount:", this.xA, leftAcc, rightAcc);
							// console.log("xA:", this.xA, " zA:", this.zA, " leftAcc:", leftAcc, " rightAcc:", rightAcc, " zAcc:", zAcc);

						}
						if ((rightAcc < -tempLimit || zAcc > tempLimit) && this.xA < -tempLimit) {
							if (this.bUpdateOnce)
								return;
							console.log("走右勾拳");
							this.bUpdateOnce = true;
							let _endPower = (Math.abs(tempX) + Math.abs(tempZ)) * this.mass;
							this.onHit("xLCount", tempX, Math.ceil(_endPower));
							// console.log("xLCount:", this.xA, leftAcc, rightAcc);
							// console.log("xA:", this.xA, " zA:", this.zA, " leftAcc:", leftAcc, " rightAcc:", rightAcc, " zAcc:", zAcc);

						}

					}
				}

				this.oldxA = this.xA;
				this.oldzA = this.zA;

				if (!this.bDelayOnce && this.bUpdateOnce) {
					this.bDelayOnce = true;
					setTimeout(() => {
						this.bUpdateOnce = false;
						this.bDelayOnce = false;
					}, 500);
				}
			},
			_efRandomIndex(res) {
				console.log("_efRandomIndex:", res);
				this.efRandomObj = res;

				if (res.direction == "xRCount") {
					//左勾拳音效
					this.angleRatio = 10;
				} else if (res.direction == "xLCount") {
					this.angleRatio = 10;
				} else if (res.direction == "zLCount") {
					this.angleRatio = 0.5;
				}


				setTimeout(() => {
					if (res.direction == "xRCount") {
						//左勾拳音效
						this.hookAudioContext.stop();
						this.hookAudioContext.src = this.leftHookUrl;
						this.hookAudioContext.play();
					} else if (res.direction == "xLCount") {
						this.hookAudioContext.stop();
						this.hookAudioContext.src = this.rightHookUrl;
						this.hookAudioContext.play();
					} else if (res.direction == "zLCount") {
						this.hookAudioContext.stop();
						this.hookAudioContext.src = this.straightHookUrl;
						this.hookAudioContext.play();
					}
				}, 2000);

			},
		}
	}
</script>

<style>
	/* Loader Bar */
	.vertical-container {
		position: absolute;
		top: -50px;
		left: 0;
		right: 0;
		/* bottom: 0; */
		display: flex;
		/* flex-direction: column; */
		justify-content: space-between;
		/* border: 1rpx solid #000000; */
		pointer-events: none;
	}

	.vertical-bar {
		/* list-style: none; */
		/* height: 570px; */
		/* width: 100%; */
		/* border: 1rpx solid #007AFF; */
		/* margin: 0 20rpx; */
		display: flex;
		flex-direction: column-reverse;
		/* justify-content: space-between; */
	}

	.vertical-child {
		/* position: relative; */
		width: 70rpx;
		height: 20rpx;
		margin-top: 6px;
		display: flex;
		/* align-content: center; */
		justify-content: space-between;


	}

	.vertical-text {
		color: #FFFFFF;
		font-size: 8px;
	}

	.text-hidden {
		visibility: hidden;
	}

	.vertical-active {
		background-color: #FFFFFF;
		width: 30rpx;
		height: 100%;
	}

	.vertical-inactive {
		width: 30rpx;
		height: 100%;
		background: rgba(144, 141, 246, 1);
	}

	.boxing-count-bg {
		border-radius: 45rpx;
		background-color: rgba(0, 0, 0, 0.1);
		width: 160rpx;
		height: 60rpx;
		font-size: 22px;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 60rpx;
	}

	#loadbar {
		list-style: none;
		width: 400rpx;
		margin: 0 20rpx;
	}

	#loadbar-child {
		float: left;
		position: relative;
		width: 60rpx;
		height: 10rpx;
		margin-left: 1px;
		background: rgba(255, 255, 255, 0.5);
	}

	#loadbar-child:first-child {
		margin-left: 0;
	}

	.bar {
		background-color: #FFFFFF;
		width: 60rpx;
		height: 10rpx;
	}


	.show-png {
		width: 78rpx;
		height: 78rpx;
		margin: 0 10px;
	}

	.boxing-png {
		margin-top: 40rpx;
		width: 133rpx;
		height: 133rpx;
		transition: transform 0.15s;
	}

	.boxing-change {
		transform: scale(1.58);
	}

	.boxing-post-talkbubble {
		margin-top: 30px;
		width: 260px;
		height: 40px;
		background: rgba(255, 255, 255, 0.13);
		position: relative;
		border-radius: 4px;

		font-size: 14px;
		color: #FFFFFF;
		line-height: 40px;
	}

	.boxing-post-talkbubble:before {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 120px;
		width: 0;
		height: 0;
		border-bottom: 13px solid rgba(255, 255, 255, 0.13);
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
	}

	.boxingTimer {
		position: absolute;
		top: -60rpx;
		left: 0;
		right: 0;
	}
</style>