拼图游戏 初步完成

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",

src/App.vue

@@ -85,9 +85,9 @@ export default {
 // }
 
 // 滚动条
-// ::-webkit-scrollbar { background: #dddecc; width: 0.3rem; height: 0.3rem; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
-// ::-webkit-scrollbar-corner { background: #dddecc; }
+::-webkit-scrollbar { background: #dddecc; width: 0.3vw; height: 0.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15vw; }
+::-webkit-scrollbar-corner { background: #dddecc; }
 
 // vue组件过渡效果
 .fade-in-out-enter-active {

src/config.js

@@ -113,7 +113,7 @@ export default {
           jigsawNumber: 3,
           jigsawList: [
             '4.椽（chuan）.png',
-            '5.檩(lin)条.png',
+            '5.檩（lin）条.png',
             '6.连廊.png',
           ]
         },

src/store/index.js

@@ -10,7 +10,7 @@ function resetGameProgress() {
           console.log(innerItem)
           return {
             name: innerItem.name,
-            hasGotJigsaw: false,
+            hasGotJigsaw: true,
             jigsawNumber: innerItem.jigsawNumber,
             jigsawList: [...innerItem.jigsawList],
           }

src/views/Bag.vue

@@ -15,12 +15,7 @@
           top: `calc(${item.top} / 1080 * 100vh)`,
           left: `calc(${item.left} / 1080 * 100vh)`,
         }"
-        @click="$router.push({
-          name: 'JigsawGame',
-          query: {
-            sceneL2Idx: item.idxInConfig,
-          }
-        })"
+        @click="onClickSceneEntry(item)"
       >
         <img
           class=""
@@ -68,6 +63,8 @@
 </template>
 
 <script>
+import { ElMessage } from 'element-plus'
+
 export default {
   name: 'BagView',
   data() {
@@ -79,6 +76,7 @@ export default {
           height: 360,
           top: 50,
           left: 40,
+          isOpen: true,
         },
         {
           idxInConfig: 4,
@@ -86,6 +84,7 @@ export default {
           height: 360,
           top: 50,
           left: 637,
+          isOpen: false,
         },
         {
           idxInConfig: 5,
@@ -93,6 +92,7 @@ export default {
           height: 204,
           top: 420,
           left: 40,
+          isOpen: false,
         },
         {
           idxInConfig: 3,
@@ -100,6 +100,7 @@ export default {
           height: 186,
           top: 634,
           left: 40,
+          isOpen: false,
         },
         {
           idxInConfig: 1,
@@ -107,6 +108,7 @@ export default {
           height: 186,
           top: 634,
           left: 283,
+          isOpen: false,
         },
         {
           idxInConfig: 2,
@@ -114,6 +116,7 @@ export default {
           height: 400,
           top: 420,
           left: 516,
+          isOpen: true,
         },
       ]
     }
@@ -146,6 +149,21 @@ export default {
       } else {
         utils.animateCSS(e.currentTarget, 'headShake')
       }
+    },
+    onClickSceneEntry(item) {
+      if (item.isOpen) {
+        this.$router.push({
+          name: 'JigsawGame',
+          query: {
+            sceneL2Idx: item.idxInConfig,
+          }
+        })
+      } else {
+        ElMessage({
+          message: '敬请期待',
+          type: 'warning',
+        })
+      }
     }
   },
 }

src/views/JigsawGame.vue

@@ -3,8 +3,12 @@
     class="jigsaw-game"
   >
     <div class="left-wrapper">
-      <div>
+      <div
+        @dragover.prevent
+        @drop.prevent="onDrop"
+      >
         <object
+          ref="svgContainer"
           :data="require(`@/assets/images/jigsaw-game-${$route.query.sceneL2Idx}/compound.svg`)"
           type=""
         />
@@ -20,25 +24,30 @@
           draggable="false"
         >
       </h1>
-      <template
-        v-for="(itemL3, idx1) in gameProgress.jigsawProgress[Number($route.query.sceneL2Idx)].children"
-        :key="idx1"
+      <li
+        v-for="(jigsawItem, idx) in jigsawItemsFlatten"
+        :key="idx"
       >
-        <li
-          v-for="(jigsawItem, idx2) in itemL3.jigsawList"
-          :key="idx2"
+        <img
+          class=""
+          :style="{
+            cursor: !jigsawProgressSceneL2.isJigsawDone && jigsawItem.hasGot && !jigsawItem.hasPut ? 'grab' : 'default',
+          }"
+          :src="require(`@/assets/images/jigsaw-game-${$route.query.sceneL2Idx}/jigsaw${jigsawItem.hasGot ? '' : '-shade'}/${jigsawItem.name}`)"
+          alt=""
+          :draggable="!jigsawProgressSceneL2.isJigsawDone && jigsawItem.hasGot && !jigsawItem.hasPut ? true : false"
+          @dragstart="(e) => {
+            onDragStart(e, jigsawItem.name, idx)
+          }"
+          @dragend="onDragEnd(jigsawItem.name)"
         >
-          <img
-            class=""
-            :src="require(`@/assets/images/jigsaw-game-${$route.query.sceneL2Idx}/jigsaw${gameProgress.jigsawProgress[Number($route.query.sceneL2Idx)].isJigsawDone ? '' : '-shade'}/${jigsawItem}`)"
-            alt=""
-            draggable="false"
-          >
-          <div class="jigsaw-name">
-            {{ jigsawItem }}
-          </div>
-        </li>
-      </template>
+        <div
+          class="jigsaw-name"
+          :title="jigsawItem.name.split('.')[1]"
+        >
+          {{ jigsawItem.name.split('.')[1] }}
+        </div>
+      </li>
     </div>
   </div>
 </template>
@@ -48,6 +57,7 @@ import { computed, onMounted, reactive, toRefs, ref } from 'vue'
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
 import { useRoute } from "vue-router"
 import { useStore } from "vuex"
+import { ElMessageBox } from 'element-plus'
 
 export default {
   name: 'JigsawGame',
@@ -68,20 +78,89 @@ export default {
   },
   data() {
     return {
+      jigsawItemsFlatten: []
     }
   },
   computed: {
     ...mapState([
       'gameProgress',
     ]),
+    jigsawProgressSceneL2() {
+      return this.gameProgress.jigsawProgress[Number(this.$route.query.sceneL2Idx)]
+    },
   },
   mounted() {
+    for (const jigsawProgressSceneL3 of this.jigsawProgressSceneL2.children) {
+      for (const jigsawItem of jigsawProgressSceneL3.jigsawList) {
+        this.jigsawItemsFlatten.push({
+          name: jigsawItem,
+          hasGot: jigsawProgressSceneL3.hasGotJigsaw,
+          hasPut: false,
+        })
+      }
+    }
+    setTimeout(() => {
+      if (!this.jigsawProgressSceneL2.isJigsawDone) {
+        const svgRoot = this.$refs.svgContainer.contentDocument
+        const gList = svgRoot.getElementsByTagName('g')
+        for (let index = 1; index < gList.length; index++) {
+          const element = gList[index]
+          element.setAttribute('visibility', 'hidden')
+        }
+      }
+    }, 300)
   },
   unmounted() {
   },
   methods: {
     ...mapMutations([
+      'recordJigsawDone',
     ]),
+    onDragStart(e, jigsawImgName, idx) {
+      console.log(jigsawImgName) // 1.马路.png
+      let temp = jigsawImgName.split('.')
+      temp.pop()
+      const id = `_${temp.join('.')}-剪影_图像`
+      // console.log(id)
+      const svgRoot = this.$refs.svgContainer.contentDocument
+      svgRoot.getElementById(id).setAttribute('visibility', 'show')
+      e.dataTransfer.setData('text/plain', jigsawImgName)
+      e.dataTransfer.setData('text/html', String(idx))
+    },
+    onDragEnd(jigsawImgName) {
+      // console.log(jigsawImgName) // 1.马路.png
+      let temp = jigsawImgName.split('.')
+      temp.pop()
+      const id = `_${temp.join('.')}-剪影_图像`
+      // console.log(id)
+      const svgRoot = this.$refs.svgContainer.contentDocument
+      svgRoot.getElementById(id).setAttribute('visibility', 'hidden')
+    },
+    onDrop(e) {
+      let jigsawImgName = e.dataTransfer.getData('text/plain')
+      console.log(jigsawImgName)
+      let temp = jigsawImgName.split('.')
+      temp.pop()
+      const id = `_${temp.join('.')}_图像`
+      // console.log(id)
+      const svgRoot = this.$refs.svgContainer.contentDocument
+      svgRoot.getElementById(id).setAttribute('visibility', 'show')
+
+      const idx = Number(e.dataTransfer.getData('text/html'))
+      this.jigsawItemsFlatten[idx].hasPut = true
+
+      if (!this.jigsawItemsFlatten.find((item) => {
+        return !item.hasPut
+      })) {
+        ElMessageBox.alert('', '拼图完成！', {
+          confirmButtonText: '确定',
+          callback: (action) => {
+            console.log(action)
+          },
+        })
+        this.recordJigsawDone(Number(this.$route.query.sceneL2Idx))
+      }
+    }
   },
 }
 </script>
@@ -114,6 +193,7 @@ export default {
       height: 100%;
       overflow: hidden;
       >object {
+        user-select: none;
         // width: 100%;
       }
     }
@@ -124,6 +204,7 @@ export default {
     height: calc(648 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     padding-top: calc(8 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     overflow: auto;
+
     >h1 {
       position: absolute;
       left: 0;
@@ -150,6 +231,10 @@ export default {
         font-family: Source Han Sans CN-Bold, Source Han Sans CN;
         font-weight: bold;
         color: #C26827;
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+        user-select: none;
       }
     }
   }

src/views/TravelRecord.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 
 export default {
   name: 'TravelRecord',
@@ -33,11 +33,9 @@ export default {
     ...mapMutations([
     ]),
     onClickBook() {
-      ElMessageBox.alert('', '敬请期待！', {
-        confirmButtonText: '确定',
-        callback: (action) => {
-          console.log(action)
-        },
+      ElMessage({
+        message: '敬请期待',
+        type: 'warning',
       })
     }
   },