Ver código fonte

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

[baozhangchao] 3 anos atrás
pai
commit
2c524b7773
2 arquivos alterados com 29 adições e 3 exclusões
  1. 19
    0
      src/pages/game/game.js
  2. 10
    3
      src/pages/game/index.vue

+ 19
- 0
src/pages/game/game.js Ver arquivo

7
 import cageImage from '@/assets/RoundaboutImage/2-13.png';
7
 import cageImage from '@/assets/RoundaboutImage/2-13.png';
8
 import pedestalImage from '@/assets/RoundaboutImage/2-14.png'
8
 import pedestalImage from '@/assets/RoundaboutImage/2-14.png'
9
 import countImage from '@/assets/RoundaboutImage/计数.png'
9
 import countImage from '@/assets/RoundaboutImage/计数.png'
10
+import lightImage from '@/assets/RoundaboutImage/round.png'
10
 import ropeImage1 from '@/assets/RoundaboutImage/2-15.png'
11
 import ropeImage1 from '@/assets/RoundaboutImage/2-15.png'
11
 import ropeImage2 from '@/assets/RoundaboutImage/2-16.png'
12
 import ropeImage2 from '@/assets/RoundaboutImage/2-16.png'
12
 import ropeImage3 from '@/assets/RoundaboutImage/2-17.png'
13
 import ropeImage3 from '@/assets/RoundaboutImage/2-17.png'
90
   
91
   
91
   // 绘制转盘
92
   // 绘制转盘
92
   const wheelArc = two.makeCircle(center.x, center.y, 0);
93
   const wheelArc = two.makeCircle(center.x, center.y, 0);
94
+  const lightArc = two.makeCircle(center.x, center.y, 0);
93
   const drawRoundAbout = () => {
95
   const drawRoundAbout = () => {
94
     const { x, y } = center
96
     const { x, y } = center
95
 
97
 
102
       wheelArc.scale = scale;
104
       wheelArc.scale = scale;
103
     })
105
     })
104
 
106
 
107
+    // 绘制光圈
108
+    const lightTexture = two.makeTexture(lightImage);
109
+    lightArc.noStroke();
110
+    lightArc.fill = lightTexture;
111
+    lightTexture.bind('load', () => {
112
+      lightArc.radius = lightTexture.image.naturalWidth / 2;
113
+      lightArc.scale = scale;
114
+    })
115
+    lightArc.bind('update', () => {
116
+      console.log('-----------lightArc----------')
117
+    })
118
+
105
     // 绘制辅助扇形区域
119
     // 绘制辅助扇形区域
106
     const arcList = Array(cageNum).fill().map((_, inx) => {
120
     const arcList = Array(cageNum).fill().map((_, inx) => {
107
       const startAngle = 2 * inx * perAngle - offsetAngle; // 实际效果图是圆形有固定大小的, 不能直接从 0° 开始, 需要从 0 - offset 开始
121
       const startAngle = 2 * inx * perAngle - offsetAngle; // 实际效果图是圆形有固定大小的, 不能直接从 0° 开始, 需要从 0 - offset 开始
135
   }
149
   }
136
   const roundAbout = drawRoundAbout()
150
   const roundAbout = drawRoundAbout()
137
 
151
 
152
+  // 成功之后的特效
153
+  const successEffect = () => {
154
+
155
+  }
156
+
138
   // 旋转
157
   // 旋转
139
   const rotate = () => {
158
   const rotate = () => {
140
     rotateAngle += rotateSpeed
159
     rotateAngle += rotateSpeed

+ 10
- 3
src/pages/game/index.vue Ver arquivo

5
 
5
 
6
 <script setup>
6
 <script setup>
7
   import { onBeforeUnmount, onMounted, ref } from 'vue';
7
   import { onBeforeUnmount, onMounted, ref } from 'vue';
8
-  import Two from "two.js";
8
+import { useRouter } from 'vue-router';
9
   import FireWorkListVue from '@/components/FireWorkList.vue';
9
   import FireWorkListVue from '@/components/FireWorkList.vue';
10
   import game from "./game.js";
10
   import game from "./game.js";
11
 
11
 
12
   const el = ref()
12
   const el = ref()
13
   const destroyRef = ref()
13
   const destroyRef = ref()
14
   const firesRef = ref()
14
   const firesRef = ref()
15
+  const router = useRouter()
15
 
16
 
16
-  const raduis = 145
17
   const center = {
17
   const center = {
18
         x: document.body.offsetWidth / 2,
18
         x: document.body.offsetWidth / 2,
19
         y: document.body.offsetHeight / 2,
19
         y: document.body.offsetHeight / 2,
24
     destroyRef.value = game({
24
     destroyRef.value = game({
25
       el: el.value,
25
       el: el.value,
26
       center,
26
       center,
27
-      raduis,
28
       onError: () => {
27
       onError: () => {
29
         alert('oo ~')
28
         alert('oo ~')
29
+        const t = setTimeout(() => {
30
+          router.push('/OverPage?type=lose')
31
+          clearTimeout(t)
32
+        }, 1000)
30
       },
33
       },
31
       onSuccess: () => {
34
       onSuccess: () => {
32
         alert('你真牛逼')
35
         alert('你真牛逼')
36
+        const t = setTimeout(() => {
37
+          router.push('/OverPage?type=win')
38
+          clearTimeout(t)
39
+        }, 1000)
33
       },
40
       },
34
       onBingo: () => {
41
       onBingo: () => {
35
         firesRef.value.toggle()
42
         firesRef.value.toggle()