cocoroboBlockly/src/components/necklace.vue

<template>
	<div>
		<div class="tip">
			<img src="../assets/img/curtainJs.png" alt="" />
		</div>
		<div class="img">
			<div
				id="screan"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setearphoneJack,
					getearphoneJack,
					setearphone,
					getearphone,
				}"
			>
				<img src="../assets/img/light/screan.png" alt="" />
			</div>
			<div
				id="ai"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setearphoneJack,
					getearphoneJack,
					setearphone,
					getearphone,
				}"
			>
				<img src="../assets/img/ai.png" alt="" />
			</div>
			<div
				id="tou"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setearphoneJack,
					getearphoneJack,
					setearphone,
					getearphone,
				}"
			>
				<img src="../assets/img/door/tou.png" alt="" />
			</div>
			<div
				id="necklace"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setearphoneJack,
					getearphoneJack,
					setearphone,
					getearphone,
				}"
			>
				<img src="../assets/img/necklace/necklace.png" alt="" />
			</div>
			<div
				id="earphoneJack"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setearphoneJack,
					getearphoneJack,
					setearphone,
					getearphone,
				}"
			>
				<img src="../assets/img/necklace/earphoneJack.png" alt="" />
			</div>
			<div
				id="earphone"
				v-drag="{
					go,
					setPan,
					getPan,
					setTou,
					getTou,
					setAi,
					getAi,
					setScrean,
					getScrean,
					setearphoneJack,
					getearphoneJack,
					setearphone,
					getearphone,
				}"
			>
				<img src="../assets/img/necklace/earphone.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 {
				panThing: "",
				tou: "",
				ai: "",
				screan: "",
				earphoneJack: "",
				earphone: "",
			};
		},
		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 isDown = false;
					var _screan = document.getElementById("screan");
					var _ai = document.getElementById("ai");
					var _tou = document.getElementById("tou");
					var _necklace = document.getElementById("necklace");
					var _earphoneJack = document.getElementById("earphoneJack");
					var _earphone = document.getElementById("earphone");
					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, "screan");
							}

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

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

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

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

							if (el.id == "earphone") {
								binding.value.setPan("earphone");
								moveP(nl, nt, "earphone");
							}
						};
					}
					//鼠标抬起事件
					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, "screan");
						}

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

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

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

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

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

						pan();
					};
					function pan() {
						var policeL = _necklace.offsetLeft;
						var policeT = _necklace.offsetTop;

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

						if (
							binding.value.getTou() == 1 &&
							binding.value.getAi() == 1 &&
							binding.value.getScrean() == 1 &&
							binding.value.getearphoneJack() == 1 &&
							binding.value.getearphone() == 1
						) {
							btn.className = "button dark";
							btn.onclick = function () {
								binding.value.go();
							};
							right.style.display = "block";
							right.style.left = policeL - 43 + "px";
							right.style.top = policeT + 107 + "px";
						} else {
							btn.className = "button";
							btn.onclick = null;
							right.style.display = "none";
						}
					}
					function st(nl, nt, type) {
						var screanL = _screan.offsetLeft;
						var screanT = _screan.offsetTop;

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

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

						var necklaceL = _necklace.offsetLeft;
						var necklaceT = _necklace.offsetTop;

						var earphoneJackL = _earphoneJack.offsetLeft;
						var earphoneJackT = _earphoneJack.offsetTop;

						var earphoneL = _earphone.offsetLeft;
						var earphoneT = _earphone.offsetTop;

						var firstL = aiL - touL;
						var firstT = aiT - touT;

						var secondL = necklaceL - aiL;
						var secondT = necklaceT - aiT;

						var thirdthL = necklaceL - screanL;
						var thirdthT = necklaceT - screanT;

						var fourthL = screanL - earphoneJackL;
						var fourthT = screanT - earphoneJackT;

						var fivethL = earphoneJackL - earphoneL;
						var fivethT = earphoneJackT - earphoneT;

						if (
							-77 < firstL &&
							firstL < -10 &&
							15 < firstT &&
							firstT < 100 &&
							type == "tou"
						) {
							_tou.style.left = aiL + 40 + "px";
							_tou.style.top = aiT - 73 + "px";
							binding.value.setTou(1);
						} else if (type == "tou") {
							binding.value.setTou(0);
						}

						if (
							-188 < secondL &&
							secondL < 35 &&
							-113 < secondT &&
							secondT < 90 &&
							type == "ai" &&
							binding.value.getTou() == 1
						) {
							_ai.style.left = necklaceL + 74 + "px";
							_ai.style.top = necklaceT + 11 + "px";
							if (binding.value.getTou() == 1) {
								_tou.style.left = necklaceL + 74 + 40 + "px";
								_tou.style.top = necklaceT + 11 - 73 + "px";
							}
							binding.value.setAi(1);
						} else if (type == "ai") {
							binding.value.setAi(0);
						}

						if (
							-180 < thirdthL &&
							thirdthL < 32 &&
							-108 < thirdthT &&
							thirdthT < 86 &&
							type == "screan"
						) {
							_screan.style.left = necklaceL + 74 + "px";
							_screan.style.top = necklaceT + 12 + "px";
							binding.value.setScrean(1);
						} else if (type == "screan") {
							binding.value.setScrean(0);
						}

						if (
							-128 < fourthL &&
							fourthL < -102 &&
							-96 < fourthT &&
							fourthT < -28 &&
							binding.value.getTou() == 1 &&
							binding.value.getAi() == 1 &&
							binding.value.getScrean() == 1 &&
							type == "earphoneJack"
						) {
							_earphoneJack.style.left = screanL + 115 + "px";
							_earphoneJack.style.top = screanT + 68 + "px";
							binding.value.setearphoneJack(1);
						} else if (type == "earphoneJack") {
							binding.value.setearphoneJack(0);
						}

						if (
							-10 < fivethL &&
							fivethL < 10 &&
							-56 < fivethT &&
							fivethT < 84 &&
							binding.value.getTou() == 1 &&
							binding.value.getAi() == 1 &&
							binding.value.getScrean() == 1 &&
							binding.value.getearphoneJack() == 1 &&
							type == "earphone"
						) {
							_earphone.style.left = earphoneJackL + 0 + "px";
							_earphone.style.top = earphoneJackT + 38 + "px";
							binding.value.setearphone(1);
						} else if (type == "earphone") {
							binding.value.setearphone(0);
						}
					}
					function playMusic() {
						musicC.play();
					}

					function moveP(nl, nt, type) {
						if (binding.value.getTou() == 1 && type == "ai") {
							_tou.style.left = nl + 40 + "px";
							_tou.style.top = nt - 73 + "px";
						}

						if (
							binding.value.getTou() == 1 &&
							binding.value.getAi() == 1 &&
							type == "necklace"
						) {
							_ai.style.left = nl + 74 + "px";
							_ai.style.top = nt + 11 + "px";
							_tou.style.left = nl + 114 + "px";
							_tou.style.top = nt - 62 + "px";
						}

						if (binding.value.getScrean() == 1 && type == "necklace") {
							_screan.style.left = nl + 74 + "px";
							_screan.style.top = nt + 12 + "px";
						}

						if (
							binding.value.getTou() == 1 &&
							binding.value.getAi() == 1 &&
							binding.value.getScrean() == 1 &&
							type == "necklace"
						) {
							_screan.style.left = nl + 74 + "px";
							_screan.style.top = nt + 12 + "px";
							_ai.style.left = nl + 74 + "px";
							_ai.style.top = nt + 11 + "px";
							_tou.style.left = nl + 114 + "px";
							_tou.style.top = nt - 62 + "px";
						}

						if (
							binding.value.getTou() == 1 &&
							binding.value.getAi() == 1 &&
							binding.value.getScrean() == 1 &&
							binding.value.getearphoneJack() == 1 &&
							type == "necklace"
						) {
							_screan.style.left = nl + 74 + "px";
							_screan.style.top = nt + 12 + "px";
							_ai.style.left = nl + 74 + "px";
							_ai.style.top = nt + 11 + "px";
							_tou.style.left = nl + 114 + "px";
							_tou.style.top = nt - 62 + "px";
							_earphoneJack.style.left = nl + 189 + "px";
							_earphoneJack.style.top = nt + 80 + "px";
						}

						if (
							binding.value.getTou() == 1 &&
							binding.value.getAi() == 1 &&
							binding.value.getScrean() == 1 &&
							binding.value.getearphoneJack() == 1 &&
							binding.value.getearphone() == 1 &&
							type == "necklace"
						) {
							_screan.style.left = nl + 74 + "px";
							_screan.style.top = nt + 12 + "px";
							_ai.style.left = nl + 74 + "px";
							_ai.style.top = nt + 11 + "px";
							_tou.style.left = nl + 114 + "px";
							_tou.style.top = nt - 62 + "px";
							_earphoneJack.style.left = nl + 189 + "px";
							_earphoneJack.style.top = nt + 80 + "px";
							_earphone.style.left = nl + 189 + "px";
							_earphone.style.top = nt + 118 + "px";
						}
					}
				},
			},
		},
		methods: {
			go() {
				this.$router.push("/blockly");
			},
			setPan(value) {
				this.panThing = value;
			},
			getPan() {
				return this.panThing;
			},
			setTou(value) {
				this.tou = value;
			},
			getTou() {
				return this.tou;
			},
			setAi(value) {
				this.ai = value;
			},
			getAi() {
				return this.ai;
			},
			setScrean(value) {
				this.screan = value;
			},
			getScrean() {
				return this.screan;
			},
			setearphoneJack(value) {
				this.earphoneJack = value;
			},
			getearphoneJack() {
				return this.earphoneJack;
			},
			setearphone(value) {
				this.earphone = value;
			},
			getearphone() {
				return this.earphone;
			},
		},
	};
</script>

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

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

	#screan > img,
	#ai > img,
	#tou > img,
	#necklace > img,
	#earphoneJack > img,
	#earphone > 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: 12%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 4;
	}

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

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

	#necklace {
		width: 300px;
		position: absolute;
		top: 50%;
		left: 47%;
		transform: translateY(-50%);
		z-index: 1;
	}

	#earphoneJack {
		width: 30px;
		position: absolute;
		top: 60%;
		left: 66%;
		transform: translateY(-50%);
		z-index: 2;
	}

	#earphone {
		width: 350px;
		position: absolute;
		top: 50%;
		left: 71%;
		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>