🔧 chore(audio): update jump and coin sound files

🔧 chore(audio-manager.js): update jump and coin sound file paths
🔧 chore(event-handler.js): rename handleKeyDown to handleJump and handleTouch to handleJump
🔧 chore(event-handler.js): add condition to play jump sound only on keyboard jump
🔧 chore(event-handler.js): prevent default touchstart event to avoid button click on mobile
🔧 chore(game.js): remove audio parameter from Mario constructor
🔧 chore(mario.js): remove audio parameter from Mario constructor
🔧 chore(mario.js): remove audio.playEffect('jump') from jump method

src/audio-manager.js

@@ -4,8 +4,8 @@ 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 COIN_SOUND_PATH = './assets/audio/coin-sound.mp3';
+  static JUMP_SOUND_PATH = './assets/audio/jump.mp3';
+  static COIN_SOUND_PATH = './assets/audio/coin.mp3';
   static BGM_PATH = './assets/audio/bgm.mp3';
 
   soundOnImage = new Image();
@@ -19,8 +19,12 @@ class AudioManager {
     this.audio.autoplay = autoplay;
     this.audio.loop = loop;
     this.audio.muted = muted;
+
     this.jumpSound.volume = 0.5;
+    this.jumpSound.playbackRate = 2;
+
     this.coinSound.volume = 0.5;
+    this.coinSound.playbackRate = 2;
 
     this.preloadImages();
   }

src/event-handler.js

@@ -4,40 +4,40 @@ export default class EventHandler {
   constructor(game) {
     this.game = game;
     // 동일한 참조의 이벤트 핸들러를 사용해야 이벤트를 제거할 수 있으므로 this.handleKeyDown 메서드 바인딩
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleTouch = this.handleTouch.bind(this);
+    this.handleJump = this.handleJump.bind(this);
     this.handleDialogClose = this.handleDialogClose.bind(this);
   }
 
   setupEventListeners() {
-    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keydown', this.handleJump);
     DomManager.dialog.addEventListener('close', this.handleDialogClose);
-    DomManager.gameArea.addEventListener('touchstart', this.handleTouch, {
+    DomManager.gameArea.addEventListener('touchstart', this.handleJump, {
       passive: false, // event.preventDefault() 호출할 것이라고 브라우저에게 알림
     });
   }
 
   removeEventListeners() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-    DomManager.gameArea.removeEventListener('touchstart', this.handleTouch);
+    document.removeEventListener('keydown', this.handleJump);
+    DomManager.gameArea.removeEventListener('touchstart', this.handleJump);
   }
 
   handleDialogClose(e) {
     if (e.target.returnValue === 'restart') this.game.restart();
   }
 
-  handleKeyDown(e) {
-    // "시작" 버튼을 누르면 버튼에 포커스된 상태가 되고,
-    // 스페이스를 누르면 기본 동작으로 인해 시작 버튼이 클릭되는 문제 있음
-    // preventDefault()를 이용해 기본 동작을 해제하면 문제 발생 안함
-    if (e.code === 'Space') {
+  handleJump(e) {
+    const isSpaceKeyPressed = e instanceof KeyboardEvent && e.code === 'Space';
+    const isTouchEvent = e instanceof TouchEvent && e.type === 'touchstart';
+
+    if (isSpaceKeyPressed || isTouchEvent) {
+      // "시작" 버튼을 누르면 버튼에 포커스된 상태가 되고,
+      // 스페이스를 누르면 기본 동작으로 인해 시작 버튼이 클릭되는 문제 있음
+      // preventDefault()를 이용해 기본 동작을 해제하면 문제 발생 안함
       e.preventDefault();
+
+      // 모바일에선 점프, 코인 사운드를 둘다 재생하면 살짝 끊김 현상해서 점프 소리 비활성
+      !isTouchEvent && this.game.audio.playEffect('jump');
       this.game.mario.jump();
     }
   }
-
-  handleTouch(e) {
-    e.preventDefault();
-    this.game.mario.jump();
-  }
 }

src/game.js

@@ -32,7 +32,7 @@ class Game {
     this.score = new Score();
     this.background = new Background({ speed });
     this.entityManager = new EntityManager({ speed, bottom });
-    this.mario = new Mario({ bottom, audio: this.audio });
+    this.mario = new Mario({ bottom });
     this.eventHandler = new EventHandler(this);
 
     // 동일한 참조의 이벤트 핸들러를 사용해야 이벤트를 제거할 수 있으므로 this.handleKeyDown 메서드 바인딩

src/mario.js

@@ -11,12 +11,10 @@ class Mario {
   runImage = new Image();
   element = new Image();
 
-  audio;
   bottom;
   isJumping = false;
 
-  constructor({ audio, bottom, className = 'mario' }) {
-    this.audio = audio;
+  constructor({ bottom, className = 'mario' }) {
     this.bottom = bottom;
 
     this.preloadImages()
@@ -53,7 +51,6 @@ class Mario {
   jump() {
     if (this.isJumping) return;
 
-    this.audio.playEffect('jump');
     this.isJumping = true;
     let jumpCount = 0;
     let velocity = Mario.JUMP_HEIGHT;