靜音功能 scene抽出來

components/PhaserGame.vue

@@ -12,39 +12,40 @@ import chuKoNuAudio from '~/assets/chuKoNu.mp3'
 import eightDiagramFormation from '~/assets/eightDiagramFormation.mp3'
 import redHare from '~/assets/redHare.mp3'
 import shadowrunner from '~/assets/shadowrunner.mp3'
-import { Card, Game } from '~/src/classes'
+import { Card, Game, BattleScene } from '~/src/classes'
 import threeKingdomsCards from '~/assets/cards.json'
 import { atkLine } from '~/src/utils/drawing'
 import { Client } from '@stomp/stompjs'
 // import api from '~/src/utils/api'
 import generalCards from '~/assets/generalCards.json'
+// import BattleScene from '~/src/classes'
 const api = useApi()
 const runtimeConfig = useRuntimeConfig()
 console.log(runtimeConfig, 'runtimeConfig')
-class BattleTable extends Phaser.Scene {
-    constructor() {
-        super('BattleTable')
-    }
-    preload() {
-        // 預加載
-        this.load.audio('peach', peachAudio)
-        this.load.audio('kill', killAudio)
-        this.load.audio('dodge', dodgeAudio)
-        this.load.audio('dismantle', dismantleAudio)
-        this.load.audio('barbarianInvasion', barbarianInvasionAudio)
-        this.load.audio('somethingForNothing', somethingForNothingAudio)
-        this.load.audio('arrowBarrage', arrowBarrageAudio)
-        this.load.audio('qilinBow', qilinBowAudio)
-        this.load.audio('chuKoNu', chuKoNuAudio)
-        this.load.audio('eightDiagramFormation', eightDiagramFormation)
-        this.load.audio('shadowrunner', shadowrunner)
-        this.load.audio('redHare', redHare)
-    }
-    create() {
-        myScene.value = this
-        // myGame.value = new Game(gameData.value, this)
-    }
-}
+// class BattleTable extends Phaser.Scene {
+//     constructor() {
+//         super('BattleTable')
+//     }
+//     preload() {
+//         // 預加載
+//         this.load.audio('peach', peachAudio)
+//         this.load.audio('kill', killAudio)
+//         this.load.audio('dodge', dodgeAudio)
+//         this.load.audio('dismantle', dismantleAudio)
+//         this.load.audio('barbarianInvasion', barbarianInvasionAudio)
+//         this.load.audio('somethingForNothing', somethingForNothingAudio)
+//         this.load.audio('arrowBarrage', arrowBarrageAudio)
+//         this.load.audio('qilinBow', qilinBowAudio)
+//         this.load.audio('chuKoNu', chuKoNuAudio)
+//         this.load.audio('eightDiagramFormation', eightDiagramFormation)
+//         this.load.audio('shadowrunner', shadowrunner)
+//         this.load.audio('redHare', redHare)
+//     }
+//     create() {
+//         myScene.value = this
+//         // myGame.value = new Game(gameData.value, this)
+//     }
+// }
 const roleText = {
     MONARCH: '主公',
     REBEL: '反賊',
@@ -159,6 +160,20 @@ const initDemo = () => {
 }
 onMounted(() => {
     if (process.client) {
+        const audios = {
+            peach: peachAudio,
+            kill: killAudio,
+            dodge: dodgeAudio,
+            dismantle: dismantleAudio,
+            barbarianInvasion: barbarianInvasionAudio,
+            somethingForNothing: somethingForNothingAudio,
+            arrowBarrage: arrowBarrageAudio,
+            qilinBow: qilinBowAudio,
+            chuKoNu: chuKoNuAudio,
+            eightDiagramFormation: eightDiagramFormation,
+            shadowrunner: shadowrunner,
+            redHare: redHare,
+        }
         const config = {
             type: Phaser.AUTO,
             parent: 'phaser-game',
@@ -167,9 +182,18 @@ onMounted(() => {
             },
             width: 800,
             height: 600,
-            scene: BattleTable,
+            // scene: BattleScene,
+            scene: [],
         }
         game.value = new Phaser.Game(config)
+        game.value.scene.add('battleScene', BattleScene)
+        game.value.scene.start('battleScene', { audios })
+        game.value.events.on('ready', () => {
+            // console.log('ready')
+            // console.log(game.value, 'game')
+            console.log(game.value.scene.scenes[0], 'myScene')
+            myScene.value = game.value.scene.scenes[0]
+        })
         socketClient = new Client({
             // brokerURL: 'ws://localhost:8080/legendsOfTheThreeKingdoms',
             brokerURL:

src/classes/BattleScene.ts

@@ -0,0 +1,26 @@
+import type { Audios } from '~/src/types'
+export default class BattleScene extends Phaser.Scene {
+    audioMute: boolean
+    audios?: Audios
+    constructor() {
+        super({ key: 'battleScene' })
+        // 添加自己的變數
+        this.audioMute = true
+        // this.audios = audios
+    }
+    init(data: { audios: Audios }) {
+        // 初始化
+        this.audios = data.audios
+    }
+    preload() {
+        // 預加載
+        if (!this.audios) return
+        // 預加載音樂
+        Object.entries(this.audios).forEach(([key, value]) => {
+            this.load.audio(key, value)
+        })
+    }
+    create() {
+        console.log('BattleScene created', this)
+    }
+}

src/classes/Card.ts

@@ -1,10 +1,11 @@
 import threeKingdomsCards from '~/assets/cards.json'
+import { BattleScene } from './index'
 import { suits } from '~/src/utils/domain'
 export default class Card {
     id: keyof typeof threeKingdomsCards
     name: string = ''
     instance!: Phaser.GameObjects.Container
-    scene!: Phaser.Scene
+    scene!: BattleScene
     audio: Phaser.Sound.BaseSound | null = null
     x: number = 0
     y: number = 0
@@ -22,7 +23,7 @@ export default class Card {
         cardId: keyof typeof threeKingdomsCards
         x: number
         y: number
-        scene: Phaser.Scene
+        scene: BattleScene
         playCardHandler?: any
     }) {
         this.id = cardId
@@ -40,7 +41,7 @@ export default class Card {
     }: {
         baseX: number
         baseY: number
-        scene: Phaser.Scene
+        scene: BattleScene
     }) {
         // 創建一個白色的矩形
         const card = threeKingdomsCards[this.id]
@@ -106,8 +107,8 @@ export default class Card {
     }
     playCard({ x = 400, y = 300 }: { x?: number; y?: number } = { x: 400, y: 300 }) {
         const instance = this.instance
-        if (this.audio) this.audio.play()
         if (instance === null || this.scene === null) return
+        if (this.audio && !this.scene.audioMute) this.audio.play()
         this.scene.tweens.add({
             targets: instance,
             x: x,

src/classes/Game.ts

@@ -1,4 +1,4 @@
-import { Player, MainPlayer, Card } from './index'
+import { Player, MainPlayer, Card, BattleScene } from './index'
 import { atkLine } from '../utils/drawing'
 import type { ThreeKingdomsCardIds, GameData, PlayType, EquipmentPlayType } from '~/src/types'
 // import api from '~/src/utils/api'
@@ -37,7 +37,7 @@ export default class Game {
         handCards: [],
     }
     me!: MainPlayer
-    scene!: Phaser.Scene
+    scene!: BattleScene
     gameId: string = 'my-id'
     gameData: GameData = {
         gamePhase: 'Initial',
@@ -52,7 +52,7 @@ export default class Game {
     }
     hintInstance!: Phaser.GameObjects.Container
     api: any
-    constructor(gameData: any, scene: Phaser.Scene, api: any) {
+    constructor(gameData: any, scene: BattleScene, api: any) {
         this.scene = scene
         this.api = api
         this.seats = gameData.seats.map((player: any, index: number) => {

src/classes/MainPlayer.ts

@@ -1,4 +1,4 @@
-import { Card, Player } from './index'
+import { Card, Player, BattleScene } from './index'
 import threeKingdomsCards from '~/assets/cards.json'
 import { atkLine } from '../utils/drawing'
 import { roleMap } from '~/src/utils/domain'
@@ -51,7 +51,7 @@ export default class MainPlayer extends Player {
         discardCardsAction: ([]) => void
         x: number
         y: number
-        scene: Phaser.Scene
+        scene: BattleScene
         seats: any
         game: any
     }) {

src/classes/Player.ts

@@ -2,6 +2,7 @@ import generalCards from '~/assets/generalCards.json'
 import threeKingdomsCards from '~/assets/cards.json'
 import { roleMap, suits } from '~/src/utils/domain'
 import type { ThreeKingdomsCardIds, ThreeKingdomsGeneralIds } from '~/src/types'
+import { BattleScene } from './index'
 export default class Player {
     id: string
     generral: string
@@ -16,7 +17,7 @@ export default class Player {
     equipments: ThreeKingdomsCardIds[]
     delayScrolls: string[]
     instance!: Phaser.GameObjects.Container
-    scene!: Phaser.Scene
+    scene!: BattleScene
     handleClickPlayer!: (player: Player) => void
     x: number = 0
     y: number = 0
@@ -54,7 +55,7 @@ export default class Player {
         handleClickPlayer: any
         x: number
         y: number
-        scene: Phaser.Scene
+        scene: BattleScene
     }) {
         this.id = id
         this.generral = generral

src/classes/index.ts

@@ -2,3 +2,4 @@ export { default as Game } from './Game'
 export { default as Player } from './Player'
 export { default as MainPlayer } from './MainPlayer'
 export { default as Card } from './Card'
+export { default as BattleScene } from './BattleScene'

src/types.d.ts

@@ -31,3 +31,18 @@ export interface GameData {
     }
     gamePhase: GamePhase
 }
+
+export interface Audios {
+    peach: string
+    kill: string
+    dodge: string
+    dismantle: string
+    barbarianInvasion: string
+    somethingForNothing: string
+    arrowBarrage: string
+    qilinBow: string
+    chuKoNu: string
+    eightDiagramFormation: string
+    shadowrunner: string
+    redHare: string
+}