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

<template>
	<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 class="action-jump-parent margin-top margin-bottom">
			<view class="action-jump-container">
				<canvas canvas-id="actionJumpCanvas" style="width: 375px;height: 50px; background-color: #1CBBB4;"></canvas>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				directionJump: null,
				midJump: null,
				rotateJump: 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,

				level: 3,
				countdown: 60,
				countdownInterval: null,
				
				faultCount:0,
				eliminationCount:0,
			}
		},
		created() {
			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;
				}
			});
			this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
			console.log("this.actionJumpCanvas:", this.actionJumpCanvas);

		},
		methods: {
			/**
			 * 重置生成数组，重置倒计时
			 */
			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;
				if (this.level == 1) {
					for (let i = 0; i < 2; i++) {
						this.spawnJumpPrefabs(i);
					}
					// this.buttonLabel.string = '下一关';

				} else if (this.level == 2) {
					for (let i = 0; i < 4; i++) {
						this.spawnJumpPrefabs(i);
					}
					// this.buttonLabel.string = '下一关';
				} else if (this.level == 3) {
					for (let i = 0; i < 6; i++) {
						this.spawnJumpPrefabs(i);
					}
					// this.buttonLabel.string = '最后一关';
					//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();
			},
			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);
			},
			onDraw() {
				this.actionJumpCanvas.clearRect(0, 0, 375, 50);
				for (let i = 0; i < this.spawnArray.length; i++) {
					//默认 mid 图标
					let _temp = this.midJump;
					if (this.spawnArray[i].icon == 'directionJump') {
						_temp = this.directionJump;
					} else if (this.spawnArray[i].icon == 'rotateJump') {
						_temp = this.rotateJump;
					}
					this.actionJumpCanvas.save();
					this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bTrigger ? 0.5 : 1;
					this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);
					//如果是相反绘制，需要加多一个自身位置偏移
					let _pos = this.spawnArray[i].scaleX < 0 ? i + 1 : i;
					this.actionJumpCanvas.drawImage(_temp.path, (_pos * 50 + 20) * this.spawnArray[i].scaleX, 0, 50, 50);
					this.actionJumpCanvas.restore();
				}
				// console.log('draw');
				this.actionJumpCanvas.draw();
			},
			onClear() {
				this.resetJumpGame();
				
				this.onDraw();
			},

			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;
			}
		}
	}
</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: 50px;
		border: 1rpx solid #000000;
		position: relative;
		// display: flex;
	}
</style>