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

<template>
	<view style="width: 750rpx;">
		<view class="flex justify-center" style="margin-top: 32rpx;">
			<!-- 目前格子数量不代表数字，显示完成度而已 -460rpx;-->
			<view class="grid-progress-vertical-container" style="top:-520rpx; ">
				<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">
							{{Math.floor(taskSignCount / 40 * 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">
							{{Math.floor(taskSignCount / 40 * index)+taskSignCount/2}}
						</view>
						<view
							:class="showCurCount>=index+20? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
						</view>
					</view>
				</view>
			</view>
			<view class="flex align-center justify-center" style="font-size: 14px;">
				<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;">{{jumpSpeed}}</view>
					</view>
				</view>
				<view id="ActionJumpPlay" class="flex" style="position: relative;" @click="onControllerPlay">
					<image style="width: 110px;height: 110px;" src="../../../static/modal/action-jump/midButton.png">
					</image>

					<image v-if="!bJumpPlay" class="mid-absolute" style=" width: 28rpx;height: 28rpx;"
						src="../../../static/modal/action-jump/midPlay.png">
					</image>
					<image v-else class="mid-absolute" style="width: 28rpx;height: 28rpx;"
						src="../../../static/modal/action-jump/midPause.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;">{{jumpCalorie}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="flex justify-center align-center" style="height: 100rpx; width: 444rpx; ">
				<view v-if="bTipLevel" class="cu-btn make-text-bPurple text-16px text-bold"
					style="width: 272rpx;height:80rpx;border-radius: 10px;" @click="onTipLevel">选择关卡</view>
				<view v-else class="text-12px text-white text-center">
					{{taskDescribe}}
				</view>
			</view> -->

		</view>
		<view class="position-relative">
			<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="width: 750rpx;">
			<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> -->

		<!-- <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> -->

		<!-- <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.1.js"
	import {
		CONDITIONPASSED
	} from "@/util/util-js/enum.js"

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

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: mapState(['systemInfo']),
		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: {}, // 设备信息

				directionJump: null,
				midJump: null,
				rotateJump: null,
				directionJumpWhite: null,
				midJumpWhite: null,
				rotateJumpWhite: null,
				//参考图片
				cankao: null,

				jumpTipImage: null,
				jumpNormalImage: null,


				jumpTypeArray: [{
					jumpName: 'NORMAL',
					jumpCode: 0,
					icon: 'midJump',
					scaleX: 1,
					bTrigger: false,
				}, {
					jumpName: 'LEFT',
					jumpCode: 1,
					icon: 'directionJump',
					scaleX: -1,
					bTrigger: false,
				}, {
					jumpName: 'RIGHT',
					jumpCode: 2,
					icon: 'directionJump',
					scaleX: 1,
					bTrigger: false,
				}, {
					jumpName: 'LEFT_ROTATE',
					jumpCode: 3,
					icon: 'rotateJump',
					scaleX: -1,
					bTrigger: false,
				}, {
					jumpName: 'RIGHT_ROTATE',
					jumpCode: 4,
					icon: 'rotateJump',
					scaleX: 1,
					bTrigger: false,
				}],
				spawnArray: [],

				//下一个生成是相反的方向
				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]
					]
				}, ],

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

				faultCount: 0,
				eliminationCount: 0,

				bJumpPlay: false,
				jumpCalorie: 1000,
				jumpSpeed: 1000,

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

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


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

				/**
				 * 是否允许绘制
				 */
				canOnDraw: false,
				/**
				 * 是否去到下一个关卡
				 */
				canGoNext: false,

				onLogData: '',

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

				/**
				 * 烟花相关
				 */
				// firework collection
				fireworks: [],
				fireworkImage: null,
				loop: null,
				count: 100,
				effectCanvas: null,
				effectCurrentSpawn: null,
				effectSpawnPosX: 0,
				/**
				 * 管理三个绘制
				 */
				bDrawBg: false,
				bDrawJump: false,
				bKeepBg: false,
				bKeepType: '',
				bDrawBoomEffect: false
			}
		},
		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 = 114;
			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);
		},
		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 == 'jump') {
						// this.jumpCount++;
						this.bJump = true;
					} else 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.onDraw("tipHit");
						}
						if (this.canGoNext) {
							this.canGoNext = false;
							this.startJumpGame();
						}
						// console.log('stop');
						//这里处理生成下一个
					}
				})
			},
			//load 相关图片
			onLoadImage() {
				let _self = this;
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/directionJump.png",
					success: function(image) {
						_self.directionJump = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/midJump.png",
					success: function(image) {
						_self.midJump = image;
					}
				});
				uni.getImageInfo({
					src: "../../../static/modal/action-jump/rotateJump.png",
					success: function(image) {
						_self.rotateJump = image;
					}
				});

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

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

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

				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 = [];
				if (this.countdownInterval) {
					clearInterval(this.countdownInterval);
					this.countdownInterval = null;
				}

				// this.resetCountdown(60);

			},
			startJumpGame() {
				this.isGameOver = false;
				this.resetJumpGame();
				//开始游戏

				this.index = 0;
				// this.levelLabel.string = '关卡' + this.level;
				let _ranType = Math.floor(Math.random() * 2);
				if (this.levelType == 0) {
					//随便生成一组跳的数据
					let _spawnList = this.template[0].spawnList;
					for (let i = 0; i < 4; i++) {
						this.spawnJumpPrefabsFromType(i, _spawnList[0][0]);
					}
				} else if (this.levelType == 1) {
					//生成一组 左跳右跳
					let _spawnList = this.template[1].spawnList;
					let ran = Math.floor(Math.random() * 2);

					// if (_ranType >= 1) ran += 2;

					for (let i = 0; i < _spawnList[ran].length; i++) {
						this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
					}
				} else if (this.levelType == 2) {
					//生成一组 左跳右跳原地
					let _spawnList = this.template[2].spawnList;
					let ran = Math.floor(Math.random() * 2);
					// if (_ranType >= 1) ran += 2;
					for (let i = 0; i < _spawnList[ran].length; i++) {
						this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
					}
				} else if (this.levelType == 3) {
					//生成一组 左旋跳右旋跳
					let _spawnList = this.template[1].spawnList;
					let ran = Math.floor(Math.random() * 2) + 2;
					for (let i = 0; i < _spawnList[ran].length; i++) {
						this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
					}
				} else if (this.levelType == 4) {
					//生成一组 左旋跳右旋跳
					let _spawnList = this.template[2].spawnList;
					let ran = Math.floor(Math.random() * 2) + 2;
					for (let i = 0; i < _spawnList[ran].length; i++) {
						this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
					}
				} else if (this.levelType == 5) {
					//随便生成三组数据
					let _newArray = [];
					// let _spawnList1 = this.template[1].spawnList;
					// let ran1 = Math.floor(Math.random() * 2);
					// _newArray = _newArray.concat(_spawnList1[ran1]);
					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 i = 0; i < _newArray.length; i++) {
						this.spawnJumpPrefabsFromType(i, _newArray[i]);
					}
					//todo 暂时给循环
					this.level = 0;
				}
				//  if (this.level == 2) {
				// 	//随便生成二组数据
				// 	let _newArray = [];
				// 	let _spawnList1 = this.template[1].spawnList;
				// 	let ran1 = Math.floor(Math.random() * 2);
				// 	_newArray = _newArray.concat(_spawnList1[ran1]);
				// 	let _spawnList2 = this.template[2].spawnList;
				// 	let ran2 = Math.floor(Math.random() * 2);
				// 	if (_ranType >= 1) ran2 += 2;

				// 	_newArray = _newArray.concat(_spawnList2[ran2]);
				// 	// console.log(_newArray);
				// 	for (let i = 0; i < _newArray.length; i++) {
				// 		this.spawnJumpPrefabsFromType(i, _newArray[i]);
				// 	}
				// }

				this.level++;

				//倒计时
				// this.countdownInterval = setInterval(() => {
				// 	if (this.countdown <= 0) {
				// 		clearInterval(this.countdownInterval);
				// 		this.countdownInterval = null;
				// 		//处理下一个关卡
				// 		// console.warn('时间到，处理下一个关卡');
				// 		this.startJumpGame();
				// 		return;
				// 	}
				// 	this.setCountdown(1);
				// }, 1000);

				this.onDraw("tipHit");
			},
			spawnJumpPrefabsFromType(index, _jumpType) {

				//todo 生成的节点，后面再处理节奏问题。比如生成顺序
				for (let i = 0; i < this.jumpTypeArray.length; i++) {
					if (this.jumpTypeArray[i].jumpCode == _jumpType) {
						let _jumpPrefab = Object.assign({}, this.jumpTypeArray[i]);
						this.spawnArray.push(_jumpPrefab);
						break;
					}
				}


			},
			spawnJumpPrefabs(index) {

				let ran = Math.floor(Math.random() * 5);
				//todo 生成的节点，后面再处理节奏问题。比如生成顺序
				let _jumpPrefab = Object.assign({}, this.jumpTypeArray[ran]);
				//这里处理相反方向，比如生成了一个左旋转，下一个右旋转

				if (_jumpPrefab.jumpName == 'LEFT') {
					if (this.bNextSpawnRightDirection) {
						//如果是对应的需要记录一个对应的准确值
						this.bNextSpawnRightDirection = false;
					} else {
						ran = 2; //RIGHT;
						this.bNextSpawnRightDirection = true;
					}

				} else if (_jumpPrefab.jumpName == 'RIGHT') {

					if (this.bNextSpawnRightDirection) {
						ran = 1; //LEFT;
						this.bNextSpawnRightDirection = false;

					} else {
						this.bNextSpawnRightDirection = true;
					}
				}
				if (_jumpPrefab.jumpName == 'LEFT_ROTATE') {
					if (this.bNextSpawnRightRotateDirection) {
						//如果是对应的需要记录一个对应的准确值
						this.bNextSpawnRightRotateDirection = false;
					} else {
						ran = 4; //RIGHT_ROTATE;
						this.bNextSpawnRightRotateDirection = true;
					}
					// console.log('l==rotate', ran);
				} else if (_jumpPrefab.jumpName == 'RIGHT_ROTATE') {
					if (this.bNextSpawnRightRotateDirection) {
						ran = 3; //LEFT_ROTATE;
						this.bNextSpawnRightRotateDirection = false;
					} else {
						//如果是对应的需要记录一个对应的准确值
						this.bNextSpawnRightRotateDirection = true;
					}
				}
				this.spawnArray.push(_jumpPrefab);
			},
			//单纯的绘制八个背景
			onDrawBg() {
				this.bDrawBg = true;
				this.bKeepBg = true;
				this.actionJumpCanvas.clearRect(0, 0, this.canvasW, this.canvasH);
				let _currentBgStartX = this.canvasW / 2;
				let count = 4;
				for (let i = 0; i < count; i++) {
					let _currentStartPos = _currentBgStartX - i * 50 - 50;
					this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50,
						114);
					let _currentEndPos = _currentBgStartX + i * 50;
					this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114);

				}
				this.actionJumpCanvas.draw();
			},
			onDraw(type) {
				this.bDrawJump = true;
				this.bKeepBg = false;
				this.bKeepType = type;
				this.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
				//计算一个对象
				let _drawObj = {
					path: null,
					startX: 0,
					width: 0,
					bgWidth: 0,
					bgStartXAllNormal: 0,
					bgStartXHasTip: 0,
				}
				//计算居中的点
				_drawObj.width = this.spawnArray.length * (50 + 10);
				_drawObj.startX = this.canvasW / 2 - _drawObj.width / 2;
				//全部是普通背景
				_drawObj.bgStartXAllNormal = this.canvasW / 2 - (this.spawnArray.length * 50) / 2;
				_drawObj.bgStartXHasTip = this.canvasW / 2 - (this.spawnArray.length * 50 + 40) / 2;

				let _currentBgStartX = this.index == this.spawnArray.length || type == "normal" ? _drawObj
					.bgStartXAllNormal : _drawObj
					.bgStartXHasTip;
				// console.log("_drawObj.startX:", _drawObj.startX, _drawObj.width / 2);

				//绘制八个位置。如果生成数量不够的话。补上对应的数量
				let count = 8 - this.spawnArray.length;
				count = Math.ceil(count / 2);

				//计算一个节点数组
				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') {
						_temp = this.spawnArray[i].bTrigger ? this.directionJump : this.directionJumpWhite;
					} else if (this.spawnArray[i].icon == 'rotateJump') {
						_temp = this.spawnArray[i].bTrigger ? this.rotateJump : this.rotateJumpWhite;
					}
					//如果是相反绘制，需要加多一个自身位置偏移
					let _pos = this.spawnArray[i].scaleX < 0 ? i + 1 : i;
					let _spacing = i == 0 ? 0 : 1;

					let _addData = 0;
					//大图提示后面要加上大图占的位置，为大图宽度减小图（ 90 - 50 ）
					if (i >= this.index && type !== "normal") {
						_addData = 40;
					}

					if (i == 0) {
						//_frontBgData 为减去大图位置，10 为偏移位置
						let _frontBgData = 40;
						//绘制前背景
						for (let i = 0; i < count; i++) {
							let _currentStartPos = _currentBgStartX - _frontBgData - i * 50 - 10;
							this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0,
								50, 114)

						}
					}


					this.actionJumpCanvas.save();
					this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bTrigger ? 0.7 : 1;
					this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);

					let _currentPos = 0;
					let _currentCenterPos = 0;
					if (i == this.index && type !== "normal") {
						_currentPos = (_currentBgStartX + _pos * 90 - i * 40) *
							this
							.spawnArray[i]
							.scaleX;
						this.actionJumpCanvas.drawImage(this.jumpTipImage.path, _currentPos, 0, 90, 114);

						//计算对应中心点的值
						_currentCenterPos = _currentPos + 90 / 2 - 25 / 2;

						//57 - 40/2 是取画布中心y点，减去图标本身高的一半的值
						this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos - 7.5, 37, 40, 40);

						//这里记录一个生成点，后面用于生成特效
						this.effectSpawnPosX = _currentCenterPos - 8;
					} else {
						_currentPos = (_currentBgStartX + _addData + _pos *
								50) * this
							.spawnArray[i]
							.scaleX;
						this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentPos, 0, 50, 114)

						//计算对应中心点的值
						_currentCenterPos = _currentPos + 50 / 2 - 25 / 2;

						//44.5 是取画布中心y点，减去图标本身高的一半的值
						this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos, 44.5, 25, 25);

					}

					this.actionJumpCanvas.restore();

					if (i == this.spawnArray.length - 1) {
						//绘制结束位置
						// console.log("count:", count);
						for (let i = 0; i < count; i++) {
							let _currentEndPos = _currentBgStartX + _addData + (this.spawnArray.length +
								i) * 50;

							// console.log("end _currentEndPos:", _currentEndPos);
							this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0,
								50, 114)

						}

					}
				}

				this.actionJumpCanvas.draw();
			},
			onDrawEffect(_temp) {
				//根据当前消除的生成一个
				// console.log("生成的_temp:" + JSON.stringify(_temp));
				let spawnTemp = this.midJump;
				if (_temp.icon == 'directionJump') {
					spawnTemp = this.directionJump;
				} else if (_temp.icon == 'rotateJump') {
					spawnTemp = this.rotateJump;
				}
				let tempFirework = new Firework(this.fireworkImage,
					spawnTemp, _temp.scaleX, this.effectSpawnPosX, 0, this.canvasW, 164);
				this.fireworks.push(tempFirework);
				this.bDrawBoomEffect = true;
				this.onInitFirework();
			},
			onClear() {
				this.resetJumpGame();

				this.onDrawBg();

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

				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) {
				let _temp = this.spawnArray[this.index];
				// let _temp = this.jumpTypeArray[Math.floor(Math.random()*4) ];
				//这里更新特效
				// this.onDrawEffect(_temp);
				// return;
				//如果当前的跳类型和预制目标一样
				if (_jumpType == _temp.jumpCode) {
					_temp.bTrigger = true;
					this.index++;
					//这里更新特效
					let _endTemp = Object.assign({}, _temp);
					this.onDrawEffect(_endTemp);
					if (this.index >= this.spawnArray.length) {
						clearInterval(this.countdownInterval);
						this.countdownInterval = null;
						this.startJumpGame();
					} else {
						//绘制新触发状态
						this.onDraw('tipHit');
					}
					//成功
					this.setEliminationCount(1);
				} 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.taskSignCurCount++;
				this.roundingCount += this.addShowCountUnit;
				this.eliminationCount += value;

				// this.eliminationLabel.string = '消除数量：' + this.eliminationCount.toString();
				this.$emit('actionJumpDataUpdate', {
					eliminationCount: this.eliminationCount,
					faultCount: 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.faultCount += value;
				// this.faultLabel.string = '失误：' + this.faultCount;
				this.$emit('actionJumpDataUpdate', {
					eliminationCount: this.eliminationCount,
					faultCount: 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[this.index];
				return _temp.jumpCode;
			},

			//监听跳的状态数据
			listenStateDataOfJump(data) {
				if (this.isGameOver || !this.bJumpPlay) return;

				let _jumpType = this.getCurrentJumpType();
				//初始全部默认状态
				let _tempState = [{
						jumpName: 'NORMAL',
						jumpCode: 0,
						bTrigger: true,
						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 = 8;

				switch (_jumpType) {
					case 0:
						//JumpType.NORMAL = 0
						_tempState[0].bTrigger = true;
						this.eliminateJumpPrefabFormTemp(_tempState);
						break;
					case 1:
						if (currentMaxValue < -_jumpLimit || valleyOfWaveMinValue < -20) {
							//left jump
							_tempState[1].bTrigger = true;
						}
						this.eliminateJumpPrefabFormTemp(_tempState);
						break;
					case 2:
						if (currentMaxValue > _jumpLimit || peakOfWaveMaxValue > 20) {
							//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) {
				//如果消除完，需要重新生成
				let _temp = this.spawnArray[this.index];
				let bSuccess = false;
				for (let i = 0; i < _tempState.length; i++) {
					let _state = _tempState[i];
					if (_state.bTrigger)
						console.log(JSON.stringify(_state) + JSON.stringify(this.onLogData));
					//如果当前的跳类型和预制目标一样
					if (_state.jumpCode == _temp.jumpCode && _state.bTrigger) {
						//成功
						bSuccess = true;
						break;
					}
				}
				//如果存在其中一个为true
				if (bSuccess) {
					// console.log("bSuccess:", bSuccess);
					_temp.bTrigger = true;
					this.index++;
					//这里更新特效
					this.onDrawEffect(_temp);
					if (this.index >= this.spawnArray.length) {
						clearInterval(this.countdownInterval);
						this.countdownInterval = null;
						this.canGoNext = true;
						this.onDraw("normal");
					} else {
						//绘制新触发状态
						this.canOnDraw = true;
						this.onDraw("normal");
					}
					//成功
					this.setEliminationCount(1);
				} else {
					//失误
					this.setFaultCount(1);
				}


			},


			/**
			 * @param {Object} gameData
			 * 识别跳部分数据处理
			 */
			onBLERopeUpdate(gameData) {
				if (!this.bJumpPlay || this.isGameOver) 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
					},
					//输入当前轴
					bYAxis: true,
				};
				this.actionJumpObj.updateJump(_temp);


				// if (this.BLEAccIndex > 150) {
				// 	this.onClearData();
				// 	this.bJump = false;
				// 	return;
				// }
				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");
			}
		}
	}
</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;
	}
</style>