✨ feat : 각종 사운드 추가

KOPO-DA5 · Apr 27, 2024 · e9292e3 · e9292e3
1 parent 45399b8
commit e9292e3
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 4 deletions.
diff --git a/audios/else/main-bgm.mp3 b/audios/else/main-bgm.mp3
diff --git a/index.html b/index.html
@@ -9,8 +9,9 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="./css/common.css" />
+    <audio id="mainBgm" src="./audios/else/main-bgm.mp3 "></audio>
+    <audio id="menuMove" src="./audios/else/esc-move.mp3 "></audio>
   </head>
-
   <body>
     <div id="console">
       <div id="gameView">

diff --git a/js/app.js b/js/app.js
@@ -1,7 +1,17 @@
 document.addEventListener("DOMContentLoaded", function () {
+  const content = document.getElementById("content");
+  resetAnimation(content);
+  playSound("mainBgm");
+  function resetAnimation(element) {
+    element.classList.remove("fade-in");
+    void element.offsetWidth;
+    element.classList.add("fade-in");
+  }
+
   function handleKeyDownApp(event) {
     if (!GlobalState.isGameActive) {
       if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        playSound("menuMove");
         toggleGameSelection();
       }
       if (event.key === "Enter") {
@@ -43,4 +53,10 @@ document.addEventListener("DOMContentLoaded", function () {
     document.body.appendChild(script);
     GlobalState.scriptElement = script;
   }
+
+  function playSound(soundId) {
+    const sound = document.getElementById(soundId);
+    sound.currentTime = 0;
+    sound.play();
+  }
 });
diff --git a/js/dinosaur/dinosaur.js b/js/dinosaur/dinosaur.js
@@ -15,7 +15,13 @@ function resetAnimation(element) {
   element.classList.add("fade-in");
 }
 
+function pauseMusic(soundId) {
+  const backgroundMusic = document.getElementById(soundId);
+  backgroundMusic.pause();
+}
+
 function updateGameContent() {
+  pauseMusic("mainBgm");
   const content = document.getElementById("content");
   content.innerHTML = `
   <link rel="stylesheet" href="../css/dinosaur.css" />

diff --git a/js/dinosaur/main.js b/js/dinosaur/main.js
@@ -68,20 +68,21 @@
   function returnToSelection() {
     document.getElementById("game-controls").classList.add("hide"); // 게임 컨트롤 숨기기
     gameoverMessage.classList.add("hide"); // 게임 오버 메시지 숨기기
+    //공룡게임에서 사용했던 모든 이벤트리스너 제거
     document.removeEventListener("keydown", handleKeyDown);
     document.removeEventListener("keydown", onJump);
     document.removeEventListener("keydown", modalButtonSelection);
 
     // 게임 뷰의 요소를 삭제
     const game = document.getElementById("game");
     if (game) {
-      game.remove(); // 게임 뷰 요소 삭제
+      game.remove();
     }
 
     // 게임 선택 화면 보이기
     const gameSelection = document.getElementById("content");
-    resetAnimation(gameSelection);
-
+    resetAnimation(gameSelection); // 부드러운 전환 효과 적용
+    playSound("mainBgm");
     gameSelection.innerHTML = `
     <div id="game-selection">
       <p id="selected-game">← Dino →</p>
@@ -558,13 +559,15 @@
           (modalCurrentButtonIndex - 1 + modalButtons.length) %
           modalButtons.length;
         updateButtonSelection(modalCurrentButtonIndex);
+        playSound("menuMoveSound");
         break;
       case "ArrowDown":
       case "ArrowRight":
         // 선택된 버튼 인덱스를 증가
         modalCurrentButtonIndex =
           (modalCurrentButtonIndex + 1) % modalButtons.length;
         updateButtonSelection(modalCurrentButtonIndex);
+        playSound("menuMoveSound");
         break;
       case "Enter":
         // 선택된 버튼의 클릭 이벤트를 강제 실행

diff --git a/js/dinosaur/skin.js b/js/dinosaur/skin.js
@@ -9,6 +9,7 @@ function loadGameSkin() {
   const content = document.getElementById("content");
   resetAnimation(content);
   content.innerHTML = `
+  <audio id="menuMoveSound" src="../audios/else/esc-move.mp3"></audio>
       <link rel="stylesheet" href="../css/dinosaur.css" />
       <div class="parent">
         <div class="button-container">
@@ -36,9 +37,12 @@ function loadGameSkin() {
 
     if (key === "ArrowLeft") {
       selectedIndex = Math.max(0, selectedIndex - 1);
+      playSound("menuMoveSound");
       updateSelectedButton();
     } else if (key === "ArrowRight") {
       selectedIndex = Math.min(buttons.length - 1, selectedIndex + 1);
+      playSound("menuMoveSound");
+
       updateSelectedButton();
     } else if (key === "Enter") {
       document.removeEventListener("keydown", handleKeyPress);
@@ -78,4 +82,9 @@ function loadGameSkin() {
   }
 
   document.addEventListener("keydown", handleKeyPress);
+  function playSound(soundId) {
+    const sound = document.getElementById(soundId);
+    sound.currentTime = 0;
+    sound.play();
+  }
 }