[테트리스] 23. 시간 출력

오늘의 이슈.

플레이타임을 시분초로 출력하자.

---

<!-- /main.html -->

<span class="time-text">0 : 0 : 0</span>

시분초를 출력하는 부분을 html에 지정.

 

// /js/constants.js

const TIMER_UNIT = 1000; // 1sec

1초 마다 타이머가 수정되게 상수를 추가.

 

// /js/timer.js

class Timer {

    constructor(speed, bottomTimeInterval, bottomTimeTempInterval, speedUpInterval, speedUnitPercent,
                gameFunction, gameoverFunction, whenDropBlockNextFunction) {
        // ... 
        this.time = 0;
        this.timerId = null;
    }

    startGame() {
        this.setTimer(); // add
        this.refreshGame(this.speed);
        this.setDifficulty();
    }

    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)
            
            // html에 출력
            const el = document.getElementsByClassName("time-text")[0];
            const newText = hour + " : " + min + " : " + sec;
            el.innerText = newText;
        }, TIMER_UNIT);
    }

    stopGame() {
        // ...
        this.timerId = null;
        this.time = 0;
    }

}

게임플레이시간을 저장하는 time 변수를 추가한다. 

TIMER_UNIT(1초) 마다 실행되는 setInterval 함수를 호출하여 time에 1을 더하고 time을 시분초로 바꿔 html의 text를 현 게임플레이 시간으로 변경한다.

 

출력확인.

 

시 : 분 : 초 로 출력되는 것을 확인

---

깃허브 : add timer