efats

src/components/MusicOnce.vue

@@ -0,0 +1,31 @@
+<template>
+  <audio class="mp3-once" :src="src" ref="audioRef"></audio>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  src: String,
+})
+
+const audioRef = ref()
+
+defineExpose({
+  play: () => {
+    audioRef.value.currentTime = 0
+    audioRef.value.play()
+  },
+  pause: () => audioRef.value.pause(),
+})
+
+</script>
+
+<style lang="less" scoped>
+.mp3-once {
+  display: block;
+  max-height: 1px;
+  max-width: 1px;
+  position: absolute;
+}
+</style>

src/main.js

@@ -4,6 +4,8 @@ import App from './App.vue'
 import router from './router'
 import BackPage from './components/BackPage.vue'
 import GrassGIF from './components/GrassGIF.vue'
+import MusicOnce from './components/MusicOnce.vue'
+
 // 创建 App实例
 const app = createApp(App)
 
@@ -23,6 +25,7 @@ app.use(router)
 app.mount('#app')
 app.component('BackPage', BackPage)
 app.component('GrassGIF', GrassGIF)
+app.component('MusicOnce', MusicOnce)
 
 // createApp(App).mount('#app')
 

src/pages/game/index.vue

@@ -1,6 +1,22 @@
 <template>
-  <div ref="el"></div>
-  <FireWorkListVue :center="center" :raduis="raduis" ref="firesRef" />
+  <div ref="el" />
+  <FireWorkListVue
+    ref="firesRef"
+    :center="center"
+    :raduis="raduis"
+  />
+  <MusicOnce
+    ref="bingoRef"
+    :src="bingoMusic"
+  />
+  <MusicOnce
+    ref="failRef"
+    :src="failMusic"
+  />
+  <MusicOnce
+    ref="successRef"
+    :src="successMusic"
+  />
 </template>
 
 <script setup>
@@ -9,6 +25,11 @@
   import FireWorkListVue from '@/components/FireWorkList.vue';
   import game from "./game.js";
 
+  const path = window.location.origin + window.location.pathname
+  const bingoMusic = `${path}/music/bingo.mp3`
+  const failMusic = `${path}/music/fail.mp3`
+  const successMusic = `${path}/music/bingo.mp3`
+
   // // 修复一个 two-js bug ，当页面返回的时候, 不能正常渲染
   // // 所以这边判断如果第二次进入页面就强制刷新
   // const loadSign = localStorage.getItem('loadSign');
@@ -18,6 +39,9 @@
   // }
 
   const el = ref()
+  const bingoRef = ref()
+  const failRef = ref()
+  const successRef = ref()
   const destroyRef = ref()
   const firesRef = ref()
   const router = useRouter()
@@ -33,7 +57,7 @@
       el: el.value,
       center,
       onError: () => {
-        alert('oo ~')
+        failRef.value.play()
         const t = setTimeout(() => {
           localStorage.setItem('loadSign', '1');
           router.push('/OverPage?type=lose')
@@ -41,6 +65,7 @@
         }, 1000)
       },
       onSuccess: () => {
+        successRef.value.play()
         firesRef.value.toggle()
         // alert('你真牛逼')
         const t = setTimeout(() => {
@@ -50,6 +75,7 @@
         }, 2000)
       },
       onBingo: () => {
+        bingoRef.value.play()
       }
     })