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

<template>
	<view>

		<view class="flex justify-center" style="height: 75px; margin-top: 46rpx;">
			<!-- 计时器 -->
			<view class="action-jump-timer flex justify-center">
				<boxingCountDown ref="boxingCountDownRef" :show-day="false" :second="showTime" color="#FFFFFF"
					background-color="rgba(255,255,255,0);" border-color="#007AFF" splitorColor="#FFFFFF" />
			</view>

			<view class="grid-progress-vertical-container" style="top:-460rpx; ">
				<view class="grid-progress-vertical-bar">
					<view class="grid-progress-vertical-child" v-for="(item, index) in 20" :key="index">
						<view
							:class="showCount>=index+1? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
						</view>
						<view :class="index%5 == 0?'':'grid-progress-text-hidden'" class="grid-progress-vertical-text">
							{{(index+1)*2}}
						</view>
					</view>
				</view>
				<view class="grid-progress-vertical-bar">
					<view class="grid-progress-vertical-child" v-for="(item, index) in 20" :key="index">
						<view :class="index%5 == 0?'':'grid-progress-text-hidden'" class="grid-progress-vertical-text">
							{{(index+26)*2}}
						</view>
						<view
							:class="showCount>=index+26? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
						</view>
					</view>
				</view>
			</view>

			<view class="flex justify-center align-center"
				style="height: 52rpx; width: 412rpx; background-color: rgba(255,255,255,0.11); border-radius: 12rpx;">
				<!-- 居中绘制星星样式 -->
				<view class="text-14px text-white">
					拉伸运动：
				</view>
				<view class="flex flex-direction" v-for="(item, index) in 5" :key="index">
					<image style="width: 34rpx;height: 32rpx;" src="../../../static/modal/action-jump/stars.png">
					</image>
				</view>
			</view>


		</view>

		<view class="action-jump-parent margin-bottom">
			<view class="action-jump-container">
				<canvas canvas-id="actionJumpCanvas"
					:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
			</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 class="flex" style="position: relative;" @click="onControllerPlay">
				<image style="width: 112px;height: 111px;" 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 style="height: 41px;"></view>

		<!-- 测试按钮 -->
		<view style="display: flex;justify-content: space-between;">
			<button @click="startJumpGame">startGame</button>
			<button @click="onClear">onClear</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;">
			<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 boxingCountDown from '@/components/uni-count-down/uni-count-down.vue'


	export default {
		components: {
			boxingCountDown
		},
		props: {
			showTime: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				//满格的数值是 25
				maxShowCount: 25,
				//显示的点
				showCount: 0,

				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,
				countdown: 60,
				countdownInterval: null,

				faultCount: 0,
				eliminationCount: 0,

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

		created() {
			let _self = this;

			this.onLoadImage();

			this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
			// console.log("this.actionJumpCanvas:", this.actionJumpCanvas);

			this.SystemInfo = uni.getSystemInfoSync();
			this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
			this.canvasH = 114;

		},
		methods: {
			//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;
						console.log("==============", 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;
						console.log("==============", 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;
					}
				});
			},
			/**
			 * 重置生成数组，重置倒计时
			 */
			resetJumpGame() {

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

				this.resetCountdown(60);
			},
			startJumpGame() {
				this.resetJumpGame();
				//开始游戏

				this.index = 0;
				// this.levelLabel.string = '关卡' + this.level;
				let _ranType = Math.floor(Math.random() * 2);

				if (this.level == 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.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]);
					}
				} else if (this.level == 3) {
					//随便生成三组数据
					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;
				}

				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();
			},
			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.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
				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() {
				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 ? _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) {
						_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) {
						_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);
					} 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();
			},
			onClear() {
				this.resetJumpGame();

				this.onDrawBg();
			},

			onJumpType(event) {
				// console.log("onJumpType:", event);
				this.eliminateJumpPrefab(event);
			},

			// update (dt) {}

			eliminateJumpPrefab(_jumpType) {
				//如果消除完，需要重新生成
				if (this.index >= this.spawnArray.length) return;
				let _temp = this.spawnArray[this.index];
				_temp.bTrigger = true;
				this.index++;
				//绘制新触发状态
				this.onDraw();
				//如果当前的跳类型和预制目标一样
				if (_jumpType == _temp.jumpCode) {
					//成功
					this.setEliminationCount(1);
				} else {
					//失误
					this.setFaultCount(1);
				}

			},

			//设置倒计时
			setCountdown(value) {
				this.countdown -= value;
				// this.countdownLabel.string = '倒计时：' + this.countdown;
			},
			resetCountdown(value) {
				this.countdown = value;
				// this.countdownLabel.string = '倒计时：' + this.countdown;
			},
			//设置ui信息
			setEliminationCount(value) {
				this.eliminationCount += value;
				// this.eliminationLabel.string = '消除数量：' + this.eliminationCount.toString();
			},
			setFaultCount(value) {
				this.faultCount += value;
				// this.faultLabel.string = '失误：' + this.faultCount;
			},
			//控制播放
			onControllerPlay() {
				this.bJumpPlay = !this.bJumpPlay;
				if (this.bJumpPlay) {
					this.startJumpGame();
				} else {
					this.onClear();
				}
			}
		}
	}
</script>

<style lang="scss">
	.action-jump-parent {
		// border: 1rpx solid #ffaa7f;
		position: relative;
		display: flex;
		justify-content: center;
		overflow: hidden;
		top: 0;
		width: 750rpx;
	}

	.action-jump-container {
		width: 100%;
		height: 114px;
		// border: 1rpx solid #000000;
		position: relative;
		// display: flex;
	}

	.mid-absolute {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}

	.action-jump-timer {
		position: absolute;
		top: -150rpx;
	}
</style>