搞搞搞

.favorites.json

@@ -0,0 +1,11 @@
+[
+    {
+        "type": "Directory",
+        "name": "d:\\projects\\小游戏-博物馆里的徽州古建筑\\code\\src\\assets\\images",
+        "parent_id": null,
+        "fsPath": "d:\\projects\\小游戏-博物馆里的徽州古建筑\\code\\src\\assets\\images",
+        "workspaceRoot": null,
+        "workspacePath": null,
+        "id": "s4lAnz3Se6M97hBk"
+    }
+]

src/utils.js

@@ -67,4 +67,21 @@ export default {
       return fn.apply(context, args)
     }
   },
+  mapPosFromDraftToWindow(posRaw, draftWidth = 1920, draftHeight = 1080) {
+    // true: 实际窗口更宽扁，设计图与实际窗口等宽，上下被裁减
+    // false: 实际窗口更窄高，设计图与实际窗口等高，左右被裁减
+    if (window.innerWidth / window.innerHeight > draftWidth / draftHeight) {
+      const scale = window.innerWidth / draftWidth
+      return {
+        x: posRaw.x * scale,
+        y: posRaw.y * scale - (draftHeight * scale - window.innerHeight) / 2,
+      }
+    } else {
+      const scale = window.innerHeight / draftHeight
+      return {
+        x: posRaw.x * scale - (draftWidth * scale - window.innerWidth) / 2,
+        y: posRaw.y * scale,
+      }
+    }
+  }
 }

src/views/Home.vue

@@ -87,13 +87,11 @@ export default {
     StartUp,
   },
   setup() {
-    const bgImgWidth = 1920
-    const bgImgHeight = 1080
     const labelPosList = reactive({ value: [] })
     function computeLabelsPos() {
       labelPosList.value = []
       for (const iterator of menu) {
-        labelPosList.value.push(getLabelPos(iterator.pos))
+        labelPosList.value.push(utils.mapPosFromDraftToWindow(iterator.pos))
       }
       console.log(labelPosList)
     }
@@ -105,24 +103,6 @@ export default {
       window.removeEventListener('resize', computeLabelsPos)
     })
 
-    function getLabelPos(posRaw) {
-      // true: 实际窗口更宽扁，背景图与实际窗口等宽，上下被裁减
-      // false: 实际窗口更窄高，背景图与实际窗口等高，左右被裁减
-      if (window.innerWidth / window.innerHeight > bgImgWidth / bgImgHeight) {
-        const scale = window.innerWidth / bgImgWidth
-        return {
-          x: posRaw.x * scale,
-          y: posRaw.y * scale - (bgImgHeight * scale - window.innerHeight) / 2,
-        }
-      } else {
-        const scale = window.innerHeight / bgImgHeight
-        return {
-          x: posRaw.x * scale - (bgImgWidth * scale - window.innerWidth) / 2,
-          y: posRaw.y * scale,
-        }
-      }
-    }
-
     const isHideMenu = ref(true)
     const menu = reactive(config.sceneTree)
 

src/views/Learn.vue

@@ -2,17 +2,61 @@
   <div
     class="learn-comp"
   >
-    <!-- <video
+    <video
       src=""
       autoplay
       controls
-    /> -->
+      :style="{
+        left: videoLeft + 'px',
+        top: videoTop + 'px',
+        width: videoWidth + 'px',
+        height: videoHeight + 'px',
+      }"
+    />
   </div>
 </template>
 
 <script>
+import { onMounted, onUnmounted, watch, ref, reactive, computed } from "vue"
+
 export default {
   name: 'HomeView',
+  setup() {
+    const videoLeft = ref(0)
+    const videoTop = ref(0)
+    const videoWidth = ref(0)
+    const videoHeight = ref(0)
+
+    function computeVideoPos() {
+      const topLeft = utils.mapPosFromDraftToWindow({
+        x: 745,
+        y: 625,
+      })
+      const bottomRight = utils.mapPosFromDraftToWindow({
+        x: 1168,
+        y: 934
+      })
+      videoLeft.value = topLeft.x
+      videoTop.value = topLeft.y
+      videoWidth.value = bottomRight.x - topLeft.x
+      videoHeight.value = bottomRight.y - topLeft.y
+    }
+
+    onMounted(() => {
+      computeVideoPos()
+      window.addEventListener('resize', computeVideoPos)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', computeVideoPos)
+    })
+
+    return {
+      videoLeft,
+      videoTop,
+      videoWidth,
+      videoHeight,
+    }
+  },
   data() {
     return {
     }
@@ -45,7 +89,6 @@ export default {
   background-position: center center;
   >video {
     position: absolute;
-
   }
 }
 </style>

src/views/Level3.vue

@@ -77,7 +77,7 @@ export default {
   mounted() {
     setTimeout(() => {
       this.isLionWalking = false
-    }, 6000)
+    }, 5000)
   },
   unmounted() {
   },
@@ -182,8 +182,8 @@ export default {
     width: 0;
     height: 0;
     animation-name: walk;
-    animation-duration: 6s;
-    animation-timing-function: cubic-bezier(.13,.23,.48,.86);
+    animation-duration: 5s;
+    animation-timing-function: cubic-bezier(.23,.38,.59,.77);
     animation-fill-mode: forwards;
     >img.lion {
       position: absolute;

src/views/Watch.vue

@@ -2,17 +2,75 @@
   <div
     class="watch-comp"
   >
-    <!-- <video
+    <video
       src=""
       autoplay
       controls
-    /> -->
+      :style="{
+        left: videoLeft + 'px',
+        top: videoTop + 'px',
+        width: videoWidth + 'px',
+        height: videoHeight + 'px',
+      }"
+    />
+    <div class="bag-wrapper">
+      <img
+        class="jigsaw"
+        src="@/assets/images/jigsaw.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="bag"
+        src="@/assets/images/bag.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
   </div>
 </template>
 
 <script>
+import { onMounted, onUnmounted, watch, ref, reactive, computed } from "vue"
+
 export default {
   name: 'HomeView',
+  setup() {
+    const videoLeft = ref(0)
+    const videoTop = ref(0)
+    const videoWidth = ref(0)
+    const videoHeight = ref(0)
+
+    function computeVideoPos() {
+      const topLeft = utils.mapPosFromDraftToWindow({
+        x: 738,
+        y: 572,
+      })
+      const bottomRight = utils.mapPosFromDraftToWindow({
+        x: 1183,
+        y: 897,
+      })
+      videoLeft.value = topLeft.x
+      videoTop.value = topLeft.y
+      videoWidth.value = bottomRight.x - topLeft.x
+      videoHeight.value = bottomRight.y - topLeft.y
+    }
+
+    onMounted(() => {
+      computeVideoPos()
+      window.addEventListener('resize', computeVideoPos)
+    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', computeVideoPos)
+    })
+
+    return {
+      videoLeft,
+      videoTop,
+      videoWidth,
+      videoHeight,
+    }
+  },
   data() {
     return {
     }
@@ -45,7 +103,40 @@ export default {
   background-position: center center;
   >video {
     position: absolute;
+  }
+  >.bag-wrapper {
+    position: absolute;
+    right: 11vw;
+    bottom: 41px;
+    >img.jigsaw {
+      position: absolute;
+      width: 60px;
+      height: 60px;
+      left: 55px;
+      animation-name: drop;
+      animation-duration: 3s;
+      animation-timing-function: cubic-bezier(.3,.12,.54,.32);
+      animation-iteration-count: infinite;
+      z-index: 1;
+    }
+    >img.bag {
+      position: relative;
+      height: 190px;
+      width: 190px;
+      z-index: 2;
+    }
+  }
+}
 
+@keyframes drop {
+  0% {
+    bottom: 250px;
+  }
+  50% {
+    bottom: 50px;
+  }
+  100% {
+    bottom: 50px;
   }
 }
 </style>