v0.2.0

src/game/utilities/SoundManager.ts

@@ -0,0 +1,60 @@
+import snd_move_1 from '@/assets/sounds/move-1.mp3'
+import snd_move_2 from '@/assets/sounds/move-2.mp3'
+import snd_move_3 from '@/assets/sounds/move-3.mp3'
+import snd_move_4 from '@/assets/sounds/move-4.mp3'
+import snd_intro from '@/assets/sounds/intro.mp3'
+import snd_click_btn from '@/assets/sounds/button_click.wav'
+import snd_ding_1 from '@/assets/sounds/ding-1.wav'
+import { Howl } from 'howler'
+
+const soundAssets = [
+  { name: 'snd-move-1', src: [snd_move_1], loop: false, volume: 1 },
+  { name: 'snd-move-2', src: [snd_move_2], loop: false, volume: 1 },
+  { name: 'snd-move-3', src: [snd_move_3], loop: false, volume: 1 },
+  { name: 'snd-move-4', src: [snd_move_4], loop: false, volume: 1 },
+  { name: 'snd-intro', src: [snd_intro], loop: true, volume: 1 },
+  { name: 'snd-click-btn', src: [snd_click_btn], loop: false, volume: 1 },
+  { name: 'snd-ding-1', src: [snd_ding_1], loop: false, volume: 1 },
+]
+
+export class SoundManager {
+  private sounds: Record<string, Howl> = {}
+
+  constructor() {
+    soundAssets.forEach(({ name, src, loop, volume = 1 }) => {
+      this.sounds[name] = new Howl({
+        src,
+        loop,
+        volume: volume,
+      })
+    })
+  }
+
+  play(name: string) {
+    const sound = this.sounds[name]
+    if (sound === undefined) {
+      console.error(`Sound ${name} not found`)
+      return
+    }
+    sound.play()
+  }
+
+  pause(name: string) {
+    const sound = this.sounds[name]
+    if (sound === undefined) {
+      console.error(`Sound ${name} not found`)
+      return
+    }
+    sound.pause()
+  }
+
+  stop(name: string) {
+    const sound = this.sounds[name]
+    if (sound === undefined) {
+      console.error(`Sound ${name} not found`)
+      return
+    }
+    sound.pause()
+    sound.seek(0)
+  }
+}

src/game/utilities/Timer.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from 'pixi.js'
+
+export class Timer extends EventEmitter {
+  private intervalHandle?: any
+  private countdown: number = 0
+
+  constructor(private seconds: number) {
+    super()
+    this.countdown = seconds
+  }
+
+  start() {
+    clearInterval(this.intervalHandle)
+    this.intervalHandle = setInterval(() => {
+      this.countdown--
+      if (this.countdown === 0) {
+        clearInterval(this.intervalHandle)
+        this.emit('timeout')
+      } else {
+        this.emit('tick', this.countdown)
+      }
+    }, 1000)
+  }
+
+  stop() {
+    clearInterval(this.intervalHandle)
+    this.emit('stop', this.countdown)
+  }
+
+  reset() {
+    this.stop()
+    this.countdown = this.seconds
+    this.emit('reset', this.countdown)
+  }
+}

src/game/utilities/assets.ts

@@ -33,11 +33,13 @@ import bg_red from '@/assets/images/backgrounds/bg-red.png'
 import bg_yellow from '@/assets/images/backgrounds/bg-yellow.png'
 import bg_blue from '@/assets/images/backgrounds/bg-blue.png'
 import bg_gray from '@/assets/images/backgrounds/bg-1.png'
-import snd_move_1 from '@/assets/sounds/move-1.mp3'
-import snd_move_2 from '@/assets/sounds/move-2.mp3'
-import snd_move_3 from '@/assets/sounds/move-3.mp3'
-import snd_move_4 from '@/assets/sounds/move-4.mp3'
-import snd_intro from '@/assets/sounds/intro.mp3'
+// import snd_move_1 from '@/assets/sounds/move-1.mp3'
+// import snd_move_2 from '@/assets/sounds/move-2.mp3'
+// import snd_move_3 from '@/assets/sounds/move-3.mp3'
+// import snd_move_4 from '@/assets/sounds/move-4.mp3'
+// import snd_intro from '@/assets/sounds/intro.mp3'
+// import snd_click_btn from '@/assets/sounds/button_click.wav'
+// import snd_ding_1 from '@/assets/sounds/ding-1.wav'
 
 export const assets = [
   { alias: 'tile-back', src: tileBack },
@@ -75,9 +77,11 @@ export const assets = [
   { alias: 'bg-yellow', src: bg_yellow },
   { alias: 'bg-blue', src: bg_blue },
   { alias: 'bg-gray', src: bg_gray },
-  { alias: 'snd-move-1', src: snd_move_1 },
-  { alias: 'snd-move-2', src: snd_move_2 },
-  { alias: 'snd-move-3', src: snd_move_3 },
-  { alias: 'snd-move-4', src: snd_move_4 },
-  { alias: 'snd-intro', src: snd_intro },
+  // { alias: 'snd-move-1', src: snd_move_1 },
+  // { alias: 'snd-move-2', src: snd_move_2 },
+  // { alias: 'snd-move-3', src: snd_move_3 },
+  // { alias: 'snd-move-4', src: snd_move_4 },
+  // { alias: 'snd-intro', src: snd_intro },
+  // { alias: 'snd-click-btn', src: snd_click_btn },
+  // { alias: 'snd-ding-1', src: snd_ding_1 },
 ]

src/game/utilities/fonts.ts

@@ -103,6 +103,14 @@ export const whiteStyle = (
     dropShadow,
   })
 
+export const timerStyle = () =>
+  getStyle({
+    fill: 0xffff66,
+    fontSize: 36,
+    // fontWeight: 'bold',
+    stroke: { color: '#000000', width: 6, join: 'round' },
+  })
+
 export const yellowStyle = (
   fontSize: number = 15,
   fontWeight: TextStyleFontWeight = 'normal',