ソースを参照

Merge branch 'master' of http://git.ycjcjy.com/honghe/roundabout

[baozhangchao] 3 年 前
コミット
c9034b9f92
共有5 個のファイルを変更した74 個の追加15 個の削除を含む
  1. 1
    1
      src/components/BgMusic.vue
  2. 31
    0
      src/components/MusicOnce.vue
  3. 2
    0
      src/main.js
  4. 39
    13
      src/pages/game/index.vue
  5. 1
    1
      src/utils/initial.js

+ 1
- 1
src/components/BgMusic.vue ファイルの表示

13
     return {
13
     return {
14
       show: false,
14
       show: false,
15
       playing: false,
15
       playing: false,
16
-      url: `${origin}${pathname}bg.mp3`
16
+      url: `${origin}${pathname}music/bg.mp3`
17
     }
17
     }
18
   },
18
   },
19
   mounted() {
19
   mounted() {

+ 31
- 0
src/components/MusicOnce.vue ファイルの表示

1
+<template>
2
+  <audio class="mp3-once" :src="src" ref="audioRef"></audio>
3
+</template>
4
+
5
+<script setup>
6
+import { ref } from 'vue';
7
+
8
+const props = defineProps({
9
+  src: String,
10
+})
11
+
12
+const audioRef = ref()
13
+
14
+defineExpose({
15
+  play: () => {
16
+    audioRef.value.currentTime = 0
17
+    audioRef.value.play()
18
+  },
19
+  pause: () => audioRef.value.pause(),
20
+})
21
+
22
+</script>
23
+
24
+<style lang="less" scoped>
25
+.mp3-once {
26
+  display: block;
27
+  max-height: 1px;
28
+  max-width: 1px;
29
+  position: absolute;
30
+}
31
+</style>

+ 2
- 0
src/main.js ファイルの表示

4
 import BackPage from './components/BackPage.vue'
4
 import BackPage from './components/BackPage.vue'
5
 import GrassGIF from './components/GrassGIF.vue'
5
 import GrassGIF from './components/GrassGIF.vue'
6
 import { Login, redirect } from './utils/initial'
6
 import { Login, redirect } from './utils/initial'
7
+import MusicOnce from './components/MusicOnce.vue'
7
 
8
 
8
 // 创建 App实例
9
 // 创建 App实例
9
 const app = createApp(App)
10
 const app = createApp(App)
24
 app.mount('#app')
25
 app.mount('#app')
25
 app.component('BackPage', BackPage)
26
 app.component('BackPage', BackPage)
26
 app.component('GrassGIF', GrassGIF)
27
 app.component('GrassGIF', GrassGIF)
28
+app.component('MusicOnce', MusicOnce)
27
 
29
 
28
 // createApp(App).mount('#app')
30
 // createApp(App).mount('#app')
29
 
31
 

+ 39
- 13
src/pages/game/index.vue ファイルの表示

1
 <template>
1
 <template>
2
-  <div ref="el"></div>
3
-  <FireWorkListVue :center="center" :raduis="raduis" ref="firesRef" />
2
+  <div ref="el" />
3
+  <FireWorkListVue ref="firesRef" :center="center" :raduis="raduis" />
4
+  <MusicOnce ref="bingoRef" :src="bingoMusic" />
5
+  <MusicOnce ref="failRef" :src="failMusic" />
6
+  <MusicOnce ref="successRef" :src="successMusic" />
4
 </template>
7
 </template>
5
 
8
 
6
 <script setup>
9
 <script setup>
23
 const firesRef = ref()
26
 const firesRef = ref()
24
 const router = useRouter()
27
 const router = useRouter()
25
 const raduis = ref(150)
28
 const raduis = ref(150)
29
+const path = window.location.origin + window.location.pathname
30
+const bingoMusic = `${path}/music/bingo.mp3`
31
+const failMusic = `${path}/music/fail.mp3`
32
+const successMusic = `${path}/music/bingo.mp3`
33
+
34
+// // 修复一个 two-js bug ,当页面返回的时候, 不能正常渲染
35
+// // 所以这边判断如果第二次进入页面就强制刷新
36
+// const loadSign = localStorage.getItem('loadSign');
37
+// if (loadSign) {
38
+//   localStorage.removeItem('loadSign');
39
+//   window.location.href = window.location.href;
40
+// }
41
+
42
+const bingoRef = ref()
43
+const failRef = ref()
44
+const successRef = ref()
26
 
45
 
27
 const center = {
46
 const center = {
28
   x: document.body.offsetWidth / 2,
47
   x: document.body.offsetWidth / 2,
34
     el: el.value,
53
     el: el.value,
35
     center,
54
     center,
36
     onError: () => {
55
     onError: () => {
37
-      alert('oo ~')
56
+      failRef.value.play()
38
       const t = setTimeout(() => {
57
       const t = setTimeout(() => {
39
         localStorage.setItem('loadSign', '1')
58
         localStorage.setItem('loadSign', '1')
40
         router.push('/OverPage?type=lose')
59
         router.push('/OverPage?type=lose')
42
       }, 1000)
61
       }, 1000)
43
     },
62
     },
44
     onSuccess: () => {
63
     onSuccess: () => {
45
-      gameOver().then((e) => {
46
-        firesRef.value.toggle()
47
-        // alert('你真牛逼')
48
-        const t = setTimeout(() => {
49
-          localStorage.setItem('loadSign', '1')
50
-          router.push('/OverPage?type=win')
51
-          clearTimeout(t)
52
-        }, 2000)
53
-      })
64
+      successRef.value.play()
65
+      firesRef.value.toggle()
66
+      // alert('你真牛逼')
67
+      const t = setTimeout(() => {
68
+        localStorage.setItem('loadSign', '1')
69
+        router.push('/OverPage?type=win')
70
+        clearTimeout(t)
71
+      }, 2000)
54
     },
72
     },
55
-    onBingo: () => {}
73
+    onBingo: () => {
74
+      bingoRef.value.play()
75
+    }
56
   })
76
   })
57
 
77
 
58
   raduis.value = destroyRef.value.raduis
78
   raduis.value = destroyRef.value.raduis
59
 }
79
 }
60
 
80
 
81
+onMounted(() => {
82
+  gameInit()
83
+})
84
+
85
+raduis.value = destroyRef.value.raduis
86
+
61
 onMounted(() => {
87
 onMounted(() => {
62
   gameStart()
88
   gameStart()
63
   gameInit()
89
   gameInit()

+ 1
- 1
src/utils/initial.js ファイルの表示

35
 export function share (opt) {
35
 export function share (opt) {
36
   const { origin, pathname, search } = window.location
36
   const { origin, pathname, search } = window.location
37
   // const defaultLink = origin + pathname
37
   // const defaultLink = origin + pathname
38
-  const defaultImg = `${origin}${pathname}images/share.png`
38
+  const defaultImg = `${origin}${pathname}img/share.jpg`
39
 
39
 
40
   const link = origin + pathname + search // window.location.href
40
   const link = origin + pathname + search // window.location.href
41
   const imgUrl = opt.imgUrl || defaultImg
41
   const imgUrl = opt.imgUrl || defaultImg