From ca5b62f461f7b7c427368e5285f1a89ce03ecd9c Mon Sep 17 00:00:00 2001 From: Parsons Date: Sat, 15 Jun 2024 23:15:55 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9D=9C=E9=9F=B3=E5=8A=9F=E8=83=BD=20scene?= =?UTF-8?q?=E6=8A=BD=E5=87=BA=E4=BE=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/PhaserGame.vue | 76 +++++++++++++++++++++++++------------- src/classes/BattleScene.ts | 26 +++++++++++++ src/classes/Card.ts | 9 +++-- src/classes/Game.ts | 6 +-- src/classes/MainPlayer.ts | 4 +- src/classes/Player.ts | 5 ++- src/classes/index.ts | 1 + src/types.d.ts | 15 ++++++++ 8 files changed, 105 insertions(+), 37 deletions(-) create mode 100644 src/classes/BattleScene.ts diff --git a/components/PhaserGame.vue b/components/PhaserGame.vue index 3599cea..da0353e 100644 --- a/components/PhaserGame.vue +++ b/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: diff --git a/src/classes/BattleScene.ts b/src/classes/BattleScene.ts new file mode 100644 index 0000000..1941c2d --- /dev/null +++ b/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) + } +} diff --git a/src/classes/Card.ts b/src/classes/Card.ts index 21fa6d7..3086f22 100644 --- a/src/classes/Card.ts +++ b/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, diff --git a/src/classes/Game.ts b/src/classes/Game.ts index f08f90a..493f80a 100644 --- a/src/classes/Game.ts +++ b/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) => { diff --git a/src/classes/MainPlayer.ts b/src/classes/MainPlayer.ts index 1be915a..0fcf320 100644 --- a/src/classes/MainPlayer.ts +++ b/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 }) { diff --git a/src/classes/Player.ts b/src/classes/Player.ts index 6a1d0ac..59d2128 100644 --- a/src/classes/Player.ts +++ b/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 diff --git a/src/classes/index.ts b/src/classes/index.ts index b5d266d..be762f0 100644 --- a/src/classes/index.ts +++ b/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' diff --git a/src/types.d.ts b/src/types.d.ts index f3eaa30..0669342 100644 --- a/src/types.d.ts +++ b/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 +}