cocoroboBlockly/src/components/police.vue

<template>
	<div>
		<div class="tip">
			<img src="../assets/img/tips.png" alt="" />
		</div>
		<div class="img">
			<div
				id="screan"
				ref="dv"
				v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
			>
				<img src="../assets/img/light/screan.png" alt="" />
			</div>
			<div
				id="tou"
				v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
			>
				<img src="../assets/img/tou1.png" alt="" />
			</div>
			<div
				id="ai"
				v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
			>
				<img src="../assets/img/ai.png" alt="" />
			</div>
			<div
				id="police"
				v-drag="{ go, getK, setk, getC, setC, getA, setA, setPan, getPan }"
			>
				<img src="../assets/img/policeNew.png" alt="" />
			</div>
		</div>
		<div class="right"><img src="../assets/img/right.png" alt="" /></div>
		<div class="button">进入CocoBlockly编程平台</div>
		<video
			id="musicC"
			:src="require('../assets/music/click.mp3')"
			v-show="false"
		></video>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				that: this,
				kkk: 0,
				ccc: 0,
				aaa: 0,
			};
		},
		directives: {
			drag: {
				// 指令的定义
				inserted: function (el, binding) {
					// el.drag();
					console.log(el);
					//获取元素
					// var dv = document.getElementById("dv");
					let x = 0;
					let y = 0;
					let l = 0;
					let t = 0;
					let Count = 0;
					let isDown = false;
					var dv = document.getElementById("screan");
					var dv1 = document.getElementById("tou");
					var dv2 = document.getElementById("ai");
					var dv3 = document.getElementById("police");
					var musicC = document.getElementById("musicC");

					//鼠标按下事件
					el.onmousedown = function (e) {
						//获取x坐标和y坐标
						e.preventDefault();
						x = e.clientX;
						y = e.clientY;

						//获取左部和顶部的偏移量
						l = el.offsetLeft;
						t = el.offsetTop;
						//开关打开
						isDown = true;
						//设置样式
						el.style.cursor = "move";
						subiao(el);
					};
					function subiao(cdiv) {
						document.onmousemove = function (e) {
							if (isDown == false) {
								return;
							}
							//获取x和y
							var nx = e.clientX;
							var ny = e.clientY;
							//计算移动后的左偏移量和顶部的偏移量
							var nl = nx - (x - l);
							var nt = ny - (y - t);

							cdiv.style.left = nl + "px";
							cdiv.style.top = nt + "px";

							if (el.id == "screan") {
								binding.value.setPan("screan");
								moveP(nl, nt, 1);
							}

							if (el.id == "tou") {
								binding.value.setPan("tou");
								moveP(nl, nt, 2);
							}

							if (el.id == "ai") {
								binding.value.setPan("ai");
								moveP(nl, nt, 4);
							}

							if (el.id == "police") {
								binding.value.setPan("police");
								moveP(nl, nt, 3);
							}
						};
					}
					//鼠标抬起事件
					el.onmouseup = function (e) {
						//开关关闭
						isDown = false;
						el.style.cursor = "default";
						document.onmousemove = null;
						var nx = e.clientX;
						var ny = e.clientY;
						var nl = nx - (x - l);
						var nt = ny - (y - t);
						if (binding.value.getPan() == "screan") {
							st(nl, nt, 1);
						}

						if (binding.value.getPan() == "tou") {
							st(nl, nt, 2);
						}

						if (binding.value.getPan() == "ai") {
							st(nl, nt, 4);
						}

						if (binding.value.getPan() == "police") {
							st(nl, nt, 3);
						}
						pan();
					};
					function pan() {
						var _panL = dv.offsetLeft;
						var _panT = dv.offsetTop;

						var touL = dv1.offsetLeft;
						var touT = dv1.offsetTop;

						var aiL = dv2.offsetLeft;
						var aiT = dv2.offsetTop;

						var policeL = dv3.offsetLeft;
						var policeT = dv3.offsetTop;

						var stL = _panL - touL;
						var saL = _panL - aiL;
						var spL = _panL - policeL;

						var stP = _panT - touT;
						var saP = _panT - aiT;
						var spP = _panT - policeT;

						var btn = document.getElementsByClassName("button")[0];
						var right = document.getElementsByClassName("right")[0];

						if (
							binding.value.getA() == 1 &&
							binding.value.getC() == 1 &&
							binding.value.getK() == 1
						) {
							btn.className = "button dark";
							btn.onclick = function () {
								binding.value.go();
							};
							right.style.display = "block";
							right.style.left = policeL + 240 + "px";
							right.style.top = policeT + 100 + "px";
						} else {
							btn.className = "button";
							btn.onclick = null;
							right.style.display = "none";
						}
					}
					function st(nl, nt, type) {
						var _panL = dv.offsetLeft;
						var _panT = dv.offsetTop;
						var touL = dv1.offsetLeft;
						var touT = dv1.offsetTop;

						var policeL = dv3.offsetLeft;
						var policeT = dv3.offsetTop;

						var aiL = dv2.offsetLeft;
						var aiT = dv2.offsetTop;

						var stL = _panL - touL;
						var stP = _panT - touT;

						var spL = policeL - _panL;
						var spP = policeT - _panT;

						var saL = _panL - aiL;
						var saP = _panT - aiT;

						var saL2 = policeL - aiL;
						var saP2 = policeT - aiT;

						if (
							-222 < saL2 &&
							saL2 < 52 &&
							-33 < saP2 &&
							saP2 < 240 &&
							type == 4
						) {
							dv2.style.left = policeL + 56 + "px";
							dv2.style.top = policeT - 75 + "px";
							binding.value.setA(1);
							playMusic();
						} else if (type == 4) {
							binding.value.setA(0);
						}
						if (-203 < spL && spL < 60 && -41 < spP && spP < 254 && type == 1) {
							dv.style.left = policeL + 51 + "px";
							dv.style.top = policeT - 75 + "px";
							binding.value.setC(1);
							playMusic();
						} else if (type == 1) {
							binding.value.setC(0);
						}

						if (-101 < stL && stL < -34 && 68 < stP && stP < 130 && type == 2) {
							dv1.style.left = _panL + 47 + "px";
							dv1.style.top = _panT - 79 + "px";
							binding.value.setk(1);
							playMusic();
						} else if (type == 2) {
							binding.value.setk(0);
						}
					}
					function playMusic() {
						musicC.play();
					}

					function moveP(nl, nt, type) {
						if (binding.value.getK() == 1 && type == 1) {
							dv1.style.left = nl + 47 + "px";
							dv1.style.top = nt - 79 + "px";
						}

						if (binding.value.getC() == 1 && type == 3) {
							dv.style.left = nl + 51 + "px";
							dv.style.top = nt - 75 + "px";
						}

            if (binding.value.getC() == 1 && binding.value.getA() == 1 && binding.value.getK() == 1 && type == 3) {
              dv.style.left = nl + 51 + "px";
							dv.style.top = nt - 75 + "px";
							dv1.style.left = nl + 98 + "px";
							dv1.style.top = nt - 153 + "px";
              dv2.style.left = nl + 56 + "px";
							dv2.style.top = nt - 75 + "px";
						}

					}
				},
			},
		},
		methods: {
			go() {
				this.$router.push("/blockly");
			},
			setk(value) {
				this.kkk = value;
			},
			getK() {
				return this.kkk;
			},
			setC(value) {
				this.ccc = value;
			},
			getC() {
				return this.ccc;
			},
			setA(value) {
				this.aaa = value;
			},
			getA() {
				return this.aaa;
			},
			setPan(value) {
				this.panThing = value;
			},
			getPan() {
				return this.panThing;
			},
		},
	};
</script>

<style scoped>
	html,
	body {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.tip {
		margin: 25px 0 30px 20px;
		width: 419px;
	}

	.tip > img,
	#screan > img,
	#tou > img,
	#ai > img,
	#police > img,
	.right > img {
		width: 100%;
		height: 100%;
		user-select: none;
	}

	.img {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin: auto;
		width: 70%;
		/* position: relative; */
	}

	#screan {
		width: 150px;
		position: absolute;
		left: 10%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
	}

	#ai {
		width: 150px;
		position: absolute;
		top: 50%;
		left: 30%;
		transform: translateY(-50%);
		z-index: 3;
	}

	#tou {
		width: 55px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%);
		z-index: 4;
	}

	#police {
		width: 250px;
		position: absolute;
		left: 70%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}

	.button {
		color: #fff;
		background: #8ca1de;
		width: 550px;
		height: 55px;
		font-size: 20px;
		text-align: center;
		line-height: 55px;
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);
		user-select: none;
	}

	.right {
		width: 40px;
		position: absolute;
		left: 55%;
		top: 70%;
		display: none;
	}

	.dark {
		background: #5b79d0;
		cursor: pointer;
	}
</style>