Merge branch 'master' of https://git.cocorobo.cn/CocoRoboLabs/cocoroboBlockly

src/components/light.vue

@@ -0,0 +1,533 @@
+<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/light/tou.png" alt="" />
+      </div>
+      <div
+        id="ai"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
+      >
+        <img src="../assets/img/light/ai.png" alt="" />
+      </div>
+      <div
+        id="police"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
+      >
+        <img src="../assets/img/light/light.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 = policeL - touL;
+          var saL = _panL - aiL;
+          var spL = _panL - policeL;
+
+          var stP = policeT - touT;
+          var saP = _panT - aiT;
+          var spP = _panT - policeT;
+
+          var btn = document.getElementsByClassName("button")[0];
+          var right = document.getElementsByClassName("right")[0];
+
+          if (
+            -115 < stL &&
+            stL < -110 &&
+            -140 < stP &&
+            stP < -120 &&
+            -5 <= saL &&
+            saL < 8 &&
+            -5 <= saP &&
+            saP < 8 &&
+            47 < spL &&
+            spL < 70 &&
+            -80 < spP &&
+            spP < -62
+          ) {
+            btn.className = "button dark";
+            btn.onclick = function () {
+              binding.value.go();
+            };
+            right.style.display = "block";
+            right.style.left = policeL + 240 + "px";
+            right.style.top = policeT + "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 = _panL - policeL;
+          var spP = _panT - policeT;
+
+          var saL = _panL - aiL;
+          var saP = _panT - aiT;
+
+          var saL2 = aiL - policeL;
+          var saP2 = aiT - policeT;
+
+          var saL3 = policeL - touL;
+          var saP3 = policeT - touT;
+
+          if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40 && type == 4) {
+            dv2.style.left = policeL + 63 + "px";
+            dv2.style.top = policeT - 79 + "px";
+            if (binding.value.getC() == 2) {
+              binding.value.setA(2);
+            } else {
+              binding.value.setA(1);
+            }
+            playMusic();
+          } else if (type == 4) {
+            binding.value.setA(0);
+          }
+
+          if (
+            -70 < stL &&
+            stL < -15 &&
+            45 < stP &&
+            stP < 100 &&
+            25 < spL &&
+            spL < 85 &&
+            -95 < spP &&
+            spP < -40 &&
+            type == 1
+          ) {
+            dv.style.left = policeL + 66.5 + "px";
+            dv.style.top = policeT - 79 + "px";
+
+            // dv1.style.left = policeL + 112 + "px";
+            // dv1.style.top = policeT + 134 + "px";
+            if (binding.value.getA() == 1) {
+              binding.value.setC(3);
+            } else {
+              binding.value.setC(2);
+              binding.value.setA(0);
+            }
+            playMusic();
+          } else if (
+            25 < spL &&
+            spL < 85 &&
+            -95 < spP &&
+            spP < -40 &&
+            type == 1
+          ) {
+            dv.style.left = policeL + 66.5 + "px";
+            dv.style.top = policeT - 79 + "px";
+
+            if (binding.value.getA() == 1) {
+              binding.value.setC(3);
+            } else {
+              binding.value.setC(1);
+              binding.value.setA(0);
+            }
+            playMusic();
+          } else if (type == 1) {
+            if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40) {
+              binding.value.setA(1);
+            }
+            binding.value.setC(0);
+          }
+
+          if (-120 < saL3 && saL3 < -95 && -160 < saP3 && saP3 < -115 && type == 2) {
+            dv1.style.left = policeL + 112 + "px";
+            dv1.style.top = policeT + 134 + "px";
+
+            if (binding.value.getA() == 1) {
+              binding.value.setC(3);
+            }
+            if (binding.value.getC() == 1) {
+              binding.value.setC(2);
+            }
+            binding.value.setk(1);
+            playMusic();
+          } else if (type == 2) {
+            if (25 < spL && spL < 85 && -95 < spP && spP < -40) {
+              if (binding.value.getA() == 1) {
+                binding.value.setC(3);
+              } else {
+                binding.value.setC(1);
+              }
+            } else {
+              binding.value.setC(0);
+            }
+            binding.value.setk(0);
+          }
+        }
+        function playMusic() {
+          musicC.play();
+        }
+
+        function moveP(nl, nt, type) {
+          if (binding.value.getK() == 1 && type == 3) {
+            dv1.style.left = nl + 112 + "px";
+            dv1.style.top = nt + 134 + "px";
+          }
+
+          if (binding.value.getC() == 1 && type == 3) {
+            dv.style.left = nl + 66.5 + "px";
+            dv.style.top = nt - 79 + "px";
+          }
+
+          if (
+            binding.value.getC() == 2 &&
+            type == 3 &&
+            binding.value.getA() != 2
+          ) {
+            dv.style.left = nl + 66.5 + "px";
+            dv.style.top = nt - 79 + "px";
+
+          } else if (
+            binding.value.getA() == 1 &&
+            type == 3 &&
+            binding.value.getC() != 3
+          ) {
+            dv2.style.left = nl + 63 + "px";
+            dv2.style.top = nt - 79 + "px";
+          } else if (
+            type == 3 &&
+            binding.value.getC() == 3 &&
+            binding.value.getK() == 1
+          ) {
+            dv2.style.left = nl + 63 + "px";
+            dv2.style.top = nt - 79 + "px";
+
+            dv.style.left = nl + 66.5 + "px";
+            dv.style.top = nt - 79 + "px";
+
+          } else if (
+            type == 3 &&
+            binding.value.getC() == 3 &&
+            binding.value.getK() == 0
+          ) {
+            dv2.style.left = nl + 63 + "px";
+            dv2.style.top = nt - 79 + "px";
+
+            dv.style.left = nl + 66.5 + "px";
+            dv.style.top = nt - 79 + "px";
+          } else if (
+            binding.value.getA() == 2 &&
+            type == 3 &&
+            binding.value.getC() == 2 &&
+            binding.value.getK() == 1
+          ) {
+            dv2.style.left = nl + 63 + "px";
+            dv2.style.top = nt - 79 + "px";
+
+            dv.style.left = nl + 66.5 + "px";
+            dv.style.top = nt - 79 + "px";
+
+          } else if (
+            binding.value.getA() == 2 &&
+            type == 3 &&
+            binding.value.getC() == 2 &&
+            binding.value.getK() == 0
+          ) {
+            dv2.style.left = nl + 63 + "px";
+            dv2.style.top = nt - 79 + "px";
+
+            dv.style.left = nl + 66.5 + "px";
+            dv.style.top = nt - 79 + "px";
+          } else if (
+            binding.value.getA() == 2 &&
+            type == 3 &&
+            binding.value.getC() == 1 &&
+            binding.value.getK() == 0
+          ) {
+            dv2.style.left = nl + 63 + "px";
+            dv2.style.top = nt - 79 + "px";
+
+            dv.style.left = nl + 66.5 + "px";
+            dv.style.top = nt - 79 + "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: 105px;
+  position: absolute;
+  left: 10%;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 4;
+}
+
+#ai {
+  width: 110px;
+  position: absolute;
+  top: 50%;
+  left: 30%;
+  transform: translateY(-50%);
+  z-index: 3;
+}
+
+#tou {
+  width: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%);
+  z-index: 4;
+}
+
+#police {
+  width: 240px;
+  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>

src/router/index.js

@@ -8,6 +8,7 @@ import function1 from '@/components/function'
 import camera from '@/components/camera'
 import test from '@/components/test'
 import shop from '@/components/shop'
+import light from '@/components/light'
 
 Vue.use(Router).use(ElementUI)
 
@@ -38,6 +39,11 @@ export default new Router({
       name: 'test',
       component: test
     },
+    {
+      path: '/light',
+      name: 'light',
+      component: light
+    },
     {
       path: '/shop',
       name: 'shop',