🎨 chore(audio-manager.js): refactor AudioManager constructor to use s…

…tatic paths for sound and image files

🐛 fix(audio-manager.js): fix error handling in preloadImages method
🔊 feat(audio-manager.js): add playJumpSound method to play jump sound when Mario jumps
🔧 refactor(background.js): remove unnecessary instance variables from Background class
🔧 refactor(game.js): remove unnecessary instance variables from Game class
🔧 refactor(mario.js): remove unnecessary instance variables from Mario class
🔧 refactor(obstacle.js): remove unnecessary instance variables from ObstacleManager class
🔧 refactor(utils.js): rename src parameter to srcset in loadImages function

main.js

@@ -1,7 +1,7 @@
 import { Game } from './src/index.js';
 
 const init = () => {
-  const game = new Game({ defaultBottom: 50, speed: 5 });
+  const game = new Game();
 };
 
 window.onload = init;

src/audio-manager.js

@@ -2,25 +2,21 @@ import DomManager from './dom-manager.js';
 import { loadImages } from './utils.js';
 
 class AudioManager {
+  static SOUND_ON_PATH = './assets/sound-on.png';
+  static SOUND_OFF_PATH = './assets/sound-off.png';
+  static JUMP_SOUND_PATH = './assets/audio/jump-sound.mp3';
+  static BGM_PATH = './assets/audio/bgm.mp3';
+
   soundOnImage = new Image();
   soundOffImage = new Image();
 
-  constructor({
-    filePath = './assets/mario-bgm.mp3',
-    iconSources = ['./assets/sound-on.png', './assets/sound-off.png'],
-    autoplay = true,
-    loop = true,
-    muted = true,
-  } = {}) {
-    this.audio = new Audio(filePath);
+  audio = new Audio(AudioManager.BGM_PATH);
+  jumpSound = new Audio(AudioManager.JUMP_SOUND_PATH);
+
+  constructor({ autoplay = true, loop = true, muted = true } = {}) {
     this.audio.autoplay = autoplay;
     this.audio.loop = loop;
     this.audio.muted = muted;
-    this.iconSources = iconSources;
-
-    this.audio.onerror = () => {
-      console.error('Failed to load audio:', filePath);
-    };
 
     this.preloadImages();
   }
@@ -34,17 +30,25 @@ class AudioManager {
   }
 
   async preloadImages() {
+    const srcset = [AudioManager.SOUND_ON_PATH, AudioManager.SOUND_OFF_PATH];
     try {
-      const [soundOn, soundOff] = await loadImages(this.iconSources);
+      const [soundOn, soundOff] = await loadImages(srcset);
       this.soundOnImage.src = soundOn.src;
       this.soundOffImage.src = soundOff.src;
     } catch (error) {
-      console.error(error);
+      console.error('Error preloading audio images:', error);
     }
   }
 
+  playJumpSound() {
+    if (this.isMuted) return;
+    this.jumpSound.play();
+  }
+
   #toggleIcon() {
-    const src = this.isMuted ? this.iconSources[1] : this.iconSources[0];
+    const src = this.isMuted
+      ? AudioManager.SOUND_OFF_PATH
+      : AudioManager.SOUND_ON_PATH;
     DomManager.audioToggle.style.backgroundImage = `url(${src})`;
   }
 

src/background.js

@@ -1,10 +1,12 @@
 import DomManager from './dom-manager.js';
 
 class Background {
+  speed;
+  positionX = 0;
+  frameId = null;
+
   constructor({ speed }) {
     this.speed = speed;
-    this.positionX = 0;
-    this.frameId = null;
     this.move = this.move.bind(this);
   }
 

src/game.js

@@ -10,17 +10,30 @@ import {
 } from './index.js';
 
 class Game {
+  static DEFAULT_SPEED = 5;
+  static DEFAULT_BOTTOM = 50;
+
   isPlaying = false;
   obstacleTimerId = null;
   collisionFrameId = null;
   lastPassedObstacle = null;
 
-  constructor({ speed, defaultBottom }) {
-    this.mario = new Mario({ defaultBottom });
+  audio;
+  score;
+  mario;
+  background;
+  obstacles;
+  eventHandler;
+
+  constructor({
+    speed = Game.DEFAULT_SPEED,
+    defaultBottom = Game.DEFAULT_BOTTOM,
+  } = {}) {
+    this.audio = new AudioManager();
+    this.score = new Score();
     this.background = new Background({ speed });
     this.obstacles = new ObstacleManager({ speed, defaultBottom });
-    this.score = new Score();
-    this.audio = new AudioManager();
+    this.mario = new Mario({ defaultBottom, audio: this.audio });
     this.eventHandler = new EventHandler(this);
 
     // 동일한 참조의 이벤트 핸들러를 사용해야 이벤트를 제거할 수 있으므로 this.handleKeyDown 메서드 바인딩

src/mario.js

@@ -2,40 +2,43 @@ import DomManager from './dom-manager.js';
 import { loadImages } from './utils.js';
 
 class Mario {
-  static jumpHeight = 18; // 점프 높이. 높을수록 더 높이 점프
-  static gravity = 0.4; // 중력 가속도. 낮을수록 더 오래 점프
+  static JUMP_HEIGHT = 18; // 점프 높이. 높을수록 더 높이 점프
+  static GRAVITY = 0.4; // 중력 가속도. 낮을수록 더 오래 점프
+  static STOP_IMAGE_PATH = './assets/mario-stop.png';
+  static RUN_IMAGE_PATH = './assets/mario-run.gif';
 
   stopImage = new Image();
   runImage = new Image();
   element = new Image();
 
-  constructor({
-    defaultBottom,
-    className = 'mario',
-    imgSources = ['./assets/mario-stop.png', './assets/mario-run.gif'],
-  }) {
+  audio;
+  defaultBottom;
+  isJumping = false;
+
+  constructor({ audio, defaultBottom, className = 'mario' }) {
+    this.audio = audio;
     this.defaultBottom = defaultBottom;
-    this.imgSources = imgSources;
-    this.isJumping = false;
 
-    this.preloadImages().then(() => this.initializeImage(className));
+    this.preloadImages()
+      .then(() => this.initializeImage(className))
+      .catch(error => console.error('Error initializing Mario:', error));
   }
 
   initializeImage(className) {
     this.element.src = this.stopImage.src;
     this.element.classList.add(className);
     this.element.style.bottom = this.defaultBottom + 'px';
-
     DomManager.gameArea.appendChild(this.element);
   }
 
   async preloadImages() {
+    const srcset = [Mario.STOP_IMAGE_PATH, Mario.RUN_IMAGE_PATH];
     try {
-      const [stopImage, runImage] = await loadImages(this.imgSources);
+      const [stopImage, runImage] = await loadImages(srcset);
       this.stopImage.src = stopImage.src;
       this.runImage.src = runImage.src;
     } catch (error) {
-      console.error(error);
+      console.error('Error preloading Mario images:', error);
     }
   }
 
@@ -50,9 +53,10 @@ class Mario {
   jump() {
     if (this.isJumping) return;
 
+    this.audio.playJumpSound();
     this.isJumping = true;
     let jumpCount = 0;
-    let velocity = Mario.jumpHeight;
+    let velocity = Mario.JUMP_HEIGHT;
 
     /**
      * 상승(Fast) -> 정점(Slow) -> 하강(Fast) 중력 작용이 유사하게 적용된 점프 메서드
@@ -70,7 +74,7 @@ class Mario {
      * */
     const up = () => {
       jumpCount++;
-      velocity = Math.max(velocity - Mario.gravity, 0);
+      velocity = Math.max(velocity - Mario.GRAVITY, 0);
 
       let nextBottom = jumpCount * velocity + this.defaultBottom;
       this.element.style.bottom = nextBottom + 'px';

src/obstacle.js

@@ -4,13 +4,14 @@ class ObstacleManager {
   list = new Set();
   frameId = null;
   isMonitoring = false;
+  options;
 
   constructor(options) {
-    this.defaultOptions = options;
+    this.options = options;
   }
 
   add() {
-    const obstacle = new Obstacle(this.defaultOptions);
+    const obstacle = new Obstacle(this.options);
     DomManager.gameArea.appendChild(obstacle.element);
 
     this.list.add(obstacle);

src/utils.js

@@ -2,7 +2,7 @@ export const generateRandomNumber = (min, max) => {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 };
 
-export const loadImages = src => {
+export const loadImages = srcset => {
   // image.src 속성에 값을 할당하면 백그라운드에서 이미지 로드 시작
   const loadImage = src => {
     return new Promise((resolve, reject) => {
@@ -13,5 +13,5 @@ export const loadImages = src => {
     });
   };
 
-  return Promise.all(src.map(loadImage));
+  return Promise.all(srcset.map(loadImage));
 };