police Music

src/components/police.vue

@@ -4,16 +4,32 @@
       <img src="../assets/img/tips.png" alt="" />
     </div>
     <div class="img">
-      <div id="screan" ref="dv" v-drag="go">
+      <div
+        id="screan"
+        ref="dv"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA }"
+      >
         <img src="../assets/img/screan.png" alt="" />
       </div>
-      <div id="tou" ref="dv1" v-drag="go">
+      <div
+        id="tou"
+        ref="dv1"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA }"
+      >
         <img src="../assets/img/tou.png" alt="" />
       </div>
-      <div id="ai" ref="dv2" v-drag="go">
+      <div
+        id="ai"
+        ref="dv2"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA }"
+      >
         <img src="../assets/img/ai.png" alt="" />
       </div>
-      <div id="police" ref="dv2" v-drag="go">
+      <div
+        id="police"
+        ref="dv2"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA }"
+      >
         <img src="../assets/img/police.png" alt="" />
       </div>
     </div>
@@ -21,7 +37,7 @@
     <div class="button">进入CocoBlockly编程平台</div>
     <video
       id="musicC"
-      :src="require('../assets/music/disconnect.wav')"
+      :src="require('../assets/music/click.mp3')"
       v-show="false"
     ></video>
   </div>
@@ -32,6 +48,9 @@ export default {
   data() {
     return {
       that: this,
+      kkk: 0,
+      ccc: 0,
+      aaa: 0,
     };
   },
   directives: {
@@ -46,6 +65,7 @@ export default {
         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");
@@ -104,11 +124,30 @@ export default {
           };
         }
         //鼠标抬起事件
-        el.onmouseup = function () {
+        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 (el.id == "screan") {
+          //   st(nl, nt, 1);
+          // }
+
+          // if (el.id == "tou") {
+          //   st(nl, nt, 2);
+          // }
+
+          // if (el.id == "ai") {
+          //   st(nl, nt, 4);
+          // }
+
+          // if (el.id == "police") {
+          //   st(nl, nt, 3);
+          // }
         };
         function pan() {
           var _panL = dv.offsetLeft;
@@ -150,7 +189,7 @@ export default {
           ) {
             btn.className = "button dark";
             btn.onclick = function () {
-              binding.value();
+              binding.value.go();
             };
             right.style.display = "block";
             right.style.left = policeL + 240 + "px";
@@ -185,31 +224,128 @@ export default {
           var saL2 = aiL - policeL;
           var saP2 = aiT - policeT;
 
-          if (
-            -70 < stL &&
-            stL < -15 &&
-            45 < stP &&
-            stP < 100 &&
-            25 < spL &&
-            spL < 85 &&
-            -95 < spP &&
-            spP < -40 &&
-            25 < saL2 &&
-            saL2 < 85 &&
-            -95 < saP2 &&
-            saP2 < -40 &&
-            type == 2
-          ) {
-            dv.style.left = nl - 42 + "px";
-            dv.style.top = nt + 73 + "px";
-
-            dv2.style.left = nl - 42 + "px";
-            dv2.style.top = nt + 66 + "px";
-
-            dv3.style.left = nl - 98 + "px";
-            dv3.style.top = nt + 143 + "px";
+          // if (
+          //   -70 < stL &&
+          //   stL < -15 &&
+          //   45 < stP &&
+          //   stP < 100 &&
+          //   25 < spL &&
+          //   spL < 85 &&
+          //   -95 < spP &&
+          //   spP < -40 &&
+          //   -5 <= saL &&
+          //   saL < 8 &&
+          //   -5 <= saP &&
+          //   saP < 8 &&
+          //   25 < saL2 &&
+          //   saL2 < 85 &&
+          //   -95 < saP2 &&
+          //   saP2 < -40 &&
+          //   type == 4
+          // ) {
+          //   dv.style.left = nl + "px";
+          //   dv.style.top = nt + 7 + "px";
+
+          //   dv1.style.left = nl + 42 + "px";
+          //   dv1.style.top = nt - 66 + "px";
+
+          //   dv3.style.left = nl - 56 + "px";
+          //   dv3.style.top = nt + 77 + "px";
+
+          //   //playMusic();
+          // } else
+          if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40 && type == 4) {
+            dv3.style.left = nl - 56 + "px";
+            dv3.style.top = nt + 77 + "px";
+            if (binding.value.getC() == 2) {
+              dv.style.left = nl + "px";
+              dv.style.top = nt + 7 + "px";
+
+              dv1.style.left = nl + 42 + "px";
+              dv1.style.top = nt - 66 + "px";
+              binding.value.setA(2);
+            } else {
+              binding.value.setA(1);
+            }
+            playMusic();
+          } else if (type == 4) {
+            Count = 0;
+            binding.value.setA(0);
           }
 
+          // if (
+          //   -70 < stL &&
+          //   stL < -15 &&
+          //   45 < stP &&
+          //   stP < 100 &&
+          //   25 < spL &&
+          //   spL < 85 &&
+          //   -95 < spP &&
+          //   spP < -40 &&
+          //   -5 <= saL &&
+          //   saL < 8 &&
+          //   -5 <= saP &&
+          //   saP < 8 &&
+          //   type == 3
+          // ) {
+          //   dv.style.left = nl + 56 + "px";
+          //   dv.style.top = nt - 70 + "px";
+
+          //   dv1.style.left = nl + 98 + "px";
+          //   dv1.style.top = nt - 143 + "px";
+
+          //   dv2.style.left = nl + 56 + "px";
+          //   dv2.style.top = nt - 77 + "px";
+
+          //   //playMusic();
+          // } else if (
+          //   -70 < stL &&
+          //   stL < -15 &&
+          //   45 < stP &&
+          //   stP < 100 &&
+          //   25 < spL &&
+          //   spL < 85 &&
+          //   -95 < spP &&
+          //   spP < -40 &&
+          //   type == 3
+          // ) {
+          //   dv.style.left = nl + 56 + "px";
+          //   dv.style.top = nt - 70 + "px";
+
+          //   dv1.style.left = nl + 98 + "px";
+          //   dv1.style.top = nt - 143 + "px";
+
+          //   //playMusic();
+          // } else if (type == 3) {
+          //   Count = 0;
+          // }
+
+          // if (
+          //   -70 < stL &&
+          //   stL < -15 &&
+          //   45 < stP &&
+          //   stP < 100 &&
+          //   25 < spL &&
+          //   spL < 85 &&
+          //   -95 < spP &&
+          //   spP < -40 &&
+          //   25 < saL2 &&
+          //   saL2 < 85 &&
+          //   -95 < saP2 &&
+          //   saP2 < -40 &&
+          //   type == 1
+          // ) {
+          //   dv1.style.left = nl + 42 + "px";
+          //   dv1.style.top = nt - 73 + "px";
+
+          //   dv2.style.left = nl + "px";
+          //   dv2.style.top = nt - 7 + "px";
+
+          //   dv3.style.left = nl - 56 + "px";
+          //   dv3.style.top = nt + 70 + "px";
+
+          //   //playMusic();
+          // } else
           if (
             -70 < stL &&
             stL < -15 &&
@@ -219,144 +355,147 @@ export default {
             spL < 85 &&
             -95 < spP &&
             spP < -40 &&
-            25 < saL2 &&
-            saL2 < 85 &&
-            -95 < saP2 &&
-            saP2 < -40 &&
             type == 1
           ) {
             dv1.style.left = nl + 42 + "px";
             dv1.style.top = nt - 73 + "px";
 
-            dv2.style.left = nl + "px";
-            dv2.style.top = nt - 7 + "px";
-
             dv3.style.left = nl - 56 + "px";
             dv3.style.top = nt + 70 + "px";
+            if (binding.value.getA() == 1) {
+              dv2.style.left = nl + "px";
+              dv2.style.top = nt - 7 + "px";
+              binding.value.setC(3);
+            } else {
+              binding.value.setC(2);
+              binding.value.setA(0)
+            }
+            playMusic();
+          } else if (type == 1) {
+            Count = 0;
+            binding.value.setC(0);
           }
+          // else if (
+          //   -70 < stL &&
+          //   stL < -15 &&
+          //   45 < stP &&
+          //   stP < 100 &&
+          //   type == 1
+          // ) {
+          //   dv1.style.left = nl + 42 + "px";
+          //   dv1.style.top = nt - 73 + "px";
+
+          //   playMusic();
+          // } else if (type == 1 ) {
+          //   Count = 0;
+          // }
+
+          // if (
+          //   -70 < stL &&
+          //   stL < -15 &&
+          //   45 < stP &&
+          //   stP < 100 &&
+          //   25 < spL &&
+          //   spL < 85 &&
+          //   -95 < spP &&
+          //   spP < -40 &&
+          //   25 < saL2 &&
+          //   saL2 < 85 &&
+          //   -95 < saP2 &&
+          //   saP2 < -40 &&
+          //   type == 2
+          // ) {
+          //   dv.style.left = nl - 42 + "px";
+          //   dv.style.top = nt + 73 + "px";
+
+          //   dv2.style.left = nl - 42 + "px";
+          //   dv2.style.top = nt + 77 + "px";
+
+          //   dv3.style.left = nl - 98 + "px";
+          //   dv3.style.top = nt + 143 + "px";
+          //   binding.value.setk(1)
+          //   playMusic();
+          // } else if (
+          //   -70 < stL &&
+          //   stL < -15 &&
+          //   45 < stP &&
+          //   stP < 100 &&
+          //   25 < spL &&
+          //   spL < 85 &&
+          //   -95 < spP &&
+          //   spP < -40 &&
+          //   type == 2
+          // ) {
+          //   dv.style.left = nl - 42 + "px";
+          //   dv.style.top = nt + 73 + "px";
+
+          //   dv3.style.left = nl - 98 + "px";
+          //   dv3.style.top = nt + 143 + "px";
+          //   binding.value.setk(1)
+          //   playMusic();
+          // } else
+          if (-70 < stL && stL < -15 && 45 < stP && stP < 100 && type == 2) {
+            dv.style.left = nl - 42 + "px";
+            dv.style.top = nt + 73 + "px";
 
-          if (
-            -70 < stL &&
-            stL < -15 &&
-            45 < stP &&
-            stP < 100 &&
-            25 < spL &&
-            spL < 85 &&
-            -95 < spP &&
-            spP < -40 &&
-            -5 <= saL &&
-            saL < 8 &&
-            -5 <= saP &&
-            saP < 8 &&
-            25 < saL2 &&
-            saL2 < 85 &&
-            -95 < saP2 &&
-            saP2 < -40 &&
-            type == 4
-          ) {
-            dv.style.left = nl + "px";
-            dv.style.top = nt + "px";
+            binding.value.setk(1);
+            playMusic();
+          } else if (type == 2) {
+            Count = 0;
+            binding.value.setk(0);
+          }
 
+          if (binding.value.getK() == 1 && type == 1) {
             dv1.style.left = nl + 42 + "px";
             dv1.style.top = nt - 73 + "px";
-
-            dv3.style.left = nl - 56 + "px";
-            dv3.style.top = nt + 70 + "px";
-          }
-
-          if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40 && type == 4) {
-            dv3.style.left = nl - 56 + "px";
-            dv3.style.top = nt + 70 + "px";
           }
 
           if (
-            -70 < stL &&
-            stL < -15 &&
-            45 < stP &&
-            stP < 100 &&
-            25 < spL &&
-            spL < 85 &&
-            -95 < spP &&
-            spP < -40 &&
-            -5 <= saL &&
-            saL < 8 &&
-            -5 <= saP &&
-            saP < 8 &&
-            type == 3
+            binding.value.getC() == 2 &&
+            type == 3 &&
+            binding.value.getA() != 2
           ) {
             dv.style.left = nl + 56 + "px";
             dv.style.top = nt - 70 + "px";
 
             dv1.style.left = nl + 98 + "px";
             dv1.style.top = nt - 143 + "px";
-
-            dv2.style.left = nl + 56 + "px";
-            dv2.style.top = nt - 76 + "px";
-          }
-
-          if (
-            -70 < stL &&
-            stL < -15 &&
-            45 < stP &&
-            stP < 100 &&
-            25 < spL &&
-            spL < 85 &&
-            -95 < spP &&
-            spP < -40 &&
-            type == 1
+          } else if (
+            binding.value.getA() == 1 &&
+            type == 3 &&
+            binding.value.getC() != 3
           ) {
-            dv1.style.left = nl + 42 + "px";
-            dv1.style.top = nt - 73 + "px";
+            dv2.style.left = nl + 56 + "px";
+            dv2.style.top = nt - 77 + "px";
+          } else if (type == 3 && binding.value.getC() == 3) {
+            dv2.style.left = nl + 56 + "px";
+            dv2.style.top = nt - 77 + "px";
 
-            dv3.style.left = nl - 56 + "px";
-            dv3.style.top = nt + 70 + "px";
-          }
+            dv.style.left = nl + 56 + "px";
+            dv.style.top = nt - 70 + "px";
 
-          if (
-            -70 < stL &&
-            stL < -15 &&
-            45 < stP &&
-            stP < 100 &&
-            25 < spL &&
-            spL < 85 &&
-            -95 < spP &&
-            spP < -40 &&
-            type == 2
+            dv1.style.left = nl + 98 + "px";
+            dv1.style.top = nt - 143 + "px";
+          } else if (
+            binding.value.getA() == 2 &&
+            type == 3 &&
+            binding.value.getC() == 2
           ) {
-            dv.style.left = nl - 42 + "px";
-            dv.style.top = nt + 73 + "px";
-
-            dv3.style.left = nl - 98 + "px";
-            dv3.style.top = nt + 143 + "px";
-          }
+            dv2.style.left = nl + 56 + "px";
+            dv2.style.top = nt - 77 + "px";
 
-          if (
-            -70 < stL &&
-            stL < -15 &&
-            45 < stP &&
-            stP < 100 &&
-            25 < spL &&
-            spL < 85 &&
-            -95 < spP &&
-            spP < -40 &&
-            type == 3
-          ) {
             dv.style.left = nl + 56 + "px";
             dv.style.top = nt - 70 + "px";
 
             dv1.style.left = nl + 98 + "px";
             dv1.style.top = nt - 143 + "px";
           }
-
-          if (-70 < stL && stL < -15 && 45 < stP && stP < 100 && type == 1) {
-            dv1.style.left = nl + 42 + "px";
-            dv1.style.top = nt - 73 + "px";
-          }
-
-          if (-70 < stL && stL < -15 && 45 < stP && stP < 100 && type == 2) {
-            dv.style.left = nl - 42 + "px";
-            dv.style.top = nt + 73 + "px";
+        }
+        function playMusic() {
+          if (Count == 0) {
+            musicC.play();
           }
+          Count++;
         }
       },
     },
@@ -365,6 +504,24 @@ export default {
     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;
+    },
   },
 };
 </script>
@@ -417,7 +574,7 @@ body {
   top: 50%;
   left: 30%;
   transform: translateY(-50%);
-  z-index: 1;
+  z-index: 3;
 }
 
 #tou {
@@ -426,7 +583,7 @@ body {
   top: 50%;
   left: 50%;
   transform: translateY(-50%);
-  z-index: 3;
+  z-index: 4;
 }
 
 #police {