|
|
@@ -0,0 +1,945 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="tip">
|
|
|
+ <img src="../assets/img/shop/tips.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="img">
|
|
|
+ <div
|
|
|
+ id="ai"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/ai.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="light1"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/light1.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="line"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/line.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="light2"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/light2.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G1"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G1.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G5"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G5.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G2"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G2.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G4"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G4.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G3"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G3.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,
|
|
|
+ panThing: "",
|
|
|
+ ai: "",
|
|
|
+ G5: "",
|
|
|
+ G4: "",
|
|
|
+ G2: "",
|
|
|
+ G3: "",
|
|
|
+ Light1: "",
|
|
|
+ Light2: "",
|
|
|
+ Line: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 _ai = document.getElementById("ai");
|
|
|
+ var _G1 = document.getElementById("G1");
|
|
|
+ var _G5 = document.getElementById("G5");
|
|
|
+ var _G4 = document.getElementById("G4");
|
|
|
+ var _G2 = document.getElementById("G2");
|
|
|
+ var _G3 = document.getElementById("G3");
|
|
|
+ var _light1 = document.getElementById("light1");
|
|
|
+ var _light2 = document.getElementById("light2");
|
|
|
+ var _line = document.getElementById("line");
|
|
|
+
|
|
|
+ //鼠标按下事件
|
|
|
+ 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 == "ai") {
|
|
|
+ binding.value.setPan("ai");
|
|
|
+ moveP(nl, nt, "ai");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "G1") {
|
|
|
+ binding.value.setPan("G1");
|
|
|
+ moveP(nl, nt, "G1");
|
|
|
+ }
|
|
|
+ if (el.id == "G5") {
|
|
|
+ binding.value.setPan("G5");
|
|
|
+ moveP(nl, nt, "G5");
|
|
|
+ }
|
|
|
+ if (el.id == "G4") {
|
|
|
+ binding.value.setPan("G4");
|
|
|
+ moveP(nl, nt, "G4");
|
|
|
+ }
|
|
|
+ if (el.id == "G2") {
|
|
|
+ binding.value.setPan("G2");
|
|
|
+ moveP(nl, nt, "G2");
|
|
|
+ }
|
|
|
+ if (el.id == "G3") {
|
|
|
+ binding.value.setPan("G3");
|
|
|
+ moveP(nl, nt, "G3");
|
|
|
+ }
|
|
|
+ if (el.id == "light1") {
|
|
|
+ binding.value.setPan("light1");
|
|
|
+ moveP(nl, nt, "light1");
|
|
|
+ }
|
|
|
+ if (el.id == "light2") {
|
|
|
+ binding.value.setPan("light2");
|
|
|
+ moveP(nl, nt, "light2");
|
|
|
+ }
|
|
|
+ if (el.id == "line") {
|
|
|
+ binding.value.setPan("line");
|
|
|
+ moveP(nl, nt, "line");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ //鼠标抬起事件
|
|
|
+ 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() == "ai") {
|
|
|
+ st(nl, nt, "ai");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "G1") {
|
|
|
+ st(nl, nt, "G1");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "G5") {
|
|
|
+ st(nl, nt, "G5");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "G4") {
|
|
|
+ st(nl, nt, "G4");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "G2") {
|
|
|
+ st(nl, nt, "G2");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "G3") {
|
|
|
+ st(nl, nt, "G3");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "light1") {
|
|
|
+ st(nl, nt, "light1");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "light2") {
|
|
|
+ st(nl, nt, "light2");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "line") {
|
|
|
+ st(nl, nt, "line");
|
|
|
+ }
|
|
|
+ pan();
|
|
|
+ };
|
|
|
+ function pan() {
|
|
|
+ var policeL = _G1.offsetLeft;
|
|
|
+ var policeT = _G1.offsetTop;
|
|
|
+
|
|
|
+ var btn = document.getElementsByClassName("button")[0];
|
|
|
+ var right = document.getElementsByClassName("right")[0];
|
|
|
+
|
|
|
+ if (
|
|
|
+ binding.value.getAi() === 1 &&
|
|
|
+ binding.value.getG5() === 1 &&
|
|
|
+ binding.value.getG4() === 1 &&
|
|
|
+ binding.value.getG2() === 1 &&
|
|
|
+ binding.value.getG3() === 1 &&
|
|
|
+ ((binding.value.getLight1() === 1 &&
|
|
|
+ binding.value.getLight2() === 1) ||
|
|
|
+ (binding.value.getLight1() === 2 &&
|
|
|
+ binding.value.getLight2() === 2) ||
|
|
|
+ (binding.value.getLight1() === 2 &&
|
|
|
+ binding.value.getLight2() === 1) ||
|
|
|
+ (binding.value.getLight1() === 1 &&
|
|
|
+ binding.value.getLight2() === 1)) &&
|
|
|
+ binding.value.getLine() === 1
|
|
|
+ ) {
|
|
|
+ btn.className = "button dark";
|
|
|
+ btn.onclick = function () {
|
|
|
+ binding.value.go();
|
|
|
+ };
|
|
|
+ right.style.display = "block";
|
|
|
+ right.style.left = policeL + 300 + "px";
|
|
|
+ right.style.top = policeT + 35 + "px";
|
|
|
+ } else {
|
|
|
+ btn.className = "button";
|
|
|
+ btn.onclick = null;
|
|
|
+ right.style.display = "none";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function st(nl, nt, type) {
|
|
|
+ var _aiL = _ai.offsetLeft;
|
|
|
+ var _aiT = _ai.offsetTop;
|
|
|
+
|
|
|
+ var _G1L = _G1.offsetLeft;
|
|
|
+ var _G1T = _G1.offsetTop;
|
|
|
+
|
|
|
+ var _G5L = _G5.offsetLeft;
|
|
|
+ var _G5T = _G5.offsetTop;
|
|
|
+
|
|
|
+ var _G4L = _G4.offsetLeft;
|
|
|
+ var _G4T = _G4.offsetTop;
|
|
|
+
|
|
|
+ var _G2L = _G2.offsetLeft;
|
|
|
+ var _G2T = _G2.offsetTop;
|
|
|
+
|
|
|
+ var _G3L = _G3.offsetLeft;
|
|
|
+ var _G3T = _G3.offsetTop;
|
|
|
+
|
|
|
+ var _light1L = _light1.offsetLeft;
|
|
|
+ var _light1T = _light1.offsetTop;
|
|
|
+
|
|
|
+ var _light2L = _light2.offsetLeft;
|
|
|
+ var _light2T = _light2.offsetTop;
|
|
|
+
|
|
|
+ var _lineL = _line.offsetLeft;
|
|
|
+ var _lineT = _line.offsetTop;
|
|
|
+
|
|
|
+ var ag1L = _aiL - _G1L;
|
|
|
+ var ag1T = _aiT - _G1T;
|
|
|
+
|
|
|
+ var g5g1L = _G5L - _G1L;
|
|
|
+ var g5g1T = _G5T - _G1T;
|
|
|
+
|
|
|
+ var g4g1L = _G4L - _G1L;
|
|
|
+ var g4g1T = _G4T - _G1T;
|
|
|
+
|
|
|
+ var g2g1L = _G2L - _G1L;
|
|
|
+ var g2g1T = _G2T - _G1T;
|
|
|
+
|
|
|
+ var g3g1L = _G3L - _G1L;
|
|
|
+ var g3g1T = _G3T - _G1T;
|
|
|
+
|
|
|
+ var l1g1L = _light1L - _G1L;
|
|
|
+ var l1g1T = _light1T - _G1T;
|
|
|
+
|
|
|
+ var l2g1L = _light2L - _G1L;
|
|
|
+ var l2g1T = _light2T - _G1T;
|
|
|
+
|
|
|
+ var lg1L = _lineL - _G1L;
|
|
|
+ var lg1T = _lineT - _G1T;
|
|
|
+
|
|
|
+ var l1lL = _light1L - _lineL;
|
|
|
+ var l1lT = _light1T - _lineT;
|
|
|
+
|
|
|
+ var l2lL = _light2L - _lineL;
|
|
|
+ var l2lT = _light2T - _lineT;
|
|
|
+
|
|
|
+ if (
|
|
|
+ 22 < ag1L &&
|
|
|
+ ag1L < 62 &&
|
|
|
+ -156 < ag1T &&
|
|
|
+ ag1T < -116 &&
|
|
|
+ type == "ai"
|
|
|
+ ) {
|
|
|
+ _ai.style.left = _G1L + 42 + "px";
|
|
|
+ _ai.style.top = _G1T - 136 + "px";
|
|
|
+ binding.value.setAi(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "ai") {
|
|
|
+ binding.value.setAi(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -10 < g5g1L &&
|
|
|
+ g5g1L < 30 &&
|
|
|
+ -165 < g5g1T &&
|
|
|
+ g5g1T < -125 &&
|
|
|
+ type == "G5"
|
|
|
+ ) {
|
|
|
+ _G5.style.left = _G1L + 10 + "px";
|
|
|
+ _G5.style.top = _G1T - 145 + "px";
|
|
|
+ binding.value.setG5(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "G5") {
|
|
|
+ binding.value.setG5(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -20 < g4g1L &&
|
|
|
+ g4g1L < 20 &&
|
|
|
+ -58 < g4g1T &&
|
|
|
+ g4g1T < -18 &&
|
|
|
+ type == "G4"
|
|
|
+ ) {
|
|
|
+ _G4.style.left = _G1L + "px";
|
|
|
+ _G4.style.top = _G1T - 38 + "px";
|
|
|
+ binding.value.setG4(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "G4") {
|
|
|
+ binding.value.setG4(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ 95 < g2g1L &&
|
|
|
+ g2g1L < 135 &&
|
|
|
+ 84 < g2g1T &&
|
|
|
+ g2g1T < 124 &&
|
|
|
+ type == "G2"
|
|
|
+ ) {
|
|
|
+ _G2.style.left = _G1L + 115 + "px";
|
|
|
+ _G2.style.top = _G1T + 104 + "px";
|
|
|
+ binding.value.setG2(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "G2") {
|
|
|
+ binding.value.setG2(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ 24 < g3g1L &&
|
|
|
+ g3g1L < 64 &&
|
|
|
+ 87 < g3g1T &&
|
|
|
+ g3g1T < 127 &&
|
|
|
+ type == "G3" &&
|
|
|
+ binding.value.getG2() == 1
|
|
|
+ ) {
|
|
|
+ _G3.style.left = _G1L + 44 + "px";
|
|
|
+ _G3.style.top = _G1T + 107 + "px";
|
|
|
+ binding.value.setG3(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "G3") {
|
|
|
+ binding.value.setG3(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ 24 < l1g1L &&
|
|
|
+ l1g1L < 64 &&
|
|
|
+ -156 < l1g1T &&
|
|
|
+ l1g1T < -116 &&
|
|
|
+ type == "light1"
|
|
|
+ ) {
|
|
|
+ _light1.style.left = _G1L + 44 + "px";
|
|
|
+ _light1.style.top = _G1T - 136 + "px";
|
|
|
+ binding.value.setLight1(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (
|
|
|
+ 24 < l1lL &&
|
|
|
+ l1lL < 64 &&
|
|
|
+ 29 < l1lT &&
|
|
|
+ l1lT < 69 &&
|
|
|
+ type == "light1"
|
|
|
+ ) {
|
|
|
+ _light1.style.left = _lineL + 44 + "px";
|
|
|
+ _light1.style.top = _lineT + 49 + "px";
|
|
|
+ binding.value.setLight1(2);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "light1") {
|
|
|
+ binding.value.setLight1(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -38 < l2g1L &&
|
|
|
+ l2g1L < 8 &&
|
|
|
+ -171 < l2g1T &&
|
|
|
+ l2g1T < -131 &&
|
|
|
+ type == "light2"
|
|
|
+ ) {
|
|
|
+ _light2.style.left = _G1L - 18 + "px";
|
|
|
+ _light2.style.top = _G1T - 151 + "px";
|
|
|
+ binding.value.setLight2(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (
|
|
|
+ -38 < l2lL &&
|
|
|
+ l2lL < 2 &&
|
|
|
+ 14 < l2lT &&
|
|
|
+ l2lT < 54 &&
|
|
|
+ type == "light2"
|
|
|
+ ) {
|
|
|
+ _light2.style.left = _lineL - 18 + "px";
|
|
|
+ _light2.style.top = _lineT + 34 + "px";
|
|
|
+ binding.value.setLight2(2);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "light2") {
|
|
|
+ binding.value.setLight2(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -20 < lg1L &&
|
|
|
+ lg1L < 20 &&
|
|
|
+ -205 < lg1T &&
|
|
|
+ lg1T < -165 &&
|
|
|
+ type == "line" &&
|
|
|
+ (binding.value.getLight1() === 1 ||
|
|
|
+ binding.value.getLight2() === 1 ||
|
|
|
+ binding.value.getLight1() === 2 ||
|
|
|
+ binding.value.getLight2() === 2)
|
|
|
+ ) {
|
|
|
+ _line.style.left = _G1L + "px";
|
|
|
+ _line.style.top = _G1T - 185 + "px";
|
|
|
+ if (
|
|
|
+ binding.value.getLight1() === 2 ||
|
|
|
+ binding.value.getLight1() === 1
|
|
|
+ ) {
|
|
|
+ _light1.style.left = _G1L + 44 + "px";
|
|
|
+ _light1.style.top = _G1T - 136 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ binding.value.getLight2() === 2 ||
|
|
|
+ binding.value.getLight2() === 1
|
|
|
+ ) {
|
|
|
+ _light2.style.left = _G1L - 18 + "px";
|
|
|
+ _light2.style.top = _G1T - 151 + "px";
|
|
|
+ }
|
|
|
+ binding.value.setLine(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "line") {
|
|
|
+ binding.value.setLine(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function playMusic() {
|
|
|
+ musicC.play();
|
|
|
+ }
|
|
|
+
|
|
|
+ function moveP(nl, nt, type) {
|
|
|
+ if (binding.value.getAi() === 1 && type == "G1") {
|
|
|
+ _ai.style.left = nl + 42 + "px";
|
|
|
+ _ai.style.top = nt - 136 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getG5() === 1 && type == "G1") {
|
|
|
+ _G5.style.left = nl + 10 + "px";
|
|
|
+ _G5.style.top = nt - 145 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getG4() === 1 && type == "G1") {
|
|
|
+ _G4.style.left = nl + "px";
|
|
|
+ _G4.style.top = nt - 38 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getG2() === 1 && type == "G1") {
|
|
|
+ _G2.style.left = nl + 115 + "px";
|
|
|
+ _G2.style.top = nt + 104 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getG3() === 1 && type == "G1") {
|
|
|
+ _G3.style.left = nl + 44 + "px";
|
|
|
+ _G3.style.top = nt + 107 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ (binding.value.getLight1() === 1 ||
|
|
|
+ (binding.value.getLight1() === 2 &&
|
|
|
+ binding.value.getLine() === 1)) &&
|
|
|
+ type == "G1"
|
|
|
+ ) {
|
|
|
+ _light1.style.left = nl + 44 + "px";
|
|
|
+ _light1.style.top = nt - 136 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ (binding.value.getLight2() === 1 ||
|
|
|
+ (binding.value.getLight2() === 2 &&
|
|
|
+ binding.value.getLine() === 1)) &&
|
|
|
+ type == "G1"
|
|
|
+ ) {
|
|
|
+ _light2.style.left = nl - 18 + "px";
|
|
|
+ _light2.style.top = nt - 151 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getLine() === 1 && type == "G1") {
|
|
|
+ _line.style.left = nl + "px";
|
|
|
+ _line.style.top = nt - 185 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getLight1() === 2 && type == "line") {
|
|
|
+ _light1.style.left = nl + 44 + "px";
|
|
|
+ _light1.style.top = nt + 49 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getLight2() === 2 && type == "line") {
|
|
|
+ _light2.style.left = nl - 18 + "px";
|
|
|
+ _light2.style.top = nt + 34 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ binding.value.getLight1() === 1 &&
|
|
|
+ binding.value.getLine() === 1 &&
|
|
|
+ type == "line"
|
|
|
+ ) {
|
|
|
+ _light1.style.left = nl + 44 + "px";
|
|
|
+ _light1.style.top = nt + 49 + "px";
|
|
|
+ binding.value.setLight1(2);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ binding.value.getLight2() === 1 &&
|
|
|
+ binding.value.getLine() === 1 &&
|
|
|
+ type == "line"
|
|
|
+ ) {
|
|
|
+ _light2.style.left = nl - 18 + "px";
|
|
|
+ _light2.style.top = nt + 34 + "px";
|
|
|
+ binding.value.setLight2(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ go() {
|
|
|
+ this.$router.push("/blockly");
|
|
|
+ },
|
|
|
+ setPan(value) {
|
|
|
+ this.panThing = value;
|
|
|
+ },
|
|
|
+ getPan() {
|
|
|
+ return this.panThing;
|
|
|
+ },
|
|
|
+ setAi(value) {
|
|
|
+ this.ai = value;
|
|
|
+ },
|
|
|
+ getAi() {
|
|
|
+ return this.ai;
|
|
|
+ },
|
|
|
+ setG5(value) {
|
|
|
+ this.G5 = value;
|
|
|
+ },
|
|
|
+ getG5() {
|
|
|
+ return this.G5;
|
|
|
+ },
|
|
|
+ setG4(value) {
|
|
|
+ this.G4 = value;
|
|
|
+ },
|
|
|
+ getG4() {
|
|
|
+ return this.G4;
|
|
|
+ },
|
|
|
+ setG2(value) {
|
|
|
+ this.G2 = value;
|
|
|
+ },
|
|
|
+ getG2() {
|
|
|
+ return this.G2;
|
|
|
+ },
|
|
|
+ setG3(value) {
|
|
|
+ this.G3 = value;
|
|
|
+ },
|
|
|
+ getG3() {
|
|
|
+ return this.G3;
|
|
|
+ },
|
|
|
+ setLight1(value) {
|
|
|
+ this.Light1 = value;
|
|
|
+ },
|
|
|
+ getLight1() {
|
|
|
+ return this.Light1;
|
|
|
+ },
|
|
|
+ setLight2(value) {
|
|
|
+ this.Light2 = value;
|
|
|
+ },
|
|
|
+ getLight2() {
|
|
|
+ return this.Light2;
|
|
|
+ },
|
|
|
+ setLine(value) {
|
|
|
+ this.Line = value;
|
|
|
+ },
|
|
|
+ getLine() {
|
|
|
+ return this.Line;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+html,
|
|
|
+body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.tip {
|
|
|
+ margin: 25px 0 30px 20px;
|
|
|
+ width: 419px;
|
|
|
+}
|
|
|
+
|
|
|
+.right > img,
|
|
|
+#ai > img,
|
|
|
+#light1 > img,
|
|
|
+#line > img,
|
|
|
+#light2 > img,
|
|
|
+#G1 > img,
|
|
|
+#G5 > img,
|
|
|
+#G4 > img,
|
|
|
+#G2 > img,
|
|
|
+#G3 > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.img {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin: auto;
|
|
|
+ width: 70%;
|
|
|
+ /* position: relative; */
|
|
|
+}
|
|
|
+
|
|
|
+#ai {
|
|
|
+ width: 170px;
|
|
|
+ position: absolute;
|
|
|
+ top: 45%;
|
|
|
+ left: 20%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 5;
|
|
|
+}
|
|
|
+
|
|
|
+#light1 {
|
|
|
+ width: 165px;
|
|
|
+ position: absolute;
|
|
|
+ top: 65%;
|
|
|
+ left: 20%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 5;
|
|
|
+}
|
|
|
+#line {
|
|
|
+ width: 200px;
|
|
|
+ position: absolute;
|
|
|
+ top: 45%;
|
|
|
+ left: 19.2%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+#light2 {
|
|
|
+ width: 40px;
|
|
|
+ position: absolute;
|
|
|
+ left: 31%;
|
|
|
+ top: 64%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 6;
|
|
|
+}
|
|
|
+#G1 {
|
|
|
+ width: 235px;
|
|
|
+ position: absolute;
|
|
|
+ left: 38%;
|
|
|
+ top: 56%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 4;
|
|
|
+}
|
|
|
+#G5 {
|
|
|
+ width: 27px;
|
|
|
+ position: absolute;
|
|
|
+ left: 56%;
|
|
|
+ top: 58%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+}
|
|
|
+
|
|
|
+#G4 {
|
|
|
+ width: 240px;
|
|
|
+ position: absolute;
|
|
|
+ left: 55%;
|
|
|
+ top: 32%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+}
|
|
|
+#G2 {
|
|
|
+ width: 25px;
|
|
|
+ position: absolute;
|
|
|
+ left: 60%;
|
|
|
+ top: 57%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 6;
|
|
|
+}
|
|
|
+#G3 {
|
|
|
+ width: 170px;
|
|
|
+ position: absolute;
|
|
|
+ left: 65%;
|
|
|
+ top: 58%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+}
|
|
|
+.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>
|
lcw
