|
|
@@ -1,945 +1,945 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div class="tip">
|
|
|
- <img src="../assets/img/shop/tips.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="img">
|
|
|
- <div
|
|
|
- id="ai"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/ai.png" alt="" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="light1"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/light1.png" alt="" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="line"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/line.png" alt="" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="light2"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/light2.png" alt="" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="G1"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/G1.png" alt="" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="G5"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/G5.png" alt="" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="G2"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/G2.png" alt="" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="G4"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/G4.png" alt="" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- id="G3"
|
|
|
- v-drag="{
|
|
|
- go,
|
|
|
- setPan,
|
|
|
- getPan,
|
|
|
- setAi,
|
|
|
- getAi,
|
|
|
- setG5,
|
|
|
- getG5,
|
|
|
- setG4,
|
|
|
- getG4,
|
|
|
- setG2,
|
|
|
- getG2,
|
|
|
- setG3,
|
|
|
- getG3,
|
|
|
- setLight1,
|
|
|
- getLight1,
|
|
|
- setLight2,
|
|
|
- getLight2,
|
|
|
- setLine,
|
|
|
- getLine,
|
|
|
- }"
|
|
|
- >
|
|
|
- <img src="../assets/img/traffic/G3.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>
|
|
|
+ <div>
|
|
|
+ <div class="tip">
|
|
|
+ <img src="../assets/img/lightJs.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="img">
|
|
|
+ <div
|
|
|
+ id="ai"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/ai.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="light1"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/light1.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="line"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/line.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="light2"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/light2.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G1"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G1.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G5"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G5.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G2"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G2.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G4"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G4.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="G3"
|
|
|
+ v-drag="{
|
|
|
+ go,
|
|
|
+ setPan,
|
|
|
+ getPan,
|
|
|
+ setAi,
|
|
|
+ getAi,
|
|
|
+ setG5,
|
|
|
+ getG5,
|
|
|
+ setG4,
|
|
|
+ getG4,
|
|
|
+ setG2,
|
|
|
+ getG2,
|
|
|
+ setG3,
|
|
|
+ getG3,
|
|
|
+ setLight1,
|
|
|
+ getLight1,
|
|
|
+ setLight2,
|
|
|
+ getLight2,
|
|
|
+ setLine,
|
|
|
+ getLine,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <img src="../assets/img/traffic/G3.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: "",
|
|
|
- ai: "",
|
|
|
- G5: "",
|
|
|
- G4: "",
|
|
|
- G2: "",
|
|
|
- G3: "",
|
|
|
- Light1: "",
|
|
|
- Light2: "",
|
|
|
- Line: "",
|
|
|
- };
|
|
|
- },
|
|
|
- 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 _ai = document.getElementById("ai");
|
|
|
- var _G1 = document.getElementById("G1");
|
|
|
- var _G5 = document.getElementById("G5");
|
|
|
- var _G4 = document.getElementById("G4");
|
|
|
- var _G2 = document.getElementById("G2");
|
|
|
- var _G3 = document.getElementById("G3");
|
|
|
- var _light1 = document.getElementById("light1");
|
|
|
- var _light2 = document.getElementById("light2");
|
|
|
- var _line = document.getElementById("line");
|
|
|
-
|
|
|
- //鼠标按下事件
|
|
|
- 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 == "ai") {
|
|
|
- binding.value.setPan("ai");
|
|
|
- moveP(nl, nt, "ai");
|
|
|
- }
|
|
|
-
|
|
|
- if (el.id == "G1") {
|
|
|
- binding.value.setPan("G1");
|
|
|
- moveP(nl, nt, "G1");
|
|
|
- }
|
|
|
- if (el.id == "G5") {
|
|
|
- binding.value.setPan("G5");
|
|
|
- moveP(nl, nt, "G5");
|
|
|
- }
|
|
|
- if (el.id == "G4") {
|
|
|
- binding.value.setPan("G4");
|
|
|
- moveP(nl, nt, "G4");
|
|
|
- }
|
|
|
- if (el.id == "G2") {
|
|
|
- binding.value.setPan("G2");
|
|
|
- moveP(nl, nt, "G2");
|
|
|
- }
|
|
|
- if (el.id == "G3") {
|
|
|
- binding.value.setPan("G3");
|
|
|
- moveP(nl, nt, "G3");
|
|
|
- }
|
|
|
- if (el.id == "light1") {
|
|
|
- binding.value.setPan("light1");
|
|
|
- moveP(nl, nt, "light1");
|
|
|
- }
|
|
|
- if (el.id == "light2") {
|
|
|
- binding.value.setPan("light2");
|
|
|
- moveP(nl, nt, "light2");
|
|
|
- }
|
|
|
- if (el.id == "line") {
|
|
|
- binding.value.setPan("line");
|
|
|
- moveP(nl, nt, "line");
|
|
|
- }
|
|
|
- };
|
|
|
- }
|
|
|
- //鼠标抬起事件
|
|
|
- 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() == "ai") {
|
|
|
- st(nl, nt, "ai");
|
|
|
- }
|
|
|
-
|
|
|
- if (binding.value.getPan() == "G1") {
|
|
|
- st(nl, nt, "G1");
|
|
|
- }
|
|
|
-
|
|
|
- if (binding.value.getPan() == "G5") {
|
|
|
- st(nl, nt, "G5");
|
|
|
- }
|
|
|
-
|
|
|
- if (binding.value.getPan() == "G4") {
|
|
|
- st(nl, nt, "G4");
|
|
|
- }
|
|
|
- if (binding.value.getPan() == "G2") {
|
|
|
- st(nl, nt, "G2");
|
|
|
- }
|
|
|
- if (binding.value.getPan() == "G3") {
|
|
|
- st(nl, nt, "G3");
|
|
|
- }
|
|
|
- if (binding.value.getPan() == "light1") {
|
|
|
- st(nl, nt, "light1");
|
|
|
- }
|
|
|
- if (binding.value.getPan() == "light2") {
|
|
|
- st(nl, nt, "light2");
|
|
|
- }
|
|
|
- if (binding.value.getPan() == "line") {
|
|
|
- st(nl, nt, "line");
|
|
|
- }
|
|
|
- pan();
|
|
|
- };
|
|
|
- function pan() {
|
|
|
- var policeL = _G1.offsetLeft;
|
|
|
- var policeT = _G1.offsetTop;
|
|
|
-
|
|
|
- var btn = document.getElementsByClassName("button")[0];
|
|
|
- var right = document.getElementsByClassName("right")[0];
|
|
|
-
|
|
|
- if (
|
|
|
- binding.value.getAi() === 1 &&
|
|
|
- binding.value.getG5() === 1 &&
|
|
|
- binding.value.getG4() === 1 &&
|
|
|
- binding.value.getG2() === 1 &&
|
|
|
- binding.value.getG3() === 1 &&
|
|
|
- ((binding.value.getLight1() === 1 &&
|
|
|
- binding.value.getLight2() === 1) ||
|
|
|
- (binding.value.getLight1() === 2 &&
|
|
|
- binding.value.getLight2() === 2) ||
|
|
|
- (binding.value.getLight1() === 2 &&
|
|
|
- binding.value.getLight2() === 1) ||
|
|
|
- (binding.value.getLight1() === 1 &&
|
|
|
- binding.value.getLight2() === 1)) &&
|
|
|
- binding.value.getLine() === 1
|
|
|
- ) {
|
|
|
- btn.className = "button dark";
|
|
|
- btn.onclick = function () {
|
|
|
- binding.value.go();
|
|
|
- };
|
|
|
- right.style.display = "block";
|
|
|
- right.style.left = policeL + 300 + "px";
|
|
|
- right.style.top = policeT + 35 + "px";
|
|
|
- } else {
|
|
|
- btn.className = "button";
|
|
|
- btn.onclick = null;
|
|
|
- right.style.display = "none";
|
|
|
- }
|
|
|
- }
|
|
|
- function st(nl, nt, type) {
|
|
|
- var _aiL = _ai.offsetLeft;
|
|
|
- var _aiT = _ai.offsetTop;
|
|
|
-
|
|
|
- var _G1L = _G1.offsetLeft;
|
|
|
- var _G1T = _G1.offsetTop;
|
|
|
-
|
|
|
- var _G5L = _G5.offsetLeft;
|
|
|
- var _G5T = _G5.offsetTop;
|
|
|
-
|
|
|
- var _G4L = _G4.offsetLeft;
|
|
|
- var _G4T = _G4.offsetTop;
|
|
|
-
|
|
|
- var _G2L = _G2.offsetLeft;
|
|
|
- var _G2T = _G2.offsetTop;
|
|
|
-
|
|
|
- var _G3L = _G3.offsetLeft;
|
|
|
- var _G3T = _G3.offsetTop;
|
|
|
-
|
|
|
- var _light1L = _light1.offsetLeft;
|
|
|
- var _light1T = _light1.offsetTop;
|
|
|
-
|
|
|
- var _light2L = _light2.offsetLeft;
|
|
|
- var _light2T = _light2.offsetTop;
|
|
|
-
|
|
|
- var _lineL = _line.offsetLeft;
|
|
|
- var _lineT = _line.offsetTop;
|
|
|
-
|
|
|
- var ag1L = _aiL - _G1L;
|
|
|
- var ag1T = _aiT - _G1T;
|
|
|
-
|
|
|
- var g5g1L = _G5L - _G1L;
|
|
|
- var g5g1T = _G5T - _G1T;
|
|
|
-
|
|
|
- var g4g1L = _G4L - _G1L;
|
|
|
- var g4g1T = _G4T - _G1T;
|
|
|
-
|
|
|
- var g2g1L = _G2L - _G1L;
|
|
|
- var g2g1T = _G2T - _G1T;
|
|
|
-
|
|
|
- var g3g1L = _G3L - _G1L;
|
|
|
- var g3g1T = _G3T - _G1T;
|
|
|
-
|
|
|
- var l1g1L = _light1L - _G1L;
|
|
|
- var l1g1T = _light1T - _G1T;
|
|
|
-
|
|
|
- var l2g1L = _light2L - _G1L;
|
|
|
- var l2g1T = _light2T - _G1T;
|
|
|
-
|
|
|
- var lg1L = _lineL - _G1L;
|
|
|
- var lg1T = _lineT - _G1T;
|
|
|
-
|
|
|
- var l1lL = _light1L - _lineL;
|
|
|
- var l1lT = _light1T - _lineT;
|
|
|
-
|
|
|
- var l2lL = _light2L - _lineL;
|
|
|
- var l2lT = _light2T - _lineT;
|
|
|
-
|
|
|
- if (
|
|
|
- 22 < ag1L &&
|
|
|
- ag1L < 62 &&
|
|
|
- -156 < ag1T &&
|
|
|
- ag1T < -116 &&
|
|
|
- type == "ai"
|
|
|
- ) {
|
|
|
- _ai.style.left = _G1L + 42 + "px";
|
|
|
- _ai.style.top = _G1T - 136 + "px";
|
|
|
- binding.value.setAi(1);
|
|
|
- playMusic();
|
|
|
- } else if (type == "ai") {
|
|
|
- binding.value.setAi(0);
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- -10 < g5g1L &&
|
|
|
- g5g1L < 30 &&
|
|
|
- -165 < g5g1T &&
|
|
|
- g5g1T < -125 &&
|
|
|
- type == "G5"
|
|
|
- ) {
|
|
|
- _G5.style.left = _G1L + 10 + "px";
|
|
|
- _G5.style.top = _G1T - 145 + "px";
|
|
|
- binding.value.setG5(1);
|
|
|
- playMusic();
|
|
|
- } else if (type == "G5") {
|
|
|
- binding.value.setG5(0);
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- -20 < g4g1L &&
|
|
|
- g4g1L < 20 &&
|
|
|
- -58 < g4g1T &&
|
|
|
- g4g1T < -18 &&
|
|
|
- type == "G4"
|
|
|
- ) {
|
|
|
- _G4.style.left = _G1L + "px";
|
|
|
- _G4.style.top = _G1T - 38 + "px";
|
|
|
- binding.value.setG4(1);
|
|
|
- playMusic();
|
|
|
- } else if (type == "G4") {
|
|
|
- binding.value.setG4(0);
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- 95 < g2g1L &&
|
|
|
- g2g1L < 135 &&
|
|
|
- 84 < g2g1T &&
|
|
|
- g2g1T < 124 &&
|
|
|
- type == "G2"
|
|
|
- ) {
|
|
|
- _G2.style.left = _G1L + 115 + "px";
|
|
|
- _G2.style.top = _G1T + 104 + "px";
|
|
|
- binding.value.setG2(1);
|
|
|
- playMusic();
|
|
|
- } else if (type == "G2") {
|
|
|
- binding.value.setG2(0);
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- 24 < g3g1L &&
|
|
|
- g3g1L < 64 &&
|
|
|
- 87 < g3g1T &&
|
|
|
- g3g1T < 127 &&
|
|
|
- type == "G3" &&
|
|
|
- binding.value.getG2() == 1
|
|
|
- ) {
|
|
|
- _G3.style.left = _G1L + 44 + "px";
|
|
|
- _G3.style.top = _G1T + 107 + "px";
|
|
|
- binding.value.setG3(1);
|
|
|
- playMusic();
|
|
|
- } else if (type == "G3") {
|
|
|
- binding.value.setG3(0);
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- 24 < l1g1L &&
|
|
|
- l1g1L < 64 &&
|
|
|
- -156 < l1g1T &&
|
|
|
- l1g1T < -116 &&
|
|
|
- type == "light1"
|
|
|
- ) {
|
|
|
- _light1.style.left = _G1L + 44 + "px";
|
|
|
- _light1.style.top = _G1T - 136 + "px";
|
|
|
- binding.value.setLight1(1);
|
|
|
- playMusic();
|
|
|
- } else if (
|
|
|
- 24 < l1lL &&
|
|
|
- l1lL < 64 &&
|
|
|
- 29 < l1lT &&
|
|
|
- l1lT < 69 &&
|
|
|
- type == "light1"
|
|
|
- ) {
|
|
|
- _light1.style.left = _lineL + 44 + "px";
|
|
|
- _light1.style.top = _lineT + 49 + "px";
|
|
|
- binding.value.setLight1(2);
|
|
|
- playMusic();
|
|
|
- } else if (type == "light1") {
|
|
|
- binding.value.setLight1(0);
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- -38 < l2g1L &&
|
|
|
- l2g1L < 8 &&
|
|
|
- -171 < l2g1T &&
|
|
|
- l2g1T < -131 &&
|
|
|
- type == "light2"
|
|
|
- ) {
|
|
|
- _light2.style.left = _G1L - 18 + "px";
|
|
|
- _light2.style.top = _G1T - 151 + "px";
|
|
|
- binding.value.setLight2(1);
|
|
|
- playMusic();
|
|
|
- } else if (
|
|
|
- -38 < l2lL &&
|
|
|
- l2lL < 2 &&
|
|
|
- 14 < l2lT &&
|
|
|
- l2lT < 54 &&
|
|
|
- type == "light2"
|
|
|
- ) {
|
|
|
- _light2.style.left = _lineL - 18 + "px";
|
|
|
- _light2.style.top = _lineT + 34 + "px";
|
|
|
- binding.value.setLight2(2);
|
|
|
- playMusic();
|
|
|
- } else if (type == "light2") {
|
|
|
- binding.value.setLight2(0);
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- -20 < lg1L &&
|
|
|
- lg1L < 20 &&
|
|
|
- -205 < lg1T &&
|
|
|
- lg1T < -165 &&
|
|
|
- type == "line" &&
|
|
|
- (binding.value.getLight1() === 1 ||
|
|
|
- binding.value.getLight2() === 1 ||
|
|
|
- binding.value.getLight1() === 2 ||
|
|
|
- binding.value.getLight2() === 2)
|
|
|
- ) {
|
|
|
- _line.style.left = _G1L + "px";
|
|
|
- _line.style.top = _G1T - 185 + "px";
|
|
|
- if (
|
|
|
- binding.value.getLight1() === 2 ||
|
|
|
- binding.value.getLight1() === 1
|
|
|
- ) {
|
|
|
- _light1.style.left = _G1L + 44 + "px";
|
|
|
- _light1.style.top = _G1T - 136 + "px";
|
|
|
- }
|
|
|
- if (
|
|
|
- binding.value.getLight2() === 2 ||
|
|
|
- binding.value.getLight2() === 1
|
|
|
- ) {
|
|
|
- _light2.style.left = _G1L - 18 + "px";
|
|
|
- _light2.style.top = _G1T - 151 + "px";
|
|
|
- }
|
|
|
- binding.value.setLine(1);
|
|
|
- playMusic();
|
|
|
- } else if (type == "line") {
|
|
|
- binding.value.setLine(0);
|
|
|
- }
|
|
|
- }
|
|
|
- function playMusic() {
|
|
|
- musicC.play();
|
|
|
- }
|
|
|
-
|
|
|
- function moveP(nl, nt, type) {
|
|
|
- if (binding.value.getAi() === 1 && type == "G1") {
|
|
|
- _ai.style.left = nl + 42 + "px";
|
|
|
- _ai.style.top = nt - 136 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- if (binding.value.getG5() === 1 && type == "G1") {
|
|
|
- _G5.style.left = nl + 10 + "px";
|
|
|
- _G5.style.top = nt - 145 + "px";
|
|
|
- }
|
|
|
- if (binding.value.getG4() === 1 && type == "G1") {
|
|
|
- _G4.style.left = nl + "px";
|
|
|
- _G4.style.top = nt - 38 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- if (binding.value.getG2() === 1 && type == "G1") {
|
|
|
- _G2.style.left = nl + 115 + "px";
|
|
|
- _G2.style.top = nt + 104 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- if (binding.value.getG3() === 1 && type == "G1") {
|
|
|
- _G3.style.left = nl + 44 + "px";
|
|
|
- _G3.style.top = nt + 107 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- (binding.value.getLight1() === 1 ||
|
|
|
- (binding.value.getLight1() === 2 &&
|
|
|
- binding.value.getLine() === 1)) &&
|
|
|
- type == "G1"
|
|
|
- ) {
|
|
|
- _light1.style.left = nl + 44 + "px";
|
|
|
- _light1.style.top = nt - 136 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- (binding.value.getLight2() === 1 ||
|
|
|
- (binding.value.getLight2() === 2 &&
|
|
|
- binding.value.getLine() === 1)) &&
|
|
|
- type == "G1"
|
|
|
- ) {
|
|
|
- _light2.style.left = nl - 18 + "px";
|
|
|
- _light2.style.top = nt - 151 + "px";
|
|
|
- }
|
|
|
- if (binding.value.getLine() === 1 && type == "G1") {
|
|
|
- _line.style.left = nl + "px";
|
|
|
- _line.style.top = nt - 185 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- if (binding.value.getLight1() === 2 && type == "line") {
|
|
|
- _light1.style.left = nl + 44 + "px";
|
|
|
- _light1.style.top = nt + 49 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- if (binding.value.getLight2() === 2 && type == "line") {
|
|
|
- _light2.style.left = nl - 18 + "px";
|
|
|
- _light2.style.top = nt + 34 + "px";
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- binding.value.getLight1() === 1 &&
|
|
|
- binding.value.getLine() === 1 &&
|
|
|
- type == "line"
|
|
|
- ) {
|
|
|
- _light1.style.left = nl + 44 + "px";
|
|
|
- _light1.style.top = nt + 49 + "px";
|
|
|
- binding.value.setLight1(2);
|
|
|
- }
|
|
|
-
|
|
|
- if (
|
|
|
- binding.value.getLight2() === 1 &&
|
|
|
- binding.value.getLine() === 1 &&
|
|
|
- type == "line"
|
|
|
- ) {
|
|
|
- _light2.style.left = nl - 18 + "px";
|
|
|
- _light2.style.top = nt + 34 + "px";
|
|
|
- binding.value.setLight2(2);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- methods: {
|
|
|
- go() {
|
|
|
- this.$router.push("/blockly");
|
|
|
- },
|
|
|
- setPan(value) {
|
|
|
- this.panThing = value;
|
|
|
- },
|
|
|
- getPan() {
|
|
|
- return this.panThing;
|
|
|
- },
|
|
|
- setAi(value) {
|
|
|
- this.ai = value;
|
|
|
- },
|
|
|
- getAi() {
|
|
|
- return this.ai;
|
|
|
- },
|
|
|
- setG5(value) {
|
|
|
- this.G5 = value;
|
|
|
- },
|
|
|
- getG5() {
|
|
|
- return this.G5;
|
|
|
- },
|
|
|
- setG4(value) {
|
|
|
- this.G4 = value;
|
|
|
- },
|
|
|
- getG4() {
|
|
|
- return this.G4;
|
|
|
- },
|
|
|
- setG2(value) {
|
|
|
- this.G2 = value;
|
|
|
- },
|
|
|
- getG2() {
|
|
|
- return this.G2;
|
|
|
- },
|
|
|
- setG3(value) {
|
|
|
- this.G3 = value;
|
|
|
- },
|
|
|
- getG3() {
|
|
|
- return this.G3;
|
|
|
- },
|
|
|
- setLight1(value) {
|
|
|
- this.Light1 = value;
|
|
|
- },
|
|
|
- getLight1() {
|
|
|
- return this.Light1;
|
|
|
- },
|
|
|
- setLight2(value) {
|
|
|
- this.Light2 = value;
|
|
|
- },
|
|
|
- getLight2() {
|
|
|
- return this.Light2;
|
|
|
- },
|
|
|
- setLine(value) {
|
|
|
- this.Line = value;
|
|
|
- },
|
|
|
- getLine() {
|
|
|
- return this.Line;
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ that: this,
|
|
|
+ panThing: "",
|
|
|
+ ai: "",
|
|
|
+ G5: "",
|
|
|
+ G4: "",
|
|
|
+ G2: "",
|
|
|
+ G3: "",
|
|
|
+ Light1: "",
|
|
|
+ Light2: "",
|
|
|
+ Line: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 _ai = document.getElementById("ai");
|
|
|
+ var _G1 = document.getElementById("G1");
|
|
|
+ var _G5 = document.getElementById("G5");
|
|
|
+ var _G4 = document.getElementById("G4");
|
|
|
+ var _G2 = document.getElementById("G2");
|
|
|
+ var _G3 = document.getElementById("G3");
|
|
|
+ var _light1 = document.getElementById("light1");
|
|
|
+ var _light2 = document.getElementById("light2");
|
|
|
+ var _line = document.getElementById("line");
|
|
|
+
|
|
|
+ //鼠标按下事件
|
|
|
+ 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 == "ai") {
|
|
|
+ binding.value.setPan("ai");
|
|
|
+ moveP(nl, nt, "ai");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (el.id == "G1") {
|
|
|
+ binding.value.setPan("G1");
|
|
|
+ moveP(nl, nt, "G1");
|
|
|
+ }
|
|
|
+ if (el.id == "G5") {
|
|
|
+ binding.value.setPan("G5");
|
|
|
+ moveP(nl, nt, "G5");
|
|
|
+ }
|
|
|
+ if (el.id == "G4") {
|
|
|
+ binding.value.setPan("G4");
|
|
|
+ moveP(nl, nt, "G4");
|
|
|
+ }
|
|
|
+ if (el.id == "G2") {
|
|
|
+ binding.value.setPan("G2");
|
|
|
+ moveP(nl, nt, "G2");
|
|
|
+ }
|
|
|
+ if (el.id == "G3") {
|
|
|
+ binding.value.setPan("G3");
|
|
|
+ moveP(nl, nt, "G3");
|
|
|
+ }
|
|
|
+ if (el.id == "light1") {
|
|
|
+ binding.value.setPan("light1");
|
|
|
+ moveP(nl, nt, "light1");
|
|
|
+ }
|
|
|
+ if (el.id == "light2") {
|
|
|
+ binding.value.setPan("light2");
|
|
|
+ moveP(nl, nt, "light2");
|
|
|
+ }
|
|
|
+ if (el.id == "line") {
|
|
|
+ binding.value.setPan("line");
|
|
|
+ moveP(nl, nt, "line");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ //鼠标抬起事件
|
|
|
+ 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() == "ai") {
|
|
|
+ st(nl, nt, "ai");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "G1") {
|
|
|
+ st(nl, nt, "G1");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "G5") {
|
|
|
+ st(nl, nt, "G5");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getPan() == "G4") {
|
|
|
+ st(nl, nt, "G4");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "G2") {
|
|
|
+ st(nl, nt, "G2");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "G3") {
|
|
|
+ st(nl, nt, "G3");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "light1") {
|
|
|
+ st(nl, nt, "light1");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "light2") {
|
|
|
+ st(nl, nt, "light2");
|
|
|
+ }
|
|
|
+ if (binding.value.getPan() == "line") {
|
|
|
+ st(nl, nt, "line");
|
|
|
+ }
|
|
|
+ pan();
|
|
|
+ };
|
|
|
+ function pan() {
|
|
|
+ var policeL = _G1.offsetLeft;
|
|
|
+ var policeT = _G1.offsetTop;
|
|
|
+
|
|
|
+ var btn = document.getElementsByClassName("button")[0];
|
|
|
+ var right = document.getElementsByClassName("right")[0];
|
|
|
+
|
|
|
+ if (
|
|
|
+ binding.value.getAi() === 1 &&
|
|
|
+ binding.value.getG5() === 1 &&
|
|
|
+ binding.value.getG4() === 1 &&
|
|
|
+ binding.value.getG2() === 1 &&
|
|
|
+ binding.value.getG3() === 1 &&
|
|
|
+ ((binding.value.getLight1() === 1 &&
|
|
|
+ binding.value.getLight2() === 1) ||
|
|
|
+ (binding.value.getLight1() === 2 &&
|
|
|
+ binding.value.getLight2() === 2) ||
|
|
|
+ (binding.value.getLight1() === 2 &&
|
|
|
+ binding.value.getLight2() === 1) ||
|
|
|
+ (binding.value.getLight1() === 1 &&
|
|
|
+ binding.value.getLight2() === 1)) &&
|
|
|
+ binding.value.getLine() === 1
|
|
|
+ ) {
|
|
|
+ btn.className = "button dark";
|
|
|
+ btn.onclick = function () {
|
|
|
+ binding.value.go();
|
|
|
+ };
|
|
|
+ right.style.display = "block";
|
|
|
+ right.style.left = policeL + 300 + "px";
|
|
|
+ right.style.top = policeT + 35 + "px";
|
|
|
+ } else {
|
|
|
+ btn.className = "button";
|
|
|
+ btn.onclick = null;
|
|
|
+ right.style.display = "none";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function st(nl, nt, type) {
|
|
|
+ var _aiL = _ai.offsetLeft;
|
|
|
+ var _aiT = _ai.offsetTop;
|
|
|
+
|
|
|
+ var _G1L = _G1.offsetLeft;
|
|
|
+ var _G1T = _G1.offsetTop;
|
|
|
+
|
|
|
+ var _G5L = _G5.offsetLeft;
|
|
|
+ var _G5T = _G5.offsetTop;
|
|
|
+
|
|
|
+ var _G4L = _G4.offsetLeft;
|
|
|
+ var _G4T = _G4.offsetTop;
|
|
|
+
|
|
|
+ var _G2L = _G2.offsetLeft;
|
|
|
+ var _G2T = _G2.offsetTop;
|
|
|
+
|
|
|
+ var _G3L = _G3.offsetLeft;
|
|
|
+ var _G3T = _G3.offsetTop;
|
|
|
+
|
|
|
+ var _light1L = _light1.offsetLeft;
|
|
|
+ var _light1T = _light1.offsetTop;
|
|
|
+
|
|
|
+ var _light2L = _light2.offsetLeft;
|
|
|
+ var _light2T = _light2.offsetTop;
|
|
|
+
|
|
|
+ var _lineL = _line.offsetLeft;
|
|
|
+ var _lineT = _line.offsetTop;
|
|
|
+
|
|
|
+ var ag1L = _G1L - _aiL;
|
|
|
+ var ag1T = _G1T - _aiT;
|
|
|
+
|
|
|
+ var g5g1L = _G1L - _G5L;
|
|
|
+ var g5g1T = _G1T - _G5T;
|
|
|
+
|
|
|
+ var g4g1L = _G4L - _G1L;
|
|
|
+ var g4g1T = _G4T - _G1T;
|
|
|
+
|
|
|
+ var g2g1L = _G1L - _G2L;
|
|
|
+ var g2g1T = _G1T - _G2T;
|
|
|
+
|
|
|
+ var g3g1L = _G3L - _G1L;
|
|
|
+ var g3g1T = _G3T - _G1T;
|
|
|
+
|
|
|
+ var l1g1L = _G1L - _light1L;
|
|
|
+ var l1g1T = _G1T - _light1T;
|
|
|
+
|
|
|
+ var l2g1L = _G1L - _light2L;
|
|
|
+ var l2g1T = _G1T - _light2T;
|
|
|
+
|
|
|
+ var lg1L = _G1L - _lineL;
|
|
|
+ var lg1T = _G1T - _lineT;
|
|
|
+
|
|
|
+ var l1lL = _light1L - _lineL;
|
|
|
+ var l1lT = _light1T - _lineT;
|
|
|
+
|
|
|
+ var l2lL = _light2L - _lineL;
|
|
|
+ var l2lT = _light2T - _lineT;
|
|
|
+
|
|
|
+ if (
|
|
|
+ -189 < ag1L &&
|
|
|
+ ag1L < 85 &&
|
|
|
+ 34 < ag1T &&
|
|
|
+ ag1T < 304 &&
|
|
|
+ type == "ai"
|
|
|
+ ) {
|
|
|
+ _ai.style.left = _G1L + 51 + "px";
|
|
|
+ _ai.style.top = _G1T - 162 + "px";
|
|
|
+ binding.value.setAi(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "ai") {
|
|
|
+ binding.value.setAi(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -26 < g5g1L &&
|
|
|
+ g5g1L < -5 &&
|
|
|
+ 95 < g5g1T &&
|
|
|
+ g5g1T < 353 &&
|
|
|
+ type == "G5"
|
|
|
+ ) {
|
|
|
+ _G5.style.left = _G1L + 16 + "px";
|
|
|
+ _G5.style.top = _G1T - 191 + "px";
|
|
|
+ binding.value.setG5(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "G5") {
|
|
|
+ binding.value.setG5(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -20 < g4g1L &&
|
|
|
+ g4g1L < 20 &&
|
|
|
+ -58 < g4g1T &&
|
|
|
+ g4g1T < -18 &&
|
|
|
+ type == "G4"
|
|
|
+ ) {
|
|
|
+ _G4.style.left = _G1L + "px";
|
|
|
+ _G4.style.top = _G1T - 38 + "px";
|
|
|
+ binding.value.setG4(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "G4") {
|
|
|
+ binding.value.setG4(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -149 < g2g1L &&
|
|
|
+ g2g1L < -126 &&
|
|
|
+ -413 < g2g1T &&
|
|
|
+ g2g1T < -29 &&
|
|
|
+ type == "G2"
|
|
|
+ ) {
|
|
|
+ _G2.style.left = _G1L + 136 + "px";
|
|
|
+ _G2.style.top = _G1T + 123 + "px";
|
|
|
+ binding.value.setG2(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "G2") {
|
|
|
+ binding.value.setG2(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ 24 < g3g1L &&
|
|
|
+ g3g1L < 64 &&
|
|
|
+ 87 < g3g1T &&
|
|
|
+ g3g1T < 127 &&
|
|
|
+ type == "G3" &&
|
|
|
+ binding.value.getG2() == 1
|
|
|
+ ) {
|
|
|
+ _G3.style.left = _G1L + 56 + "px";
|
|
|
+ _G3.style.top = _G1T + 121 + "px";
|
|
|
+ binding.value.setG3(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "G3") {
|
|
|
+ binding.value.setG3(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -187 < l1g1L &&
|
|
|
+ l1g1L < 93 &&
|
|
|
+ 22 < l1g1T &&
|
|
|
+ l1g1T < 299 &&
|
|
|
+ type == "light1"
|
|
|
+ ) {
|
|
|
+ _light1.style.left = _G1L + 54 + "px";
|
|
|
+ _light1.style.top = _G1T - 157 + "px";
|
|
|
+ binding.value.setLight1(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (
|
|
|
+ 24 < l1lL &&
|
|
|
+ l1lL < 64 &&
|
|
|
+ 29 < l1lT &&
|
|
|
+ l1lT < 69 &&
|
|
|
+ type == "light1"
|
|
|
+ ) {
|
|
|
+ _light1.style.left = _lineL + 44 + "px";
|
|
|
+ _light1.style.top = _lineT + 49 + "px";
|
|
|
+ binding.value.setLight1(2);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "light1") {
|
|
|
+ binding.value.setLight1(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -13 < l2g1L &&
|
|
|
+ l2g1L < 26 &&
|
|
|
+ 121 < l2g1T &&
|
|
|
+ l2g1T < 302 &&
|
|
|
+ type == "light2"
|
|
|
+ ) {
|
|
|
+ _light2.style.left = _G1L - 11 + "px";
|
|
|
+ _light2.style.top = _G1T - 187 + "px";
|
|
|
+ binding.value.setLight2(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (
|
|
|
+ -38 < l2lL &&
|
|
|
+ l2lL < 2 &&
|
|
|
+ 14 < l2lT &&
|
|
|
+ l2lT < 54 &&
|
|
|
+ type == "light2"
|
|
|
+ ) {
|
|
|
+ _light2.style.left = _lineL - 18 + "px";
|
|
|
+ _light2.style.top = _lineT + 34 + "px";
|
|
|
+ binding.value.setLight2(2);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "light2") {
|
|
|
+ binding.value.setLight2(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ -20 < lg1L &&
|
|
|
+ lg1L < 10 &&
|
|
|
+ 200 < lg1T &&
|
|
|
+ lg1T < 267 &&
|
|
|
+ type == "line" &&
|
|
|
+ (binding.value.getLight1() === 1 ||
|
|
|
+ binding.value.getLight2() === 1 ||
|
|
|
+ binding.value.getLight1() === 2 ||
|
|
|
+ binding.value.getLight2() === 2)
|
|
|
+ ) {
|
|
|
+ _line.style.left = _G1L + 5 + "px";
|
|
|
+ _line.style.top = _G1T - 230 + "px";
|
|
|
+ if (
|
|
|
+ binding.value.getLight1() === 2 ||
|
|
|
+ binding.value.getLight1() === 1
|
|
|
+ ) {
|
|
|
+ _light1.style.left = _G1L + 54 + "px";
|
|
|
+ _light1.style.top = _G1T - 157 + "px";
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ binding.value.getLight2() === 2 ||
|
|
|
+ binding.value.getLight2() === 1
|
|
|
+ ) {
|
|
|
+ _light2.style.left = _G1L - 11 + "px";
|
|
|
+ _light2.style.top = _G1T - 187 + "px";
|
|
|
+ }
|
|
|
+ binding.value.setLine(1);
|
|
|
+ playMusic();
|
|
|
+ } else if (type == "line") {
|
|
|
+ binding.value.setLine(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function playMusic() {
|
|
|
+ musicC.play();
|
|
|
+ }
|
|
|
+
|
|
|
+ function moveP(nl, nt, type) {
|
|
|
+ if (binding.value.getAi() === 1 && type == "G1") {
|
|
|
+ _ai.style.left = nl + 51 + "px";
|
|
|
+ _ai.style.top = nt - 162 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getG5() === 1 && type == "G1") {
|
|
|
+ _G5.style.left = nl + 16 + "px";
|
|
|
+ _G5.style.top = nt - 191 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getG4() === 1 && type == "G1") {
|
|
|
+ _G4.style.left = nl + "px";
|
|
|
+ _G4.style.top = nt - 38 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getG2() === 1 && type == "G1") {
|
|
|
+ _G2.style.left = nl + 136 + "px";
|
|
|
+ _G2.style.top = nt + 123 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getG3() === 1 && type == "G1") {
|
|
|
+ _G3.style.left = nl + 56 + "px";
|
|
|
+ _G3.style.top = nt + 121 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ (binding.value.getLight1() === 1 ||
|
|
|
+ (binding.value.getLight1() === 2 &&
|
|
|
+ binding.value.getLine() === 1)) &&
|
|
|
+ type == "G1"
|
|
|
+ ) {
|
|
|
+ _light1.style.left = nl + 54 + "px";
|
|
|
+ _light1.style.top = nt - 157 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ (binding.value.getLight2() === 1 ||
|
|
|
+ (binding.value.getLight2() === 2 &&
|
|
|
+ binding.value.getLine() === 1)) &&
|
|
|
+ type == "G1"
|
|
|
+ ) {
|
|
|
+ _light2.style.left = nl - 11 + "px";
|
|
|
+ _light2.style.top = nt - 187 + "px";
|
|
|
+ }
|
|
|
+ if (binding.value.getLine() === 1 && type == "G1") {
|
|
|
+ _line.style.left = nl + 5 + "px";
|
|
|
+ _line.style.top = nt - 230 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getLight1() === 2 && type == "line") {
|
|
|
+ _light1.style.left = nl + 44 + "px";
|
|
|
+ _light1.style.top = nt + 49 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (binding.value.getLight2() === 2 && type == "line") {
|
|
|
+ _light2.style.left = nl - 18 + "px";
|
|
|
+ _light2.style.top = nt + 34 + "px";
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ binding.value.getLight1() === 1 &&
|
|
|
+ binding.value.getLine() === 1 &&
|
|
|
+ type == "line"
|
|
|
+ ) {
|
|
|
+ _light1.style.left = nl + 44 + "px";
|
|
|
+ _light1.style.top = nt + 49 + "px";
|
|
|
+ binding.value.setLight1(2);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ binding.value.getLight2() === 1 &&
|
|
|
+ binding.value.getLine() === 1 &&
|
|
|
+ type == "line"
|
|
|
+ ) {
|
|
|
+ _light2.style.left = nl - 18 + "px";
|
|
|
+ _light2.style.top = nt + 34 + "px";
|
|
|
+ binding.value.setLight2(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ go() {
|
|
|
+ this.$router.push("/blockly");
|
|
|
+ },
|
|
|
+ setPan(value) {
|
|
|
+ this.panThing = value;
|
|
|
+ },
|
|
|
+ getPan() {
|
|
|
+ return this.panThing;
|
|
|
+ },
|
|
|
+ setAi(value) {
|
|
|
+ this.ai = value;
|
|
|
+ },
|
|
|
+ getAi() {
|
|
|
+ return this.ai;
|
|
|
+ },
|
|
|
+ setG5(value) {
|
|
|
+ this.G5 = value;
|
|
|
+ },
|
|
|
+ getG5() {
|
|
|
+ return this.G5;
|
|
|
+ },
|
|
|
+ setG4(value) {
|
|
|
+ this.G4 = value;
|
|
|
+ },
|
|
|
+ getG4() {
|
|
|
+ return this.G4;
|
|
|
+ },
|
|
|
+ setG2(value) {
|
|
|
+ this.G2 = value;
|
|
|
+ },
|
|
|
+ getG2() {
|
|
|
+ return this.G2;
|
|
|
+ },
|
|
|
+ setG3(value) {
|
|
|
+ this.G3 = value;
|
|
|
+ },
|
|
|
+ getG3() {
|
|
|
+ return this.G3;
|
|
|
+ },
|
|
|
+ setLight1(value) {
|
|
|
+ this.Light1 = value;
|
|
|
+ },
|
|
|
+ getLight1() {
|
|
|
+ return this.Light1;
|
|
|
+ },
|
|
|
+ setLight2(value) {
|
|
|
+ this.Light2 = value;
|
|
|
+ },
|
|
|
+ getLight2() {
|
|
|
+ return this.Light2;
|
|
|
+ },
|
|
|
+ setLine(value) {
|
|
|
+ this.Line = value;
|
|
|
+ },
|
|
|
+ getLine() {
|
|
|
+ return this.Line;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-html,
|
|
|
-body {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.tip {
|
|
|
- margin: 25px 0 30px 20px;
|
|
|
- width: 419px;
|
|
|
-}
|
|
|
-
|
|
|
-.right > img,
|
|
|
-#ai > img,
|
|
|
-#light1 > img,
|
|
|
-#line > img,
|
|
|
-#light2 > img,
|
|
|
-#G1 > img,
|
|
|
-#G5 > img,
|
|
|
-#G4 > img,
|
|
|
-#G2 > img,
|
|
|
-#G3 > img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- user-select: none;
|
|
|
-}
|
|
|
-
|
|
|
-.img {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-end;
|
|
|
- margin: auto;
|
|
|
- width: 70%;
|
|
|
- /* position: relative; */
|
|
|
-}
|
|
|
-
|
|
|
-#ai {
|
|
|
- width: 170px;
|
|
|
- position: absolute;
|
|
|
- top: 45%;
|
|
|
- left: 20%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 5;
|
|
|
-}
|
|
|
-
|
|
|
-#light1 {
|
|
|
- width: 165px;
|
|
|
- position: absolute;
|
|
|
- top: 65%;
|
|
|
- left: 20%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 5;
|
|
|
-}
|
|
|
-#line {
|
|
|
- width: 200px;
|
|
|
- position: absolute;
|
|
|
- top: 45%;
|
|
|
- left: 19.2%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 3;
|
|
|
-}
|
|
|
-#light2 {
|
|
|
- width: 40px;
|
|
|
- position: absolute;
|
|
|
- left: 31%;
|
|
|
- top: 64%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 6;
|
|
|
-}
|
|
|
-#G1 {
|
|
|
- width: 235px;
|
|
|
- position: absolute;
|
|
|
- left: 38%;
|
|
|
- top: 56%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 4;
|
|
|
-}
|
|
|
-#G5 {
|
|
|
- width: 27px;
|
|
|
- position: absolute;
|
|
|
- left: 56%;
|
|
|
- top: 58%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 9;
|
|
|
-}
|
|
|
-
|
|
|
-#G4 {
|
|
|
- width: 240px;
|
|
|
- position: absolute;
|
|
|
- left: 55%;
|
|
|
- top: 32%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 9;
|
|
|
-}
|
|
|
-#G2 {
|
|
|
- width: 25px;
|
|
|
- position: absolute;
|
|
|
- left: 60%;
|
|
|
- top: 57%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 6;
|
|
|
-}
|
|
|
-#G3 {
|
|
|
- width: 170px;
|
|
|
- position: absolute;
|
|
|
- left: 65%;
|
|
|
- top: 58%;
|
|
|
- transform: translateY(-50%);
|
|
|
- z-index: 9;
|
|
|
-}
|
|
|
-.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;
|
|
|
-}
|
|
|
+ html,
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ margin: 25px 0 30px 20px;
|
|
|
+ width: 419px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right > img,
|
|
|
+ #ai > img,
|
|
|
+ #light1 > img,
|
|
|
+ #line > img,
|
|
|
+ #light2 > img,
|
|
|
+ #G1 > img,
|
|
|
+ #G5 > img,
|
|
|
+ #G4 > img,
|
|
|
+ #G2 > img,
|
|
|
+ #G3 > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin: auto;
|
|
|
+ width: 70%;
|
|
|
+ /* position: relative; */
|
|
|
+ }
|
|
|
+
|
|
|
+ #ai {
|
|
|
+ width: 205px;
|
|
|
+ position: absolute;
|
|
|
+ top: 45%;
|
|
|
+ left: 20%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 5;
|
|
|
+ }
|
|
|
+
|
|
|
+ #light1 {
|
|
|
+ width: 205px;
|
|
|
+ position: absolute;
|
|
|
+ top: 65%;
|
|
|
+ left: 20%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 5;
|
|
|
+ }
|
|
|
+ #line {
|
|
|
+ width: 200px;
|
|
|
+ position: absolute;
|
|
|
+ top: 45%;
|
|
|
+ left: 19.2%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ #light2 {
|
|
|
+ width: 40px;
|
|
|
+ position: absolute;
|
|
|
+ left: 31%;
|
|
|
+ top: 64%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 6;
|
|
|
+ }
|
|
|
+ #G1 {
|
|
|
+ width: 280px;
|
|
|
+ position: absolute;
|
|
|
+ left: 38%;
|
|
|
+ top: 56%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 4;
|
|
|
+ }
|
|
|
+ #G5 {
|
|
|
+ width: 27px;
|
|
|
+ position: absolute;
|
|
|
+ left: 56%;
|
|
|
+ top: 58%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+
|
|
|
+ #G4 {
|
|
|
+ width: 280px;
|
|
|
+ position: absolute;
|
|
|
+ left: 55%;
|
|
|
+ top: 32%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+ #G2 {
|
|
|
+ width: 30px;
|
|
|
+ position: absolute;
|
|
|
+ left: 60%;
|
|
|
+ top: 57%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 6;
|
|
|
+ }
|
|
|
+ #G3 {
|
|
|
+ width: 195px;
|
|
|
+ position: absolute;
|
|
|
+ left: 65%;
|
|
|
+ top: 58%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ z-index: 9;
|
|
|
+ }
|
|
|
+ .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>
|
zengyicheng
