polioce

src/components/police.vue

@@ -7,28 +7,28 @@
       <div
         id="screan"
         ref="dv"
-        v-drag="{ go, getK, setk, getC, setC, getA, setA }"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
       >
         <img src="../assets/img/screan.png" alt="" />
       </div>
       <div
         id="tou"
         ref="dv1"
-        v-drag="{ go, getK, setk, getC, setC, getA, setA }"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
       >
         <img src="../assets/img/tou.png" alt="" />
       </div>
       <div
         id="ai"
         ref="dv2"
-        v-drag="{ go, getK, setk, getC, setC, getA, setA }"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
       >
         <img src="../assets/img/ai.png" alt="" />
       </div>
       <div
         id="police"
         ref="dv2"
-        v-drag="{ go, getK, setk, getC, setC, getA, setA }"
+        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
       >
         <img src="../assets/img/police.png" alt="" />
       </div>
@@ -103,24 +103,26 @@ export default {
 
             cdiv.style.left = nl + "px";
             cdiv.style.top = nt + "px";
-            // cdiv.style.left = e.clientX + "px";
-            // cdiv.style.top = e.clientY + "px";
+
             if (el.id == "screan") {
-              st(nl, nt, 1);
+              binding.value.setPan("screan")
+              moveP(nl, nt, 1);
             }
 
             if (el.id == "tou") {
-              st(nl, nt, 2);
+              binding.value.setPan("tou")
+              moveP(nl, nt, 2);
             }
 
             if (el.id == "ai") {
-              st(nl, nt, 4);
+              binding.value.setPan("ai")
+              moveP(nl, nt, 4);
             }
 
             if (el.id == "police") {
-              st(nl, nt, 3);
+              binding.value.setPan("police")
+              moveP(nl, nt, 3);
             }
-            pan();
           };
         }
         //鼠标抬起事件
@@ -129,25 +131,27 @@ export default {
           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);
-          // }
+          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;
@@ -224,128 +228,20 @@ 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 &&
-          //   -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";
+            dv2.style.left = policeL + 56 + "px";
+            dv2.style.top = policeT - 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 &&
@@ -357,94 +253,37 @@ export default {
             spP < -40 &&
             type == 1
           ) {
-            dv1.style.left = nl + 42 + "px";
-            dv1.style.top = nt - 73 + "px";
+            dv.style.left = policeL + 56 + "px";
+            dv.style.top = policeT - 70 + "px";
 
-            dv3.style.left = nl - 56 + "px";
-            dv3.style.top = nt + 70 + "px";
+            dv1.style.left = policeL + 98 + "px";
+            dv1.style.top = policeT - 143 + "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)
+              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";
+            dv1.style.left = _panL + 42 + "px";
+            dv1.style.top = _panT - 73 + "px";
 
             binding.value.setk(1);
             playMusic();
           } else if (type == 2) {
-            Count = 0;
             binding.value.setk(0);
           }
+        }
+        function playMusic() {
+          musicC.play();
+        }
 
+        function moveP(nl, nt, type) {
           if (binding.value.getK() == 1 && type == 1) {
             dv1.style.left = nl + 42 + "px";
             dv1.style.top = nt - 73 + "px";
@@ -491,12 +330,6 @@ export default {
             dv1.style.top = nt - 143 + "px";
           }
         }
-        function playMusic() {
-          if (Count == 0) {
-            musicC.play();
-          }
-          Count++;
-        }
       },
     },
   },
@@ -522,6 +355,12 @@ export default {
     getA() {
       return this.aaa;
     },
+    setPan(value){
+      this.panThing = value;
+    },
+    getPan(){
+      return this.panThing;
+    }
   },
 };
 </script>