cocoroboBlockly/src/components/shop.vue

<template>
  <div>
    <div class="tip">
      <img src="../assets/img/shop/tips.png" alt="" />
    </div>
    <div class="img">
      <div
        id="screan"
        v-drag="{
          go,
          setPan,
          getPan,
          setJ1,
          getJ1,
          setJ2,
          getJ2,
          setA,
          getA,
          setP,
          getP,
          setT,
          getT,
        }"
      >
        <img src="../assets/img/light/screan.png" alt="" />
      </div>
      <div
        id="tou"
        v-drag="{
          go,
          setPan,
          getPan,
          setJ1,
          getJ1,
          setJ2,
          getJ2,
          setA,
          getA,
          setP,
          getP,
          setT,
          getT,
        }"
      >
        <img src="../assets/img/tou1.png" alt="" />
      </div>
      <div
        id="ai"
        v-drag="{
          go,
          setPan,
          getPan,
          setJ1,
          getJ1,
          setJ2,
          getJ2,
          setA,
          getA,
          setP,
          getP,
          setT,
          getT,
        }"
      >
        <img src="../assets/img/ai.png" alt="" />
      </div>
      <div
        id="jjj1"
        v-drag="{
          go,
          setPan,
          getPan,
          setJ1,
          getJ1,
          setJ2,
          getJ2,
          setA,
          getA,
          setP,
          getP,
          setT,
          getT,
        }"
      >
        <img src="../assets/img/shop/j21.png" alt="" />
      </div>
      <div
        id="jjj2"
        v-drag="{
          go,
          setPan,
          getPan,
          setJ1,
          getJ1,
          setJ2,
          getJ2,
          setA,
          getA,
          setP,
          getP,
          setT,
          getT,
        }"
      >
        <img src="../assets/img/shop/j22.png" alt="" />
      </div>
      <div
        id="police"
        v-drag="{
          go,
          setPan,
          getPan,
          setJ1,
          getJ1,
          setJ2,
          getJ2,
          setA,
          getA,
          setP,
          getP,
          setT,
          getT,
        }"
      >
        <img src="../assets/img/shop/j1.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,
      panThing: "",
      jjj1: "",
      jjj2: "",
      aaa: "",
      ppp: "",
      ttt: "",
    };
  },
  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 dvj1 = document.getElementById("jjj1");
        var dvj2 = document.getElementById("jjj2");
        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 == "jjj1") {
              binding.value.setPan("jjj1");
              moveP(nl, nt, 5);
            }

            if (el.id == "jjj2") {
              binding.value.setPan("jjj2");
              moveP(nl, nt, 6);
            }

            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() == "jjj1") {
            st(nl, nt, 5);
          }

          if (binding.value.getPan() == "jjj2") {
            st(nl, nt, 6);
          }

          if (binding.value.getPan() == "police") {
            st(nl, nt, 3);
          }
          pan();
        };
        function pan() {
          var pinL = dv.offsetLeft;
          var pinT = dv.offsetTop;

          var touL = dv1.offsetLeft;
          var touT = dv1.offsetTop;

          var aiL = dv2.offsetLeft;
          var aiT = dv2.offsetTop;

          var j1L = dvj1.offsetLeft;
          var j1T = dvj1.offsetTop;

          var j2L = dvj2.offsetLeft;
          var j2T = dvj2.offsetTop;

          var policeL = dv3.offsetLeft;
          var policeT = dv3.offsetTop;

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

          if (
            binding.value.getJ1() == 1 &&
            binding.value.getJ2() == 1 &&
            binding.value.getA() == 1 &&
            binding.value.getP() == 1 &&
            binding.value.getT() == 1
          ) {
            btn.className = "button dark";
            btn.onclick = function () {
              binding.value.go();
            };
            right.style.display = "block";
            right.style.left = policeL + 335 + "px";
            right.style.top = policeT + 65 + "px";
          } else {
            btn.className = "button";
            btn.onclick = null;
            right.style.display = "none";
          }
        }
        function st(nl, nt, type) {
          var pinL = dv.offsetLeft;
          var pinT = dv.offsetTop;

          var touL = dv1.offsetLeft;
          var touT = dv1.offsetTop;

          var aiL = dv2.offsetLeft;
          var aiT = dv2.offsetTop;

          var j1L = dvj1.offsetLeft;
          var j1T = dvj1.offsetTop;

          var j2L = dvj2.offsetLeft;
          var j2T = dvj2.offsetTop;

          var policeL = dv3.offsetLeft;
          var policeT = dv3.offsetTop;

          var jp1L = j1L - policeL;
          var jp1T = j1T - policeT;

          var jp2L = j2L - policeL;
          var jp2T = j2T - policeT;

          var apL = aiL - policeL;
          var apT = aiT - policeT;

          var ppL = pinL - policeL;
          var ppT = pinT - policeT;

          var tpL = touL - pinL;
          var tpT = touT - pinT;
          if (-10 < jp1L && jp1L < 30 && 60 < jp1T && jp1T < 100 && type == 5) {
            dvj1.style.left = policeL + 11 + "px";
            dvj1.style.top = policeT + 79 + "px";
            binding.value.setJ1(1); //设置第一个j2可以跟着j1一起动
            playMusic();
          } else if (type == 5) {
            binding.value.setJ1(0);
          }

          if (
            250 < jp2L &&
            jp2L < 290 &&
            60 < jp2T &&
            jp2T < 100 &&
            type == 6
          ) {
            dvj2.style.left = policeL + 271 + "px";
            dvj2.style.top = policeT + 80 + "px";
            binding.value.setJ2(1); //设置第二个j2可以跟着j1一起动
            playMusic();
          } else if (type == 6) {
            binding.value.setJ2(0);
          }

          if (69 < apL && apL < 100 && -10 < apT && apT < 30 && type == 4) {
            dv2.style.left = policeL + 89 + "px";
            dv2.style.top = policeT + 10 + "px";
            binding.value.setA(1); //设置ai可以跟着j1一起动
            playMusic();
          } else if (type == 4) {
            binding.value.setA(0);
          }

          if (67 < ppL && ppL < 100 && -10 < ppT && ppT < 30 && type == 1) {
            dv.style.left = policeL + 87 + "px";
            dv.style.top = policeT + 9 + "px";
            binding.value.setP(1); //设置第屏幕可以跟着j1一起动
            if (binding.value.getT() == 1) {
              dv1.style.left = policeL + 87 + 40 + "px";
              dv1.style.top = policeT + 9 - 70 + "px";
            }
            playMusic();
          } else if (type == 1) {
            binding.value.setP(0);
          }

          if (20 < tpL && tpL < 60 && -90 < tpT && tpT < -50 && type == 2) {
            dv1.style.left = pinL + 40 + "px";
            dv1.style.top = pinT - 70 + "px";
            binding.value.setT(1); //设置摄像头可以跟着屏幕一起动
            playMusic();
          } else if (type == 2) {
            binding.value.setT(0);
          }
        }
        function playMusic() {
          musicC.play();
        }

        function moveP(nl, nt, type) {
          if (binding.value.getJ1() == 1 && type == 3) {
            dvj1.style.left = nl + 11 + "px";
            dvj1.style.top = nt + 79 + "px";
          }

          if (binding.value.getJ2() == 1 && type == 3) {
            dvj2.style.left = nl + 271 + "px";
            dvj2.style.top = nt + 80 + "px";
          }

          if (binding.value.getA() == 1 && type == 3) {
            dv2.style.left = nl + 89 + "px";
            dv2.style.top = nt + 10 + "px";
          }

          if (binding.value.getP() == 1 && type == 3) {
            dv.style.left = nl + 87 + "px";
            dv.style.top = nt + 9 + "px";
            if (binding.value.getT() == 1) {
              dv1.style.left = nl + 87 + 40 + "px";
              dv1.style.top = nt + 9 - 70 + "px";
            }
          }

          if (binding.value.getT() == 1 && type == 1) {
            dv1.style.left = nl + 40 + "px";
            dv1.style.top = nt - 70 + "px";
          }
        }
      },
    },
  },
  methods: {
    go() {
      this.$router.push("/blockly");
    },
    setPan(value) {
      this.panThing = value;
    },
    getPan() {
      return this.panThing;
    },
    setJ1(value) {
      this.jjj1 = value;
    },
    getJ1() {
      return this.jjj1;
    },
    setJ2(value) {
      this.jjj2 = value;
    },
    getJ2() {
      return this.jjj2;
    },
    setA(value) {
      this.aaa = value;
    },
    getA() {
      return this.aaa;
    },
    setP(value) {
      this.ppp = value;
    },
    getP() {
      return this.ppp;
    },
    setT(value) {
      this.ttt = value;
    },
    getT() {
      return this.ttt;
    },
  },
};
</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,
#jjj1 > img,
#jjj2 > 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: 5;
}

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

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

#jjj1 {
  width: 45px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
#jjj2 {
  width: 45px;
  position: absolute;
  left: 58%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
#police {
  width: 315px;
  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>