resolved #20 add timer

fpdjsns · Mar 2, 2022 · 1968b53 · 1968b53
1 parent 00023f0
commit 1968b53
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/Tetris/js/constants.js b/Tetris/js/constants.js
@@ -36,6 +36,7 @@ const BOTTOM_DUPLICATED = 4;
 
 const LINE_COLOR = "gray";
 
+const TIMER_UNIT = 1000; // 1sec
 const SPEED = 1000; // 1sec
 const BLOCK_BOTTOM_TIMEOUT = 2000; // 4sec
 const BLOCK_BOTTOM_TEMP_TIMEOUT = 500; // 0.5sec

diff --git a/Tetris/js/timer.js b/Tetris/js/timer.js
@@ -15,6 +15,8 @@ class Timer {
         this.gameoverFunction = gameoverFunction; // 게임 종료시 실행되는 함수.
         this.whenDropBlockNextFunction = whenDropBlockNextFunction; // 블럭이 땅에 도달했다고 판단 후 후처리 함수. (ex, 다음 블럭 생성)
 
+        this.time = 0;
+        this.timerId = null;
         this.gameTimerId = null;
         this.bottomTime = null;
         this.bottomTempTime = null;
@@ -37,6 +39,7 @@ class Timer {
 
     // ==== game ====
     startGame() {
+        this.setTimer();
         this.refreshGame(this.speed);
         this.setDifficulty();
     }
@@ -59,10 +62,31 @@ class Timer {
         }, speed);
     }
 
+    setTimer() {
+        const that = this;
+        that.time = 0;
+        if (that.timerId)
+            clearInterval(this.timerId);
+        return that.timerId = setInterval(function () {
+            that.time++;
+            const time = that.time
+            const min = parseInt((time / 60) % 60)
+            const hour = parseInt(time / (60 * 60))
+            const sec = parseInt(time % 60)
+
+            const el = document.getElementsByClassName("time-text")[0];
+            const newText = hour + " : " + min + " : " + sec;
+            el.innerText = newText;
+        }, TIMER_UNIT);
+    }
+
     stopGame() {
         if (!this.gameTimerId) return;
         clearInterval(this.gameTimerId);
         this.gameTimerId = null;
+        clearInterval(this.timerId);
+        this.timerId = null;
+        this.time = 0;
         clearInterval(this.difficultyTimerId);
         this.difficultyTimerId = null;
         this.gameoverFunction();

diff --git a/Tetris/main.html b/Tetris/main.html
@@ -37,7 +37,7 @@
 </table>
 <button class="btn_open_setting" onclick="openSetting()">설정</button>
 
-<div id="setting" class="layer_popup" hidden>
+<span id="setting" class="layer_popup" hidden>
     <div class="layer">
         <div class="text_area">
             <p>위 <input type="text" class="key_input" id="key-up" onkeydown="return false;"/></p>
@@ -53,8 +53,8 @@
         </div>
     </div>
     <div class="dimmed"></div>
-</div>
-
+</span>
+<span class="time-text">0 : 0 : 0</span>
 
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
       integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"