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,6 +7,7 @@ import wheelImage from '@/assets/RoundaboutImage/2-09.png';
7 7
 import cageImage from '@/assets/RoundaboutImage/2-13.png';
8 8
 import pedestalImage from '@/assets/RoundaboutImage/2-14.png'
9 9
 import countImage from '@/assets/RoundaboutImage/计数.png'
10
+import lightImage from '@/assets/RoundaboutImage/round.png'
10 11
 import ropeImage1 from '@/assets/RoundaboutImage/2-15.png'
11 12
 import ropeImage2 from '@/assets/RoundaboutImage/2-16.png'
12 13
 import ropeImage3 from '@/assets/RoundaboutImage/2-17.png'
@@ -90,6 +91,7 @@ export default function game({ el, center, onError, onSuccess, onBingo }) {
90 91
   
91 92
   // 绘制转盘
92 93
   const wheelArc = two.makeCircle(center.x, center.y, 0);
94
+  const lightArc = two.makeCircle(center.x, center.y, 0);
93 95
   const drawRoundAbout = () => {
94 96
     const { x, y } = center
95 97
 
@@ -102,6 +104,18 @@ export default function game({ el, center, onError, onSuccess, onBingo }) {
102 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 120
     const arcList = Array(cageNum).fill().map((_, inx) => {
107 121
       const startAngle = 2 * inx * perAngle - offsetAngle; // 实际效果图是圆形有固定大小的, 不能直接从 0° 开始, 需要从 0 - offset 开始
@@ -135,6 +149,11 @@ export default function game({ el, center, onError, onSuccess, onBingo }) {
135 149
   }
136 150
   const roundAbout = drawRoundAbout()
137 151
 
152
+  // 成功之后的特效
153
+  const successEffect = () => {
154
+
155
+  }
156
+
138 157
   // 旋转
139 158
   const rotate = () => {
140 159
     rotateAngle += rotateSpeed

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

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