|
|
@@ -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 {
|
