feats

src/components/FireWork.vue

@@ -11,17 +11,39 @@
       <div class="drops-grp">
         <span
           class="drop drop-1"
+          :style="dropStyle"
           @animationend="handleAnimationEnd"
         />
-        <span class="drop drop-2" />
-        <span class="drop drop-3" />
-        <span class="drop drop-4" />
+        <span
+          class="drop drop-2"
+          :style="dropStyle"
+        />
+        <span
+          class="drop drop-3"
+          :style="dropStyle"
+        />
+        <span
+          class="drop drop-4"
+          :style="dropStyle"
+        />
       </div>
       <div class="drops-grp drops-grp2">
-        <span class="drop drop-1" />
-        <span class="drop drop-2" />
-        <span class="drop drop-3" />
-        <span class="drop drop-4" />
+        <span
+          class="drop drop-1"
+          :style="dropStyle"
+        />
+        <span
+          class="drop drop-2"
+          :style="dropStyle"
+        />
+        <span
+          class="drop drop-3"
+          :style="dropStyle"
+        />
+        <span
+          class="drop drop-4"
+          :style="dropStyle"
+        />
       </div>
     </div>
   </div>
@@ -52,6 +74,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false
 	},
+	duration: {
+    type: Number,
+    default: 1.2
+	},
 })
 
 const grpStyle = computed(() => ({
@@ -64,6 +90,10 @@ const fireworkStyle = computed(() => ({
     transform: `scale(${props.scale})`,
   }))
 
+const dropStyle = computed(() => ({
+	animationDuration: `${props.duration}s`,
+}))
+
 const handleAnimationEnd = () => {
 	emit('end')
 }

src/components/FireWorkList.vue

@@ -8,6 +8,7 @@
       :top="calcTop(it)"
       :scale="clacScale()"
       :visible="!isFinished"
+      :duration="duration"
       @end="handleEnd"
     />
   </div>
@@ -44,6 +45,7 @@ const props = defineProps({
 
 const fireNum = ref(12)
 const isFinished = ref(true)
+const duration = ref(0.8)
 
 const calcLeft = (inx) => {
   let start, end
@@ -70,7 +72,7 @@ const clacScale = () => {
   const r = Math.random()
 
   if (r < 0.1) return 0.1
-  if (r > 0.5) return 0.5
+  if (r > 0.9) return 1
   return r
 }
 
@@ -85,6 +87,10 @@ const handleEnd = () => {
 }
 
 defineExpose({
-  toggle: () => (isFinished.value = false)
+  toggle: () => {
+    const t = setInterval(() => {
+      isFinished.value = false
+    }, duration.value * 1000)
+  }
 })
 </script>

src/pages/game/game.js

@@ -108,13 +108,11 @@ export default function game({ el, center, onError, onSuccess, onBingo }) {
     const lightTexture = two.makeTexture(lightImage);
     lightArc.noStroke();
     lightArc.fill = lightTexture;
+    lightArc.opacity = 0; // 默认不显示
     lightTexture.bind('load', () => {
       lightArc.radius = lightTexture.image.naturalWidth / 2;
       lightArc.scale = scale;
     })
-    lightArc.bind('update', () => {
-      console.log('-----------lightArc----------')
-    })
 
     // 绘制辅助扇形区域
     const arcList = Array(cageNum).fill().map((_, inx) => {
@@ -150,8 +148,19 @@ export default function game({ el, center, onError, onSuccess, onBingo }) {
   const roundAbout = drawRoundAbout()
 
   // 成功之后的特效
-  const successEffect = () => {
+  let shakeTimes = 0;
+  const successShake = () => {
+    if (shakeTimes >= 10) {
+      return
+    }
 
+    if (!isError) {
+      const opStep = shakeTimes % 2 === 1 ? -0.04 : 0.04
+      lightArc.opacity += opStep;
+      if (lightArc.opacity >= 1 || lightArc.opacity <= 0) {
+        shakeTimes += 1;
+      }
+    }
   }
 
   // 旋转
@@ -332,18 +341,19 @@ export default function game({ el, center, onError, onSuccess, onBingo }) {
   }
   
   // 重复绘制内容
-  two.bind('update', () => {
+  two.bind('update', () => {    
+    rotate()
     if (!isFinished) {
-      rotate()
-
       if (isShooting) {
         shooting()
       }
+    } else {
+      successShake()
     }
   })
 
   // 绑定 dom click 事件 触发子弹发射
-  el.addEventListener('click', () => {
+  const handleClick = () => {
     if (!isFinished && !isShooting) {
       isShooting = true
       // 启动绳子效果
@@ -353,9 +363,12 @@ export default function game({ el, center, onError, onSuccess, onBingo }) {
         currentBullet.visible = true
       }
     }
-  })
+  }
+  el.addEventListener('click', handleClick);
 
   return {
+    two,
+    raduis,
     start: () => {
       isFinished = false;
     },
@@ -365,8 +378,11 @@ export default function game({ el, center, onError, onSuccess, onBingo }) {
     destroy: () => {    
       two.unbind('update');
       two.pause();
+      two.clear();
       el.removeChild(two.renderer.domElement);
+      el.removeEventListener('click', handleClick);
       two = null;
+      Two.Instances.pop()
     }
   }
 }

src/pages/game/index.vue

@@ -5,21 +5,29 @@
 
 <script setup>
   import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
+  import { useRouter } from 'vue-router';
   import FireWorkListVue from '@/components/FireWorkList.vue';
   import game from "./game.js";
 
+  // // 修复一个 two-js bug ，当页面返回的时候, 不能正常渲染
+  // // 所以这边判断如果第二次进入页面就强制刷新
+  // const loadSign = localStorage.getItem('loadSign');
+  // if (loadSign) {
+  //   localStorage.removeItem('loadSign');
+  //   window.location.href = window.location.href;
+  // }
+
   const el = ref()
   const destroyRef = ref()
   const firesRef = ref()
   const router = useRouter()
+  const raduis = ref(150)
 
   const center = {
         x: document.body.offsetWidth / 2,
         y: document.body.offsetHeight / 2,
       }
 
-
   const gameInit = () => {
     destroyRef.value = game({
       el: el.value,
@@ -27,38 +35,33 @@ import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
       onError: () => {
         alert('oo ~')
         const t = setTimeout(() => {
+          localStorage.setItem('loadSign', '1');
           router.push('/OverPage?type=lose')
           clearTimeout(t)
         }, 1000)
       },
       onSuccess: () => {
+        firesRef.value.toggle()
         alert('你真牛逼')
         const t = setTimeout(() => {
+          localStorage.setItem('loadSign', '1');
           router.push('/OverPage?type=win')
           clearTimeout(t)
         }, 1000)
       },
       onBingo: () => {
-        firesRef.value.toggle()
       }
     })
-  }
 
-  onBeforeRouteUpdate(() => {
-    console.log('--------ref----<', el)
-  })
+    raduis.value = destroyRef.value.raduis
+  }
 
-  onBeforeRouteLeave(() => {
-    console.log('--------onBeforeRouteLeave----<')
-  })
 
   onMounted(() => {
     gameInit()
-    console.log('--------onMounted----<', el)
   })
 
   onBeforeUnmount(() => {
-    console.log('--------onBeforeUnmount----<', el)
     if (destroyRef.value) {
       destroyRef.value.destroy();
     }

src/router/index.js

@@ -1,9 +1,9 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import homePage from '@/pages/homePage.vue'
 import OverPage from '@/pages/OverPage.vue'
 import TopRulePage from '@/pages/TopRulePage.vue'
 import GamePage from '@/pages/game'
-const routerHistory = createWebHistory()
+
 const routes = [
   {
     path: '/',
@@ -25,7 +25,7 @@ const routes = [
 
 
 const router = createRouter({
-  history: routerHistory,
+  history: createWebHashHistory(),
   routes
 })
 export default router

vue.config.js

@@ -2,6 +2,7 @@ const { defineConfig } = require('@vue/cli-service')
 const path = require('path');
 
 module.exports = defineConfig({
+  publicPath: '.',
   transpileDependencies: true,
   chainWebpack: (config)=>{
     config.resolve.alias