feat: 添加背景音乐及音效；调价训练部位的url记录

‘

src/App.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="page">
     <router-view></router-view>
+    <audio loop autoplay preload="auto" id="audio-bg">
+      <source :src="`${base}sound/bg.wav`" type="audio/wav" />
+    </audio>
+
+    <audio autoplay preload="auto" id="audio-active">
+      <source :src="`${base}sound/active.wav`" type="audio/wav" />
+    </audio>
   </div>
 </template>
 
 <script setup>
 import { onMounted, provide } from 'vue';
 
+const base = import.meta.env.BASE_URL;
 provide('scene', 'center');
 
 function setRem(html) {
@@ -23,6 +31,16 @@ onMounted(() => {
     },
     false,
   );
+
+  const audioBg = document.getElementById('audio-bg');
+  audioBg.volume = 0.3;
+  html.addEventListener(
+    'click',
+    () => {
+      audioBg.play();
+    },
+    false,
+  );
 });
 </script>
 

src/views/GameList.vue

@@ -10,6 +10,7 @@
         @mouseover="mouseover(item.name)"
         @click="openGame(item.name)"
         :style="{ 'background-image': `url(${base}page3/${item.name}.jpg)` }"
+        @mouseout="hoverEnd"
       ></div>
     </div>
     <div class="btn btn-right" :class="{ disabled: page === total - 1 }" @click="handleNext"></div>
@@ -18,13 +19,19 @@
 
 <script setup>
 import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
 import { computed, ref } from 'vue';
 
 // TODO: 训练部位的本地记录 或者 url记录
 
 const store = useStore();
+const route = useRoute();
 const base = import.meta.env.BASE_URL;
 
+if (route.query && route.query.site) {
+  store.commit('setSelectedSite', route.query.site);
+}
+
 const allGames = computed(() => store.getters.selectedGames); // 当前训练部位对应的游戏
 const gameImage = ref(`page3/${allGames.value[0].name}.jpg`); // 大图背景
 const page = ref(0); // 第几页
@@ -59,8 +66,19 @@ function openGame(gameName) {
  * @param {string} gameName 游戏name
  */
 function mouseover(gameName) {
+  hover();
   gameImage.value = `/page3/${gameName}.jpg`;
 }
+
+function hover() {
+  const audioActive = document.getElementById('audio-active');
+  audioActive.play();
+}
+
+function hoverEnd() {
+  const audioActive = document.getElementById('audio-active');
+  audioActive.pause();
+}
 </script>
 
 <style scoped>

src/views/Index.vue

@@ -1,15 +1,27 @@
 <template>
   <div class="container">
     <div class="btn-container">
-      <div class="btn btn-in" @click="$router.push({ name: 'Train' })"></div>
+      <div class="btn btn-in" @click="$router.push({ name: 'Train' })" @mouseover="hover" @mouseout="hoverEnd"></div>
-      <div class="btn btn-out" @click="handleQuit"></div>
+      <div class="btn btn-out" @click="handleQuit" @mouseover="hover" @mouseout="hoverEnd"></div>
     </div>
   </div>
 </template>
 
 <script setup>
+function hover() {
+  const audioActive = document.getElementById('audio-active');
+  audioActive.play();
+}
+
+function hoverEnd() {
+  const audioActive = document.getElementById('audio-active');
+  audioActive.pause();
+}
+
 // 退出
 function handleQuit() {
+  const audioActive = document.getElementById('audio-active');
+  audioActive.play();
   window.postMessage('quit', '*');
 }
 </script>

src/views/TrainSiteList.vue

@@ -36,7 +36,7 @@ function onChange(index) {
 function selectSite(site, i) {
   if (i !== activeIndex.value) return;
   store.commit('setSelectedSite', site.name);
-  router.push({ name: 'Game' });
+  router.push({ path: '/kangfu/game/start/game', query: { site: site.name } });
 }
 </script>