roundabout/src/pages/game/index.vue

<template>
  <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>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import FireWorkListVue from '@/components/FireWorkList.vue'
import game from './game.js'
import { gameOver, gameStart } from '@/utils/api.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 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`

const bingoRef = ref()
const failRef = ref()
const successRef = ref()

const center = {
  x: document.body.offsetWidth / 2,
  y: document.body.offsetHeight / 2
}

const gameInit = () => {
  destroyRef.value = game({
    el: el.value,
    center,
    onError: () => {
      failRef.value.play()
      const t = setTimeout(() => {
        localStorage.setItem('loadSign', '1')
        router.push('/OverPage?type=lose')
        clearTimeout(t)
      }, 1000)
    },
    onSuccess: () => {
      gameOver()
      successRef.value.play()
      firesRef.value.toggle()
      // alert('你真牛逼')
      const t = setTimeout(() => {
        localStorage.setItem('loadSign', '1')
        router.push('/OverPage?type=win')
        clearTimeout(t)
      }, 2000)
    },
    onBingo: () => {
      bingoRef.value.play()
    }
  })

  raduis.value = destroyRef.value.raduis
}

onMounted(() => {
  gameStart()
  gameInit()
})

onBeforeUnmount(() => {
  if (destroyRef.value) {
    destroyRef.value.destroy()
  }
})
</script>

<style>
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>