cocoroboBlockly/src/components/police.vue

<template>
  <div>
    <div class="tip">
      <img src="../assets/img/tips.png" alt="" />
    </div>
    <div class="img">
      <div id="screan" ref="dv" v-drag="go">
        <img src="../assets/img/screan.png" alt="" />
      </div>
      <div id="tou" ref="dv1" v-drag="go">
        <img src="../assets/img/tou.png" alt="" />
      </div>
      <div id="ai" ref="dv2" v-drag="go">
        <img src="../assets/img/ai.png" alt="" />
      </div>
      <div id="police" ref="dv2" v-drag="go">
        <img src="../assets/img/police.png" alt="" />
      </div>
    </div>
    <div class="right"><img src="../assets/img/right.png" alt="" /></div>
    <div class="button">进入CocoBlockly编程平台</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      that: this,
    };
  },
  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 dv = document.getElementById("screan");
        var dv1 = document.getElementById("tou");
        var dv2 = document.getElementById("ai");
        var dv3 = document.getElementById("police");
        //鼠标按下事件
        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";
            // cdiv.style.left = e.clientX + "px";
            // cdiv.style.top = e.clientY + "px";
            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);
            }
            pan();
          };
        }
        //鼠标抬起事件
        el.onmouseup = function () {
          //开关关闭
          isDown = false;
          el.style.cursor = "default";
          document.onmousemove = null;
        };
        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 = _panL - touL;
          var saL = _panL - aiL;
          var spL = _panL - policeL;

          var stP = _panT - touT;
          var saP = _panT - aiT;
          var spP = _panT - policeT;

          var btn = document.getElementsByClassName("button")[0];
          var right = document.getElementsByClassName("right")[0];

          if (
            -50 < stL &&
            stL < -35 &&
            68 < stP &&
            stP < 80 &&
            -5 <= saL &&
            saL < 8 &&
            -5 <= saP &&
            saP < 8 &&
            47 < spL &&
            spL < 65 &&
            -75 < spP &&
            spP < -62
          ) {
            btn.className = "button dark";
            btn.onclick = function () {
              binding.value();
            };
            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;

          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";

            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
          ) {
            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 - 70 + "px";
          }

          if (
            -70 < stL &&
            stL < -15 &&
            45 < stP &&
            stP < 100 &&
            25 < spL &&
            spL < 85 &&
            -95 < spP &&
            spP < -40 &&
            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 (
            -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 - 53 + "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 &&
            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";
          }
        }
      },
    },
  },
  methods: {
    go() {
      this.$router.push("/blockly");
    },
  },
};
</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: 130px;
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

#ai {
  width: 130px;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translateY(-50%);
  z-index: 1;
}

#tou {
  width: 45px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

#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>