Add mute functionality and background music

Author: ABCoder1

assets/keyboard-m-key-logo.png

@@ -7,15 +7,17 @@ class PacManScene extends Phaser.Scene {
         const arrowDistance = this.currentScale * 80; // Distance from Pacman center
         const keyScale = this.currentScale * 0.065; // Scale for key icons
 
-        // Create arrows and keys for each direction
+        // Create arrows and keys for each direction (M sits to the right of D, same spacing as A–D)
         const directions = [
             { icon: 'w-key-logo', angle: 0, x: 0, y: -arrowDistance/2, direction: 'up' },
             { icon: 's-key-logo', angle: 0, x: 0, y: arrowDistance/2, direction: 'down' },
             { icon: 'a-key-logo', angle: 0, x: -arrowDistance/2, y: 0, direction: 'left' },
-            { icon: 'd-key-logo', angle: 0, x: arrowDistance/2, y: 0, direction: 'right' }
+            { icon: 'd-key-logo', angle: 0, x: arrowDistance/2, y: 0, direction: 'right' },
+            { icon: 'm-key-logo', angle: 0, x: arrowDistance/2 + arrowDistance, y: 0, direction: 'mute', showCaption: true }
         ];
 
         this.instructionArrows = [];
+        this.instructionMuteCaption = null;
 
         directions.forEach(dir => {
             // Calculate bounding box size based on key icon dimensions
@@ -46,7 +48,19 @@ class PacManScene extends Phaser.Scene {
 
             // Create container for this direction's elements
             const directionContainer = this.add.container(dir.x, dir.y);
-            directionContainer.add([boundingBox, keyIcon]); // Box first (behind), then icon
+            const containerChildren = [boundingBox, keyIcon];
+
+            if (dir.showCaption) {
+                const caption = this.add.text(boxWidth/2 + 50, 0, "mute / unmute", {
+                    fontSize: `${Math.floor(10 * Math.max(0.55, this.currentScale))}px`,
+                    fill: '#ffffff',
+                    fontFamily: 'Monaco'
+                }).setOrigin(0.5);
+                this.instructionMuteCaption = caption;
+                containerChildren.push(caption);
+            }
+
+            directionContainer.add(containerChildren);
 
             // Store references
             this.instructionArrows.push({
@@ -2238,6 +2252,53 @@ class PacManScene extends Phaser.Scene {
         if (this.pacman && this.pacmanInitialized) {
             this.setupCamera();
         }
+
+    }
+
+    setupBackgroundMusicAndMute() {
+        if (!this.cache.audio.exists('bgm')) return;
+
+        this.bgmSound = this.sound.add('bgm', { loop: true, volume: 0.35 });
+        
+        const tryPlayBgm = () => {
+            if (!this.bgmSound) return;
+            if (!this.bgmSound.isPlaying) {
+                this.bgmSound.play();
+            }
+        };
+        
+        tryPlayBgm();
+        this.input.once('pointerdown', tryPlayBgm);
+        this.bgmSound.once('play', this.onBgmStartedPlaying, this);
+
+        this.muteKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.M);
+        this.muteKey.on('down', this.toggleMusicMute, this);
+    }
+
+    onBgmStartedPlaying() {
+        this.bgmCaptionDynamicReady = true;
+        this.updateMusicHintVisual();
+    }
+
+    toggleMusicMute() {
+        this.sound.mute = !this.sound.mute;
+        this.updateMusicHintVisual();
+    }
+
+    updateMusicHintVisual() {
+        if (!this.instructionMuteCaption) return;
+        if (!this.bgmCaptionDynamicReady) {
+            this.instructionMuteCaption.setText('mute / unmute');
+            this.instructionMuteCaption.setColor('#ffffff');
+            return;
+        }
+        if (this.sound.mute) {
+            this.instructionMuteCaption.setText('unmute');
+            this.instructionMuteCaption.setColor('#ff8888');
+        } else {
+            this.instructionMuteCaption.setText('mute');
+            this.instructionMuteCaption.setColor('#ffffff');
+        }
     }
 
     // Phaser looks for this by-default on initialization
@@ -2293,8 +2354,10 @@ class PacManScene extends Phaser.Scene {
         this.load.image('s-key-logo', 'assets/keyboard-s-key-logo.png')
         this.load.image('a-key-logo', 'assets/keyboard-a-key-logo.png')
         this.load.image('d-key-logo', 'assets/keyboard-d-key-logo.png')
+        this.load.image('m-key-logo', 'assets/keyboard-m-key-logo.png')
         this.load.image('esc-key-logo', 'assets/keyboard-esc-key-logo.png')
-        this.load.image('enter-key-logo', 'assets/keyboard-enter-key-logo.png')
+        this.load.image('enter-key-logo', 'assets/keyboard-enter-key-logo.png');
+        this.load.audio('bgm', ['assets/pvz-graze-the-roof-128k.mp3']);
     }
 
     create() {
@@ -2306,6 +2369,7 @@ class PacManScene extends Phaser.Scene {
         this.animationsStarted = false; // Flag to prevent multiple animation starts
         this.fontLoaded = false;
         this.overlayOpen = false; // Track overlay state
+        this.bgmCaptionDynamicReady = false; // Mute caption stays "mute / unmute" until BGM actually plays
         // this.canInteract = true; // Track if orb can be interacted with (to deal with race condition)
 
         // Create section data
@@ -2351,6 +2415,8 @@ class PacManScene extends Phaser.Scene {
 
         this.resize(); // Initial resize, also stores other parameters
         this.scale.on('resize', this.resize, this); // Listen for resize events
+
+        this.setupBackgroundMusicAndMute();
     }
 
     update() {
@@ -2386,6 +2452,17 @@ class PacManScene extends Phaser.Scene {
             this.instructionArrows.forEach(instruction => {
                 this.tweens.killTweensOf(instruction.arrow);
             });
+        }   
+
+        if (this.muteKey) {
+            this.muteKey.off('down', this.toggleMusicMute, this);
+            this.muteKey = null;
+        }
+
+        if (this.bgmSound) {
+            this.bgmSound.stop();
+            this.bgmSound.destroy();
+            this.bgmSound = null;
         }
 
         // Clean up all section content