Merge pull request #82 from KOPO-DA5/76-feat-해당-시간-내에-코인-insert-기능

76 feat 해당 시간 내에 코인 insert 기능
KOPO-DA5 · Apr 29, 2024 · 9d2289d · 9d2289d
2 parents 529e5d9 + 5ff35e0
commit 9d2289d
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 27 deletions.
diff --git a/audios/else/insert-coin.mp3 b/audios/else/insert-coin.mp3
diff --git a/js/dinosaur/dinosaur.js b/js/dinosaur/dinosaur.js
@@ -38,7 +38,11 @@ function updateGameContent() {
     id="obstacleHitSound"
     src="audios/dino/dino-hitobstacle.mp3"
   ></audio>
-  <div id="game" class="game">
+  <audio
+    id="insertCoin"
+    src="audios/else/insert-coin.mp3"
+  ></audio>
+  <div id="game" class="game hide">
     <span>Coin: </span>
     <span id="coin" class="coin">${coin}</span>
     <div id="score" class="score">0</div>
@@ -102,7 +106,7 @@ function updateGameContent() {
     </div>
   </div>
 
-  <div id="count-down">1</div>
+  <div id="count-down" class="count-down hide">1</div>
               `;
 
   loadScript("js/dinosaur/main.js");

diff --git a/js/dinosaur/main.js b/js/dinosaur/main.js
@@ -9,6 +9,7 @@
   const gameControls = document.getElementById("game-controls");
   const buttons = gameControls.querySelectorAll("button");
   const coinDino = document.querySelector("#coin");
+  game.classList.remove("hide");
   let dinoAccountValues = {
     score: 0,
     lines: 0,
@@ -101,30 +102,27 @@
     GlobalState.isGameActive = false; //전역으로 게임이 종료되었음을 알림 -> 게임선택 이벤트 리스너가 다시 동작함
   }
 
-  function returnToInsert() {
-    //코인이 0개일 때 다시 insert 화면으로 돌아가는 함수
-    document.getElementById("game-controls").classList.add("hide"); // 게임 컨트롤 숨기기
-    gameoverMessage.classList.add("hide"); // 게임 오버 메시지 숨기기
-    //공룡게임에서 사용했던 모든 이벤트리스너 제거
-    document.removeEventListener("keydown", handleKeyDown);
-    document.removeEventListener("keydown", onJump);
-    document.removeEventListener("keydown", modalButtonSelection);
+  let countdownInterval; // 전역 변수로 선언하여 clearInterval을 통해 중단 가능하도록 함
+  let countdown;
 
-    // 게임 뷰의 요소를 삭제
+  function returnToInsert() {
+    const gameControls = document.getElementById("game-controls");
+    gameControls.classList.add("hide");
     const game = document.getElementById("game");
     if (game) {
-      game.remove();
+      game.classList.add("hide"); // 게임 뷰 요소 삭제
     }
 
+    console.log("coin:" + coin);
     if (coin == 0) {
       let count = 10;
-      const countdown = document.createElement("div");
+      countdown = document.createElement("div"); // 전역 변수 countdown에 할당
       countdown.id = "count-down";
       countdown.textContent = count;
       countdown.style.display = "block";
       console.log(countdown.style.display);
 
-      const countdownInterval = setInterval(() => {
+      countdownInterval = setInterval(() => {
         count--;
         console.log(count);
         countdown.textContent = count;
@@ -140,25 +138,48 @@
 
           // 게임 선택 화면 보이기
           const gameSelection = document.getElementById("content");
-          resetAnimation(gameSelection); // 부드러운 전환 효과 적용
-          playSound("mainBgm");
+          mainBgm.play();
           gameSelection.innerHTML = `
-    <div id="game-selection">
-      <p id="selected-game">← Dino →</p>
-      <p>Press Enter to start selected game</p>
-  </div>
-                `;
-          GlobalState.isGameActive = false; //전역으로 게임이 종료되었음을 알림 -> 게임선택 이벤트 리스너가 다시 동작함
+        <div id="game-selection">
+          <p id="selected-game">← Dino →</p>
+          <p>Press Enter to start selected game</p>
+        </div>
+      `;
+
+          GlobalState.isGameActive = false;
         }
       }, 1000);
       const content = document.getElementById("content");
       content.appendChild(countdown);
     } else {
-      const countdown = document.getElementById("count-down");
       countdown.style.display = "none";
     }
   }
 
+  document.addEventListener("keydown", handleInsertKeyPress);
+
+  function handleInsertKeyPress(event) {
+    if (event.key === "Insert") {
+      coin++; // 코인 증가
+      playSound("insertCoin");
+      console.log("코인: " + coin);
+
+      GlobalState.isGameActive = false; // 게임 종료 상태로 설정
+      clearInterval(countdownInterval); // 카운트 다운 인터벌 중지
+
+      // 카운트 다운 화면 제거
+      if (countdown) {
+        countdown.remove();
+        countdown.style.display = "none";
+      }
+
+      if (game.classList.contains("hide")) {
+        game.classList.remove("hide"); // 게임 뷰 요소 삭제
+      }
+      restartGame();
+    }
+  }
+
   function resetAnimation(element) {
     element.classList.remove("fade-in");
     void element.offsetWidth;
@@ -175,11 +196,13 @@
     speedScale = 1;
     score = 0;
     account.score = 0;
+    console.log("setup");
     setupGround();
     setupDino();
     setupCactus();
     window.requestAnimationFrame(update);
     document.getElementById("ranking-modal").classList.add("hide"); // 게임 컨트롤 숨기기
+    document.getElementById("count-down").classList.add("hide");
     document.removeEventListener("keydown", modalButtonSelection);
   }
 
@@ -271,6 +294,7 @@
     document.addEventListener("keydown", handleKeyDown);
     document.addEventListener("keydown", onJump);
     document.getElementById("ranking-modal").classList.add("hide"); // 게임 컨트롤 숨기기
+    game.classList.remove("hide");
 
     playBackgroundMusic();
 

diff --git a/js/tetris.js b/js/tetris.js
@@ -117,6 +117,9 @@ function returnToSelection() {
   GlobalState.isGameActive = false;
 }
 
+let countdownInterval; // 전역 변수로 선언하여 clearInterval을 통해 중단 가능하도록 함
+let countdown;
+
 function returnToInsert() {
   const gameControls = document.getElementById("game-controls");
   gameControls.classList.add("hide");
@@ -128,13 +131,13 @@ function returnToInsert() {
   console.log("coin:" + coin);
   if (coin == 0) {
     let count = 10;
-    const countdown = document.createElement("div");
+    countdown = document.createElement("div"); // 전역 변수 countdown에 할당
     countdown.id = "count-down";
     countdown.textContent = count;
     countdown.style.display = "block";
     console.log(countdown.style.display);
 
-    const countdownInterval = setInterval(() => {
+    countdownInterval = setInterval(() => {
       count--;
       console.log(count);
       countdown.textContent = count;
@@ -167,12 +170,30 @@ function returnToInsert() {
     const content = document.getElementById("content");
     content.appendChild(countdown);
   } else {
-    const countdown = document.getElementById("count-down");
     countdown.style.display = "none";
     clearDarkenGameContent();
   }
 }
 
+document.addEventListener("keydown", handleInsertKeyPress);
+
+function handleInsertKeyPress(event) {
+  if (event.key === "Insert") {
+    coin++; // 코인 증가
+    insertCoin.play();
+    console.log("코인: " + coin);
+
+    GlobalState.isGameActive = false; // 게임 종료 상태로 설정
+    clearInterval(countdownInterval); // 카운트 다운 인터벌 중지
+
+    // 카운트 다운 화면 제거
+    countdown.remove();
+    countdown.style.display = "none";
+    restartGame();
+    clearDarkenGameContent();
+  }
+}
+
 function selectThreeButton(direction) {
   const gameControls = document.getElementById("game-controls");
   const buttons = gameControls.querySelectorAll("button");

diff --git a/js/tetris/sound.js b/js/tetris/sound.js
@@ -75,6 +75,7 @@ let sound = new Sound(document.querySelector("#sound-div")),
   finishSound = sound.create("audios/tetris/tetris-finish.mp3", "finish_sound"),
   escSound = sound.create("audios/else/esc-on.mp3", "esc_sound"),
   escMove = sound.create("audios/else/esc-move.mp3", "esc_move"),
-  mainBgm = sound.create("audios/else/main-bgm.mp3", "main_bgm");
+  mainBgm = sound.create("audios/else/main-bgm.mp3", "main_bgm"),
+  insertCoin = sound.create("audios/else/insert-coin.mp3", "insert-coin");
 sound.muteToggle();
 sound.soundSetting();