添加背景音效和点击音效，优化体验细节

src/App.vue

@@ -3,7 +3,7 @@
     <!-- <router-view /> -->
     <router-view v-slot="{ Component }">
       <transition
-        name="my"
+        name="fade-in-out"
       >
         <component
           :is="Component"
@@ -12,6 +12,7 @@
     </router-view>
     <button
       v-if="$route.name !== 'HomeView'"
+      v-click-audio
       class="back"
       @click="$router.go(-1)"
     >
@@ -46,6 +47,9 @@ export default {
       transform: scale(1.1);
     }
   }
+  >.bg-music {
+    display: none;
+  }
 }
 </style>
 
@@ -86,16 +90,16 @@ export default {
 // ::-webkit-scrollbar-corner { background: #dddecc; }
 
 // vue组件过渡效果
-.my-enter-active {
+.fade-in-out-enter-active {
   transition: opacity 2s;
 }
-.my-leave-active {
+.fade-in-out-leave-active {
   transition: opacity 2s;
 }
-.my-enter-from {
+.fade-in-out-enter-from {
   opacity: 0;
 }
-.my-leave-to {
+.fade-in-out-leave-to {
   opacity: 0;
 }
 

src/components/GameRule.vue

@@ -7,6 +7,7 @@
         <p>3. 解锁所有章节图纸，建设古镇</p>
       </div>
       <button
+        v-click-audio
         class="confirm"
         @click="recordGameRulePlayed"
       />
@@ -67,6 +68,9 @@ export default {
       background-position: center center;
       width: 25.93vh;
       height: 8.52vh;
+      &:hover {
+        transform: scale(1.1);
+      }
     }
   }
 }

src/components/StartUp.vue

@@ -2,6 +2,7 @@
   <div class="start-up">
     <button
       v-show="!isBeginVideo"
+      v-click-audio
       class="begin"
       @click="onClickBeginVideo"
     >
@@ -22,6 +23,7 @@
     <transition name="fade-in">
       <button
         v-show="isShowSkip"
+        v-click-audio
         class="skip"
         @click="onStartupOver"
       >
@@ -93,6 +95,9 @@ export default {
       letter-spacing: 5px;
       font-family: 'FZShaoEr-M11-Regular';
     }
+    &:hover {
+      transform: translate(-50%, -50%) scale(1.1);
+    }
   }
   >video {
     position: absolute;
@@ -108,6 +113,9 @@ export default {
     >img {
       height: 40px;
     }
+    &:hover {
+      transform: scale(1.1);
+    }
   }
 }
 </style>

src/directives/v-click-audio.js

@@ -0,0 +1,9 @@
+export default {
+  install(app) {
+    app.directive('click-audio', {
+      mounted(el, binding) {
+        el.addEventListener('click', utils.playClickAudio)
+      },
+    })
+  }
+}

src/main.js

@@ -6,6 +6,7 @@ import "@/assets/style/reset.css"
 import "@/assets/style/my-reset.css"
 import UAParser from "@/libs/ua-parser.min.js"
 import clickOutside from "@/directives/v-click-outside.js"
+import clickAudio from "@/directives/v-click-audio.js"
 import mitt from "mitt"
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -66,16 +67,15 @@ window.addEventListener('resize', () => {
 //   e.preventDefault()
 // }
 
-// // safari里只能在交互行为的回调中成功地首次调用audio的play方法，所以需要一个全局的audio元素来播放随时可能需要自发播放的音频。
-// const audioNode = document.createElement("audio")
-// audioNode.id = 'global-audio'
-// audioNode.style.display = 'none'
-// audioNode.loop = true
-// document.body.appendChild(audioNode)
+// 背景音乐
+const bgAudio = new Audio(require('@/assets/audios/bg.mp3'))
+bgAudio.loop = true
+app.config.globalProperties.$bgAudio = bgAudio
 
 app.use(store)
   .use(router)
   .use(clickOutside)
+  .use(clickAudio)
   // .use(VueViewer)
   // .component('HotSpot', HotSpot)
   .mount('#app')

src/utils.js

@@ -118,4 +118,8 @@ export default {
       node.addEventListener('animationend', handleAnimationEnd, { once: true })
     })
   },
+  playClickAudio() {
+    const clickAudio = new Audio(require('@/assets/audios/click.mp3'))
+    clickAudio.play()
+  },
 }

src/views/Bag.vue

@@ -49,6 +49,7 @@
       <p>收集碎片完成拼图游戏，解锁章节图纸</p>
       <p>解锁所有章节图纸，建设古镇</p>
       <button
+        v-click-audio
         class="build"
         @click="onClickBuild"
       />

src/views/Home.vue

@@ -11,12 +11,15 @@
     />
     <transition name="fade-out">
       <StartUp
-        v-show="!hasPlayedStartupVideo"
+        v-if="!hasPlayedStartupVideo"
         @begin="onStartUpBegin"
         @over="onStartUpOver"
       />
     </transition>
-    <button class="lion-male">
+    <button
+      v-click-audio
+      class="lion-male"
+    >
       <img
         class="lion"
         src="@/assets/images/lion-male.png"
@@ -25,6 +28,7 @@
       >
     </button>
     <button
+      v-click-audio
       class="lion-female"
       :class="{
         canScale: isHideMenu,
@@ -45,6 +49,7 @@
         class="level1"
       >
         <h2
+          v-click-audio
           @click="$router.push({
             name: 'Level2',
             query: {
@@ -60,6 +65,8 @@
           class="level2"
         >
           <h3
+            v-click-audio
+
             @click="$router.push({
               name: 'Level3',
               query: {
@@ -77,6 +84,7 @@
     <button
       v-for="(item, idx) in menu"
       :key="idx"
+      v-click-audio
       class="label"
       :style="{
         left: labelPosList.value[idx]?.x + 'px' || '-500px',
@@ -161,6 +169,9 @@ export default {
     },
     onStartUpOver() {
       this.recordStartupVideoPlayed()
+      setTimeout(() => {
+        this.$bgAudio.play()
+      }, 2000)
     }
   },
 }

src/views/Learn.vue

@@ -73,6 +73,14 @@ export default {
     ...mapMutations([
     ]),
   },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      vm.$bgAudio.pause()
+    })
+  },
+  beforeRouteLeave() {
+    this.$bgAudio.play()
+  }
 }
 </script>
 

src/views/Level2.vue

@@ -18,6 +18,7 @@
       <div
         v-for="(item, idx) in sceneInfo.children"
         :key="idx"
+        v-click-audio
         class="menu-item"
         @click="$router.push({
           name: 'Level3',

src/views/Level3.vue

@@ -23,6 +23,7 @@
       </div>
     </menu>
     <button
+      v-click-audio
       class="watch"
       @click="$router.push({
         name: 'WatchView',
@@ -30,6 +31,7 @@
       })"
     />
     <button
+      v-click-audio
       class="learn"
       @click="$router.push({
         name: 'LearnView',
@@ -37,6 +39,7 @@
       })"
     />
     <button
+      v-click-audio
       class="record"
       @click="$router.push({
         name: 'TravelRecord',

src/views/Watch.vue

@@ -5,9 +5,9 @@
     <Teleport
       to="body"
     >
-      <transition name="fade-out">
+      <transition name="fade-in-out">
         <GameRule
-          v-if="!hasPlayedGameRule"
+          v-if="!hasPlayedGameRule && isShowMask"
         />
       </transition>
     </Teleport>
@@ -38,6 +38,7 @@
         draggable="false"
       >
       <img
+        v-click-audio
         class="bag"
         src="@/assets/images/bag.png"
         alt=""
@@ -130,6 +131,7 @@ export default {
   },
   data() {
     return {
+      isShowMask: false, // 不用这个的话，蒙层的显示会没有渐变效果。
     }
   },
   computed: {
@@ -138,6 +140,11 @@ export default {
     ]),
   },
   mounted() {
+    if (!this.hasPlayedGameRule) {
+      setTimeout(() => {
+        this.isShowMask = true
+      }, 0)
+    }
   },
   unmounted() {
   },
@@ -145,6 +152,14 @@ export default {
     ...mapMutations([
     ]),
   },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      vm.$bgAudio.pause()
+    })
+  },
+  beforeRouteLeave() {
+    this.$bgAudio.play()
+  }
 }
 </script>