cocoroboBlockly/src/components/robot.vue

<template>
	<div style="height: 98%;background: #fff;width: 98%;margin: 10px auto;">
		<div class="tip">
			<img src="../assets/img/robot/tips.png" alt="" />
		</div>
		<div class="img">
			<div
				id="duobi"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/duobi.png" alt="" />
			</div>
			<div
				id="duobiBig"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/duobiBig.png" alt="" />
			</div>
			<div
				id="dOne"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dOne.png" alt="" />
			</div>
			<div
				id="dTwo"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dTwo.png" alt="" />
			</div>
			<div
				id="dThree"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dThree.png" alt="" />
			</div>
			<div
				id="dFour"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dFour.png" alt="" />
			</div>
			<div
				id="dFive"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dFive.png" alt="" />
			</div>
			<div
				id="dSix"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dSix.png" alt="" />
			</div>
			<div
				id="dSeven"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dSeven.png" alt="" />
			</div>
			<div
				id="dEight"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dEight.png" alt="" />
			</div>
			<div
				id="dNight"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/dNight.png" alt="" />
			</div>
			<div
				id="bottom"
				v-show="eighteen != 1"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/door/bottom.png" alt="" />
			</div>
			<div
				id="screan"
				v-show="eighteen != 1"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/door/screan.png" alt="" />
			</div>
			<div
				id="tou"
				v-show="eighteen != 1"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/door/tou.png" alt="" />
			</div>
			<div
				id="ai"
				v-show="eighteen != 1"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/door/ai.png" alt="" />
			</div>
			<div
				v-show="eighteen == 1"
				id="all"
				v-drag="{
					go,
					setPan,
					getPan,
					setOne,
					getOne,
					setTwo,
					getTwo,
					setThree,
					getThree,
					setFour,
					getFour,
					setFive,
					getFive,
					setSix,
					getSix,
					setSeven,
					getSeven,
					setEight,
					getEight,
					setNight,
					getNight,
					setTen,
					getTen,
					setEleven,
					getEleven,
					setTwelve,
					getTwelve,
					setThirteen,
					getThirteen,
					setFourteen,
					getFourteen,
					setFifteen,
					getFifteen,
					setSixteen,
					getSixteen,
					setSeventeen,
					getSeventeen,
					setEighteen,
					getEighteen,
					setNighteen,
					getNighteen,
				}"
			>
				<img src="../assets/img/robot/allScrean.png" alt="" />
			</div>
		</div>
		<div class="right"><img src="../assets/img/right.png" alt="" /></div>
		<div class="downLine">
			<img src="../assets/img/robot/downLine.png" alt="" />
		</div>
		<div class="upLine">
			<img src="../assets/img/robot/upLine.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,
				panThing: "",
				one: "",
				two: "",
				three: "",
				four: "",
				five: "",
				six: "",
				seven: "",
				eight: "",
				night: "",
				ten: "",
				eleven: "",
				twelve: "",
				thirteen: "",
				fourteen: "",
				fifteen: "",
				sixteen: "",
				seventeen: "",
				eighteen: "",
				nighteen: "",
			};
		},
		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 dv = document.getElementById("duobi");
					var dv1 = document.getElementById("duobiBig");
					var dv2 = document.getElementById("dOne");
					var dv3 = document.getElementById("dTwo");
					var dv4 = document.getElementById("dThree");
					var dv5 = document.getElementById("dFour");
					var dv6 = document.getElementById("dFive");
					var dv7 = document.getElementById("dSix");
					var dv8 = document.getElementById("dSeven");
					var dv9 = document.getElementById("dEight");
					var dv10 = document.getElementById("dNight");
					var dv11 = document.getElementById("bottom");
					var dv12 = document.getElementById("screan");
					var dv13 = document.getElementById("tou");
					var dv14 = document.getElementById("ai");
					var allOne = document.getElementById("all");
					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 == "duobi") {
								binding.value.setPan("duobi");
								moveP(nl, nt, 1);
							}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

						pan();
					};
					function pan() {
						var btn = document.getElementsByClassName("button")[0];
						var right = document.getElementsByClassName("right")[0];
						var downLine = document.getElementsByClassName("downLine")[0];
						var upLine = document.getElementsByClassName("upLine")[0];

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

						if (
							binding.value.getOne() == 1 &&
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							binding.value.getFour() == 1 &&
							binding.value.getFive() == 1 &&
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							binding.value.getNight() == 1 &&
							binding.value.getTen() == 1 &&
							binding.value.getEighteen() == 1
						) {
							btn.className = "button dark";
							btn.onclick = function () {
								binding.value.go();
							};
							right.style.display = "block";
							right.style.left = policeL + 435 + "px";
							right.style.top = policeT + 65 + "px";
							downLine.style.display = "block";
							downLine.style.left = policeL + 133 + "px";
							downLine.style.top = policeT - 30 + "px";
							upLine.style.display = "block";
							upLine.style.left = policeL + 249 + "px";
							upLine.style.top = policeT - 235 + "px";
						} else {
							btn.className = "button";
							btn.onclick = null;
							right.style.display = "none";
							downLine.style.display = "none";
							upLine.style.display = "none";
						}
					}
					function st(nl, nt, type) {
						var dbL = dv.offsetLeft;
						var dbT = dv.offsetTop;

						var dbBL = dv1.offsetLeft;
						var dbBT = dv1.offsetTop;

						var oneL = dv2.offsetLeft;
						var oneT = dv2.offsetTop;

						var twoL = dv3.offsetLeft;
						var twoT = dv3.offsetTop;

						var threeL = dv4.offsetLeft;
						var threeT = dv4.offsetTop;

						var fourL = dv5.offsetLeft;
						var fourT = dv5.offsetTop;

						var fiveL = dv6.offsetLeft;
						var fiveT = dv6.offsetTop;

						var sixL = dv7.offsetLeft;
						var sixT = dv7.offsetTop;

						var sevenL = dv8.offsetLeft;
						var sevenT = dv8.offsetTop;

						var eightL = dv9.offsetLeft;
						var eightT = dv9.offsetTop;

						var nightL = dv10.offsetLeft;
						var nightT = dv10.offsetTop;

						var tenL = dv11.offsetLeft;
						var tenT = dv11.offsetTop;

						var elevenL = dv12.offsetLeft;
						var elevenT = dv12.offsetTop;

						var twelveL = dv13.offsetLeft;
						var twelveT = dv13.offsetTop;

						var thirteenL = dv14.offsetLeft;
						var thirteenT = dv14.offsetTop;

						var allL = allOne.offsetLeft;
						var allT = allOne.offsetTop;

						var firstL = threeL - dbBL;
						var firstT = threeT - dbBT;

						var secondL = threeL - oneL;
						var secondT = threeT - oneT;

						var thirdL = threeL - twoL;
						var thirdT = threeT - twoT;

						var fourthL = sixL - nightL;
						var fourthT = sixT - nightT;

						var fivethL = threeL - sixL;
						var fivethT = threeT - sixT;

						var sixthL = fiveL - dbL;
						var sixthT = fiveT - dbT;

						var seventhL = sevenL - eightL;
						var seventhT = sevenT - eightT;

						var eighthL = fiveL - sevenL;
						var eighthT = fiveT - sevenT;

						var nightL = sixL - fiveL;
						var nightT = sixT - fiveT;

						var tenthL = threeL - fourL;
						var tenthT = threeT - fourT;

						var eleventhL = tenL - thirteenL;
						var eleventhT = tenT - thirteenT;

						var twelvethL = thirteenL - tenL;
						var twelvethT = thirteenT - tenT;

						var thirteenthL = elevenL - twelveL;
						var thirteenthT = elevenT - twelveT;

						var fourteenthL = thirteenL - elevenL;
						var fourteenthT = thirteenT - elevenT;

						var fifteenthL = elevenL - tenL;
						var fifteenthT = elevenT - tenT;

						var sixteenthL = tenL - elevenL;
						var sixteenthT = tenT - elevenT;

						var seventeenthL = elevenL - thirteenL;
						var seventeenthT = elevenT - thirteenT;

						var eighteenthL = fourL - elevenL;
						var eighteenthT = fourT - elevenT;
						if (
							-175 < firstL &&
							firstL < -22 &&
							42 < firstT &&
							firstT < 106 &&
							type == 2
						) {
							dv1.style.left = threeL + 96 + "px";
							dv1.style.top = threeT - 77 + "px";
							binding.value.setOne(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 2) {
							binding.value.setOne(0);
						}
						if (
							-26 < secondL &&
							secondL < 2 &&
							-176 < secondT &&
							secondT < 10 &&
							type == 3
						) {
							dv2.style.left = threeL + 12 + "px";
							dv2.style.top = threeT + 82 + "px";
							binding.value.setTwo(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 3) {
							binding.value.setTwo(0);
						}
						if (
							-335 < thirdL &&
							thirdL < -303 &&
							-237 < thirdT &&
							thirdT < 71 &&
							type == 4
						) {
							dv3.style.left = threeL + 322 + "px";
							dv3.style.top = threeT + 18 + "px";
							binding.value.setThree(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 4) {
							binding.value.setThree(0);
						}
						if (
							-35 < fourthL &&
							fourthL < 69 &&
							-8 < fourthT &&
							fourthT < 8 &&
							type == 11
						) {
							dv10.style.left = sixL - 7 + "px";
							dv10.style.top = sixT - 1 + "px";
							binding.value.setFour(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 11) {
							binding.value.setFour(0);
						}
						if (
							-152 < fivethL &&
							fivethL < 394 &&
							34 < fivethT &&
							fivethT < 103 &&
							type == 8 &&
							binding.value.getOne() == 1 &&
							binding.value.getFour() == 1
						) {
							dv7.style.left = threeL + 122 + "px";
							dv7.style.top = threeT - 77 + "px";
							dv10.style.left = threeL + 115 + "px";
							dv10.style.top = threeT - 78 + "px";
							binding.value.setFive(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 8) {
							binding.value.setFive(0);
						}
						if (
							-163 < sixthL &&
							sixthL < -40 &&
							-16 < sixthT &&
							sixthT < 36 &&
							type == 1
						) {
							dv.style.left = fiveL + 100 + "px";
							dv.style.top = fiveT - 12 + "px";
							binding.value.setSix(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 1) {
							binding.value.setSix(0);
						}
						if (
							-21 < seventhL &&
							seventhL < 4 &&
							-32 < seventhT &&
							seventhT < -8 &&
							type == 10
						) {
							dv9.style.left = sevenL + 12 + "px";
							dv9.style.top = sevenT + 18 + "px";
							binding.value.setSeven(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 10) {
							binding.value.setSeven(0);
						}
						if (
							-112 < eighthL &&
							eighthL < -91 &&
							22 < eighthT &&
							eighthT < 42 &&
							type == 9 &&
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1
						) {
							dv8.style.left = fiveL + 102 + "px";
							dv8.style.top = fiveT - 27 + "px";
							dv9.style.left = fiveL + 114 + "px";
							dv9.style.top = fiveT - 11 + "px";
							binding.value.setEight(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 9) {
							binding.value.setEight(0);
						}
						if (
							-427 < nightL &&
							nightL < -375 &&
							-22 < nightT &&
							nightT < 4 &&
							type == 7 &&
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1
						) {
							dv6.style.left = sixL + 392 + "px";
							dv6.style.top = sixT + 10 + "px";
							dv.style.left = sixL + 491 + "px";
							dv.style.top = sixT - 3 + "px";
							dv8.style.left = sixL + 493 + "px";
							dv8.style.top = sixT - 18 + "px";
							dv9.style.left = sixL + 505 + "px";
							dv9.style.top = sixT - 2 + "px";
							binding.value.setNight(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 7) {
							binding.value.setNight(0);
						}
						if (
							-306 < tenthL &&
							tenthL < 289 &&
							-85 < tenthT &&
							tenthT < 177 &&
							binding.value.getFour() == 1 &&
							binding.value.getOne() == 1 &&
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							binding.value.getFive() == 1 &&
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							binding.value.getNight() == 1 &&
							type == 6
						) {
							dv5.style.left = threeL + 0 + "px";
							dv5.style.top = threeT + 0 + "px";
							binding.value.setTen(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 6) {
							binding.value.setTen(0);
						}
						if (
							-111 < eleventhL &&
							eleventhL < 131 &&
							-109 < eleventhT &&
							eleventhT < 109 &&
							type == 15
						) {
							dv14.style.left = tenL + 0 + "px";
							dv14.style.top = tenT - 4 + "px";
							binding.value.setEleven(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 15) {
							binding.value.setEleven(0);
						}
						if (
							-115 < twelvethL &&
							twelvethL < 124 &&
							-115 < twelvethT &&
							twelvethT < 113 &&
							type == 12
						) {
							dv11.style.left = thirteenL + 0 + "px";
							dv11.style.top = thirteenT + 3 + "px";
							binding.value.setTwelve(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 12) {
							binding.value.setTwelve(0);
						}
						if (
							-80 < thirteenthL &&
							thirteenthL < -9 &&
							16 < thirteenthT &&
							thirteenthT < 117 &&
							type == 14
						) {
							dv13.style.left = elevenL + 45 + "px";
							dv13.style.top = elevenT - 72 + "px";
							binding.value.setThirteen(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 14) {
							binding.value.setThirteen(0);
						}
						if (
							-124 < fourteenthL &&
							fourteenthL < 108 &&
							-102 < fourteenthT &&
							fourteenthT < 102 &&
							type == 13
						) {
							dv12.style.left = thirteenL + 0 + "px";
							dv12.style.top = thirteenT + 6 + "px";
							if (binding.value.getThirteen() == 1) {
								dv13.style.left = thirteenL + 0 + 45 + "px";
								dv13.style.top = thirteenT + 6 - 72 + "px";
							}
							binding.value.setFourteen(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 13) {
							binding.value.setFourteen(0);
						}
						if (
							-122 < fifteenthL &&
							fifteenthL < 126 &&
							-100 < fifteenthT &&
							fifteenthT < 96 &&
							type == 12
						) {
							dv11.style.left = elevenL + 0 + "px";
							dv11.style.top = elevenT - 3 + "px";
							if (binding.value.getThirteen() == 1) {
								dv13.style.left = elevenL + 0 + 45 + "px";
								dv13.style.top = elevenT - 0 - 72 + "px";
							}
							binding.value.setFifteen(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 12) {
							binding.value.setFifteen(0);
						}
						if (
							-120 < sixteenthL &&
							sixteenthL < 120 &&
							-99 < sixteenthT &&
							sixteenthT < 99 &&
							type == 13
						) {
							dv12.style.left = tenL + 0 + "px";
							dv12.style.top = tenT + 2 + "px";
							if (binding.value.getThirteen() == 1) {
								dv13.style.left = tenL + 0 + 45 + "px";
								dv13.style.top = tenT + 2 - 72 + "px";
							}
							binding.value.setSixteen(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 13) {
							binding.value.setSixteen(0);
						}
						if (
							-113 < seventeenthL &&
							seventeenthL < 120 &&
							-96 < seventeenthT &&
							seventeenthT < 106 &&
							type == 15
						) {
							dv14.style.left = elevenL + 0 + "px";
							dv14.style.top = elevenT - 5 + "px";
							if (binding.value.getThirteen() == 1) {
								dv13.style.left = elevenL + 0 + 45 + "px";
								dv13.style.top = elevenT - 0 - 72 + "px";
							}
							binding.value.setSeventeen(1); //设置第一个j2可以跟着j1一起动
							playMusic();
						} else if (type == 15) {
							binding.value.setSeventeen(0);
						}
						if (
							-314 < eighteenthL &&
							eighteenthL < -88 &&
							-15 < eighteenthT &&
							eighteenthT < 205 &&
							((eleventhL == 0 && eleventhT == 2) ||
								(twelvethL == 0 && twelvethT == -2)) &&
							binding.value.getThirteen() == 1 &&
							(binding.value.getFourteen() == 1 ||
								binding.value.getSeventeen() == 1) &&
							(binding.value.getSixteen() == 1 || binding.value.getFifteen() == 1)
						) {
							binding.value.setEighteen(1); //设置第一个j2可以跟着j1一起动
							all.style.left = fourL + 250 + "px";
							all.style.top = fourT - 66 + "px";
							playMusic();
						}
					}
					function playMusic() {
						musicC.play();
					}

					function moveP(nl, nt, type) {
						var allL = allOne.offsetLeft;
						var allT = allOne.offsetTop;
						if (binding.value.getFour() == 1 && type == 8) {
							dv10.style.left = nl - 7 + "px";
							dv10.style.top = nt - 1 + "px";
						}
						if (binding.value.getOne() == 1 && type == 5) {
							dv1.style.left = nl + 96 + "px";
							dv1.style.top = nt - 77 + "px";
						}
						if (
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							type == 5
						) {
							dv2.style.left = nl + 12 + "px";
							dv2.style.top = nt + 82 + "px";
							dv3.style.left = nl + 322 + "px";
							dv3.style.top = nt + 18 + "px";
						}
						if (
							binding.value.getFour() == 1 &&
							binding.value.getOne() == 1 &&
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							binding.value.getFive() == 1 &&
							type == 5
						) {
							dv2.style.left = nl + 12 + "px";
							dv2.style.top = nt + 82 + "px";
							dv3.style.left = nl + 322 + "px";
							dv3.style.top = nt + 18 + "px";
							dv7.style.left = nl + 122 + "px";
							dv7.style.top = nt - 77 + "px";
							dv10.style.left = nl + 115 + "px";
							dv10.style.top = nt - 78 + "px";
						}
						if (
							binding.value.getFour() == 1 &&
							binding.value.getOne() == 1 &&
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							binding.value.getFive() == 1 &&
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							binding.value.getNight() == 1 &&
							type == 5
						) {
							dv1.style.left = nl + 96 + "px";
							dv1.style.top = nt - 77 + "px";
							dv2.style.left = nl + 12 + "px";
							dv2.style.top = nt + 82 + "px";
							dv3.style.left = nl + 322 + "px";
							dv3.style.top = nt + 18 + "px";
							dv6.style.left = nl + 514 + "px";
							dv6.style.top = nt - 67 + "px";
							dv7.style.left = nl + 122 + "px";
							dv7.style.top = nt - 77 + "px";
							dv.style.left = nl + 613 + "px";
							dv.style.top = nt - 80 + "px";
							dv8.style.left = nl + 615 + "px";
							dv8.style.top = nt - 95 + "px";
							dv9.style.left = nl + 627 + "px";
							dv9.style.top = nt - 79 + "px";
							dv10.style.left = nl + 115 + "px";
							dv10.style.top = nt - 78 + "px";
						}
						if (
							binding.value.getFour() == 1 &&
							binding.value.getOne() == 1 &&
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							binding.value.getFive() == 1 &&
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							binding.value.getNight() == 1 &&
							binding.value.getTen() == 1 &&
							type == 6
						) {
							dv1.style.left = nl + 96 + "px";
							dv1.style.top = nt - 77 + "px";
							dv2.style.left = nl + 12 + "px";
							dv2.style.top = nt + 82 + "px";
							dv3.style.left = nl + 322 + "px";
							dv3.style.top = nt + 18 + "px";
							dv4.style.left = nl + 0 + "px";
							dv4.style.top = nt + 0 + "px";
							dv6.style.left = nl + 514 + "px";
							dv6.style.top = nt - 67 + "px";
							dv7.style.left = nl + 122 + "px";
							dv7.style.top = nt - 77 + "px";
							dv.style.left = nl + 613 + "px";
							dv.style.top = nt - 80 + "px";
							dv8.style.left = nl + 615 + "px";
							dv8.style.top = nt - 95 + "px";
							dv9.style.left = nl + 627 + "px";
							dv9.style.top = nt - 79 + "px";
							dv10.style.left = nl + 115 + "px";
							dv10.style.top = nt - 78 + "px";
						}
						if (binding.value.getSeven() == 1 && type == 9) {
							dv9.style.left = nl + 12 + "px";
							dv9.style.top = nt + 18 + "px";
						}
						if (binding.value.getSix() == 1 && type == 7) {
							dv.style.left = nl + 100 + "px";
							dv.style.top = nt - 12 + "px";
						}
						if (
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							type == 7
						) {
							dv.style.left = nl + 100 + "px";
							dv.style.top = nt - 12 + "px";
							dv8.style.left = nl + 102 + "px";
							dv8.style.top = nt - 27 + "px";
							dv9.style.left = nl + 114 + "px";
							dv9.style.top = nt - 11 + "px";
						}
						if (binding.value.getThirteen() == 1 && type == 13) {
							dv13.style.left = nl + 45 + "px";
							dv13.style.top = nt - 72 + "px";
						}
						if (binding.value.getEleven() == 1 && type == 15) {
							dv11.style.left = nl + 0 + "px";
							dv11.style.top = nt + 3 + "px";
						}
						if (binding.value.getTwelve() == 1 && type == 15) {
							dv11.style.left = nl + 0 + "px";
							dv11.style.top = nt + 3 + "px";
						}
						if (binding.value.getFourteen() == 1 && type == 13) {
							dv14.style.left = nl + 0 + "px";
							dv14.style.top = nt - 5 + "px";
						}
						if (binding.value.getSeventeen() == 1 && type == 13) {
							dv14.style.left = nl + 0 + "px";
							dv14.style.top = nt - 5 + "px";
						}
						if (binding.value.getFifteen() == 1 && type == 13) {
							dv11.style.left = nl + 0 + "px";
							dv11.style.top = nt - 3 + "px";
						}
						if (binding.value.getSixteen() == 1 && type == 13) {
							dv11.style.left = nl + 0 + "px";
							dv11.style.top = nt - 3 + "px";
						}
						if (
							binding.value.getFour() == 1 &&
							binding.value.getOne() == 1 &&
							binding.value.getTwo() == 1 &&
							binding.value.getThree() == 1 &&
							binding.value.getFive() == 1 &&
							binding.value.getSix() == 1 &&
							binding.value.getSeven() == 1 &&
							binding.value.getEight() == 1 &&
							binding.value.getNight() == 1 &&
							binding.value.getTen() == 1 &&
							binding.value.getEighteen() == 1 &&
							type == 6
						) {
							dv1.style.left = nl + 96 + "px";
							dv1.style.top = nt - 77 + "px";
							dv2.style.left = nl + 12 + "px";
							dv2.style.top = nt + 82 + "px";
							dv3.style.left = nl + 322 + "px";
							dv3.style.top = nt + 18 + "px";
							dv4.style.left = nl + 0 + "px";
							dv4.style.top = nt + 0 + "px";
							dv6.style.left = nl + 514 + "px";
							dv6.style.top = nt - 67 + "px";
							dv7.style.left = nl + 122 + "px";
							dv7.style.top = nt - 77 + "px";
							dv.style.left = nl + 613 + "px";
							dv.style.top = nt - 80 + "px";
							dv8.style.left = nl + 615 + "px";
							dv8.style.top = nt - 95 + "px";
							dv9.style.left = nl + 627 + "px";
							dv9.style.top = nt - 79 + "px";
							dv10.style.left = nl + 115 + "px";
							dv10.style.top = nt - 78 + "px";
							all.style.left = nl + 250 + "px";
							all.style.top = nt - 66 + "px";
						}
						if (
							(640 < allL || 640 > allL) &&
							(448 < allT || 448 > allT) &&
							binding.value.getEighteen() == 1 &&
							type == 16
						) {
							binding.value.setEighteen(0);
							dv13.style.left = nl + 45 + "px";
							dv13.style.top = nt - 69 + "px";
							dv11.style.left = nl + 0 + "px";
							dv11.style.top = nt + 3 + "px";
							dv12.style.left = nl + 0 + "px";
							dv12.style.top = nt + 3 + "px";
							dv14.style.left = nl + 0 + "px";
							dv14.style.top = nt - 5 + "px";
						}
					}
				},
			},
		},
		methods: {
			go() {
				this.$router.push("/blockly");
			},
			setPan(value) {
				this.panThing = value;
			},
			getPan() {
				return this.panThing;
			},
			setOne(value) {
				this.one = value;
			},
			getOne() {
				return this.one;
			},
			setTwo(value) {
				this.two = value;
			},
			getTwo() {
				return this.two;
			},
			setThree(value) {
				this.three = value;
			},
			getThree() {
				return this.three;
			},
			setFour(value) {
				this.four = value;
			},
			getFour() {
				return this.four;
			},
			setFive(value) {
				this.five = value;
			},
			getFive() {
				return this.five;
			},
			setSix(value) {
				this.six = value;
			},
			getSix() {
				return this.six;
			},
			setSeven(value) {
				this.seven = value;
			},
			getSeven() {
				return this.seven;
			},
			setEight(value) {
				this.eight = value;
			},
			getEight() {
				return this.eight;
			},
			setNight(value) {
				this.night = value;
			},
			getNight() {
				return this.night;
			},
			setTen(value) {
				this.ten = value;
			},
			getTen() {
				return this.ten;
			},
			setEleven(value) {
				this.eleven = value;
			},
			getEleven() {
				return this.eleven;
			},
			setTwelve(value) {
				this.twelve = value;
			},
			getTwelve() {
				return this.twelve;
			},
			setThirteen(value) {
				this.thirteen = value;
			},
			getThirteen() {
				return this.thirteen;
			},
			setFourteen(value) {
				this.fourteen = value;
			},
			getFourteen() {
				return this.fourteen;
			},
			setFifteen(value) {
				this.fifteen = value;
			},
			getFifteen() {
				return this.fifteen;
			},
			setSixteen(value) {
				this.sixteen = value;
			},
			getSixteen() {
				return this.sixteen;
			},
			setSeventeen(value) {
				this.seventeen = value;
			},
			getSeventeen() {
				return this.seventeen;
			},
			setEighteen(value) {
				this.eighteen = value;
			},
			getEighteen() {
				return this.eighteen;
			},
			setNighteen(value) {
				this.nighteen = value;
			},
			getNighteen() {
				return this.nighteen;
			},
		},
	};
</script>

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

	.tip {
		margin: 25px 0 30px 20px;
		width: 300px;
	}
	.tip>img,
	#screan > img,
	#tou > img,
	#ai > img,
	#duobi > img,
	#duobiBig > img,
	#dOne > img,
	#dTwo > img,
	#dThree > img,
	#dFour > img,
	#dFive > img,
	#dSix > img,
	#dSeven > img,
	#dEight > img,
	#dNight > img,
	#bottom > img,
	.right > img,
	.downLine > img,
	.upLine > img {
		width: 100%;
		user-select: none;
	}

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

	#duobi {
		width: 130px;
		position: absolute;
		left: 18%;
		top: 30%;
		transform: translateY(-50%);
		z-index: 8;
	}

	#duobiBig {
		width: 165px;
		position: absolute;
		left: 17%;
		top: 36%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		z-index: 6;
	}

	#dOne {
		width: 35px;
		position: absolute;
		left: 18%;
		top: 58%;
		transform: translateY(-50%);
		z-index: 1;
	}

	#dTwo {
		width: 40px;
		position: absolute;
		left: 21%;
		top: 55%;
		transform: translateY(-50%);
		z-index: 1;
	}

	#dThree {
		width: 370px;
		position: absolute;
		left: 26%;
		top: 63%;
		transform: translateY(-50%);
		z-index: 0;
	}

	#dFour {
		width: 370px;
		position: absolute;
		left: 26%;
		top: 36%;
		transform: translateY(-50%);
		z-index: 10;
	}

	#dFive {
		width: 370px;
		position: absolute;
		left: 46%;
		top: 53%;
		transform: translateY(-50%);
		z-index: 7;
	}

	#dSix {
		width: 450px;
		position: absolute;
		left: 46%;
		top: 69%;
		transform: translateY(-50%);
		z-index: 6;
	}

	#dSeven {
		width: 280px;
		position: absolute;
		left: 48%;
		top: 33%;
		transform: translateY(-50%);
		z-index: 9;
	}

	#dEight {
		width: 80px;
		position: absolute;
		left: 62%;
		top: 45%;
		transform: translateY(-50%);
		z-index: 9;
	}

	#dNight {
		width: 92px;
		position: absolute;
		left: 68%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 6;
	}

	#bottom {
		width: 150px;
		position: absolute;
		left: 75%;
		top: 51%;
		transform: translateY(-50%);
		z-index: 11;
	}

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

	#all {
		width: 180px;
		position: absolute;
		left: 75%;
		top: 69%;
		transform: translateY(-50%);
		z-index: 15;
	}

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

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

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

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

	.downLine {
		width: 150px;
		position: absolute;
		left: 55%;
		top: 12%;
		z-index: 99;
		display: none;
	}

	.upLine {
		width: 400px;
		position: absolute;
		left: 30%;
		top: 10%;
		z-index: 99;
		display: none;
	}

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