ProAdvanced/components/effectHit/hitFistEffect.vue

<template>
	<view>
		<view class="HitFistEffect-parent">
			<view class="HitFistEffect-container">
				<canvas canvas-id="fistCanvas" style="width: 375px;height: 100px;"></canvas>
			</view>
		</view>

		<!-- <view>
			<button style="width: 200rpx;" @tap="onTestRed">onTestRed</button>
			<button style="width: 200rpx;" @tap="onTestBlue">onTestBlue</button>
		</view> -->

	</view>

</template>

<script>
	var Timing = {
		easeIn: function easeIn(pos) {
			return Math.pow(pos, 3);
		},
		easeOut: function easeOut(pos) {
			return Math.pow(pos - 1, 3) + 1;
		},
		easeInOut: function easeInOut(pos) {
			if ((pos /= 0.5) < 1) {
				return 0.5 * Math.pow(pos, 3);
			} else {
				return 0.5 * (Math.pow(pos - 2, 3) + 2);
			}
		},
		linear: function linear(pos) {
			return pos;
		}
	};

	function Animation(opts) {
		// console.log(opts);
		this.isStop = false;
		opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
		opts.timing = opts.timing || 'linear';
		var delay = 17;

		function createAnimationFrame() {
			if (typeof setTimeout !== 'undefined') {
				return function(step, delay) {
					setTimeout(function() {
						var timeStamp = +new Date();
						step(timeStamp);
					}, delay);
				};
			} else if (typeof requestAnimationFrame !== 'undefined') {
				return requestAnimationFrame;
			} else {
				return function(step) {
					step(null);
				};
			}
		};
		var animationFrame = createAnimationFrame();
		var startTimeStamp = null;
		var _step = function step(timestamp) {
			if (timestamp === null || this.isStop === true) {
				opts.onProcess && opts.onProcess(1);
				opts.onAnimationFinish && opts.onAnimationFinish();
				return;
			}
			if (startTimeStamp === null) {
				startTimeStamp = timestamp;
			}
			if (timestamp - startTimeStamp < opts.duration) {
				var process = (timestamp - startTimeStamp) / opts.duration;
				var timingFunction = Timing[opts.timing];
				process = timingFunction(process);

				opts.onProcess && opts.onProcess(process);
				animationFrame(_step, delay);
			} else {
				opts.onProcess && opts.onProcess(1);
				opts.onAnimationFinish && opts.onAnimationFinish();
			}
		};
		_step = _step.bind(this);
		animationFrame(_step, delay);
	}
	export default {

		props: {
			bLeft: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				//拳头
				fistRedImage: "/static/effectHit/fist-red.png",
				fistBlueImage: "/static/effectHit/fist-blue.png",
				animation: 'left-play',

				fistList: [],
				fistBlueList: [],

				//限制生成个数
				createRedFistLimit: 5,
				createBlueFistLimit: 5,
				//已经生成的对象
				createRedList: {
					'small': [],
					'medium': [],
					'large': []
				},
				createBlueList: {
					'small': [],
					'medium': [],
					'large': []
				},

				fistRed: null,
				fistBlue: null,
				setInterval: null,

			};
		},
		created() {
			let _self = this;
			this.fistCanvas = uni.createCanvasContext("fistCanvas", this);

			uni.getImageInfo({
				src: "../../../static/effectHit/fist-red.png",
				success: function(image) {
					_self.fistRed = image;
				}
			});
			uni.getImageInfo({
				src: "../../../static/effectHit/fist-blue.png",
				success: function(image) {
					_self.fistBlue = image;
				}
			});
			
			//{scale:1, red:{x:260,y:0} blue:{x:30,y:0}}
			//{scale:0.8, red:{x:350,y:20} blue:{x:50,y:20}}
			//{scale:0.6, red:{x:490,y:40} blue:{x:90,y:40}}

			// setTimeout(() => {
			// 	let _scale = 0.6;
			// 	let _dWidth = _scale * _self.fistRed.width;
			// 	let _dHeight = _scale * _self.fistRed.height;
			// 	_self.fistCanvas.save();
			// 	_self.fistCanvas.scale(_scale, _scale);
			// 	// _self.fistCanvas.translate(x,  0);
			// 	_self.fistCanvas.drawImage(_self.fistRed.path, 490, 40, _dWidth, _dHeight);
			// 	_self.fistCanvas.restore();
			// 	_self.fistCanvas.save();
			// 	_self.fistCanvas.scale(-_scale, _scale);
			// 	_self.fistCanvas.drawImage(_self.fistBlue.path, -90 - _dWidth, 40,
			// 		_dWidth, _dHeight);
			// 	_self.fistCanvas.restore();
			// 	_self.fistCanvas.draw();
			// }, 1000)

			this.onDetectionPosition();

			// setInterval(()=>{
			// 	this.onTestBlue();
			// },500)
		},
		beforeDestroy() {},
		methods: {
			onDetectionPosition() {
				let _self = this;
				if (_self.setInterval != null) {
					clearInterval(_self.setInterval);
					_self.setInterval = null;
				}

				//100毫秒检测一次位置
				_self.setInterval = setInterval(() => {
					_self.fistCanvas.clearRect(0, 0, 750, 150);
					drawFistType('small');
					drawFistType('medium');
					drawFistType('large');
					_self.fistCanvas.draw();
				}, 20)

				function drawFistType(type) {
					let smallRedList = _self.createRedList[type];
					let smallBlueList = _self.createBlueList[type];
					for (let i = 0; i < smallRedList.length; i++) {
						let _scale = smallRedList[i].scale;
						let _dWidth = _scale * _self.fistRed.width;
						let _dHeight = _scale * _self.fistRed.height;
						_self.fistCanvas.save();
						_self.fistCanvas.scale(_scale, _scale);
						_self.fistCanvas.drawImage(_self.fistRed.path, smallRedList[i].red.x, smallRedList[i].red.y, _dWidth, _dHeight);
						_self.fistCanvas.restore();
						if (smallBlueList.length > i) {
							if (smallRedList[i].red.x.sub(smallBlueList[i].blue.x) < 0.5) {
								smallRedList[i].animationInstance.isStop = true;
								smallBlueList[i].animationInstance.isStop = true;
							}
						}
					}
					for (let i = 0; i < smallBlueList.length; i++) {
						let _scale = smallBlueList[i].scale;
						let _dWidth = _scale * _self.fistBlue.width;
						let _dHeight = _scale * _self.fistBlue.height;
						_self.fistCanvas.save();
						_self.fistCanvas.scale(-_scale, _scale);
						_self.fistCanvas.drawImage(_self.fistBlue.path, - smallBlueList[i].blue.x - _dWidth, smallBlueList[i].blue.y,
							_dWidth, _dHeight);
						_self.fistCanvas.restore();
					}
				}
			},
			

			onCreateFist(data, callback) {
				if (data.createFistLimit > 0) {
					data.createFistLimit--;
					let _item = {
						scale: data.scale,
						type: data.type, //尺寸 small, medium and large
						time: data.time,
						red:data.red,
						blue:data.blue,
						animationInstance: null
					};
					data.createList[_item.type].push(_item);
					_item.animationInstance = new Animation({
						timing: 'linear',
						duration: _item.time,
						onProcess: function(process) {
							if (data.createType == 'red') {
								_item.red.x -= process * 15;
							} else {
								_item.blue.x += process * 15;
							}
						},
						onAnimationFinish: function onAnimationFinish() {
							// console.log("finishblue:",_item.animationInstance.isStop);
							if (!_item.animationInstance.isStop) {
								//如果isStop 是false 的，说明没有抵消，则击中

								if (callback) {
									callback({
										hit: true
									})
								}
							}
							data.createFistLimit++;
							data.createList[_item.type].shift();
						}
					});
				}

			},

			onTestRed() {
				let num = Math.floor(Math.random() * 3) + 1;
				// console.log("num:", num);

				this.onPlay({
					bloodPoint: num,
					createType: 'red',
					callback: (res) => {
						console.log("红色拳头击中对方：", res);
					}
				});
			},
			onTestBlue() {
				let num = Math.floor(Math.random() * 3) + 1;
				// console.log("num:", num);

				this.onPlay({
					bloodPoint: num,
					createType: 'blue',
					callback: (res) => {
						console.log("蓝色拳头击中对方：", res);
					}
				});
			},

			onPlay(context) {
				let {
					bloodPoint,
					callback,
					createType
				} = context;

				//{scale:1, red:{x:260,y:0} blue:{x:30,y:0}}
				//{scale:0.8, red:{x:350,y:20} blue:{x:50,y:20}}
				//{scale:0.6, red:{x:490,y:40} blue:{x:90,y:40}}

				let temp = {};
				if (bloodPoint == 3) {
					//大拳头
					temp.scale = 1;
					temp.time = 500;
					temp.type = 'large';
					temp.red = {x: 260,y: 0};
					temp.blue = {x: 30,y: 0};
				} else if (bloodPoint == 2) {
					//中拳头
					temp.scale = 0.8;
					temp.time = 700;
					temp.type = 'medium';
					temp.red = {x:350,y:20};
					temp.blue = {x:50,y:20};
				} else {
					//小拳头
					temp.scale = 0.6;
					temp.time = 900;
					temp.type = 'small';
					temp.red = {x:490,y:40};
					temp.blue = {x:90,y:40};
				}
				if (createType == 'red') {
					temp.createFistLimit = this.createRedFistLimit;
					temp.createList = this.createRedList;
					temp.createType = "red";
					this.onCreateFist(temp, callback);
				} else {
					temp.createFistLimit = this.createBlueFistLimit;
					temp.createList = this.createBlueList;
					temp.createType = "blue";
					this.onCreateFist(temp, callback);
				}

			},
			onStop() {

			}

		}
	}
</script>

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

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

	.HitFistEffect {
		// background-color: #007AFF;
		position: absolute;
		background-size: cover;
		height: 65px;
		width: 86px;
		// position: relative;
		top: 0;

		// left: -500rpx;

	}

	.left-play {
		animation: leftHitFistEffectRun calc(var(--time) * 1s) ease calc(var(--delay) * 1s) 1;
		animation-play-state: running;
	}

	.right-play {
		animation: rightHitFistEffectRun calc(var(--time) * 1s) ease calc(var(--delay) * 1s) 1;
		animation-play-state: running;
	}

	@keyframes leftHitFistEffectRun {
		0% {
			left: 150rpx;
		}

		100% {
			left: 450rpx;
		}
	}

	@keyframes rightHitFistEffectRun {
		0% {
			left: 450rpx;
		}

		100% {
			left: 150rpx;
		}
	}
</style>