[JS로 게임만들기]타이머 만들기 성공!...

 

function gameset() {

    let COUNT_START = 200; // seconds * hours
    let count = COUNT_START;
    let playing = false;

    playpause = document.querySelector('.start');


    playpause.onclick = function () {
        if (playing) {
            playing = false;
            console.log("Pause!");
            playpause.innerHTML = ` <i class="fa-solid fa-play"></i>`;
        } else if (!playing) {
            playing = true;
            console.log("Play!");
            playpause.innerHTML = `<i class="fa-solid fa-stop"></i>`;
        }

    }



    function countdown() {
        displayTime();
        if (count == 0) {
            playing = false;
            //게임오버
            gameover();
        } else if (playing) {
            setTimeout(countdown, 10);
            count--;
        } else {
            setTimeout(countdown, 10);
        }
    }
    countdown();

    function displayTime() {

        var sec = count;
        var mins = Math.floor(sec / 100);
        sec -= mins * (100);

        document.querySelector('.timer').innerHTML = LeadingZero(mins) + '\'' + LeadingZero(sec) + '\"';

    }

    function LeadingZero(Time) {
        return (Time < 10) ? "0" + Time : + Time;
    }

    const mainPage = document.querySelector('.main');
    function gameover() {
        mainPage.innerHTML = `
        
        <i class="fa-solid fa-rotate-right reset"></i>
        <p class="gameover">GAME OVER</p>
        `

        reset = document.querySelector('.reset');
        reset.onclick = function () {

            console.log("Reset Timer!");
            count = COUNT_START;
            mainPage.innerHTML = `
            <button class="start">
              <i class="fa-solid fa-play"></i>
            </button>
            <div class="timer">READY</div>
            <div class="counter">9</div>
            <section class="playground">
                <img src="/img/carrot.png" alt="carrot" class="carrot" />
                <img src="/img/bug.png" alt="bug" class="bug" />
            </section>
            `
            gameset();
        }

    }


}

gameset();

겨우 구현했다..

 

reset기능을 구현하려면 전체를 다 하나의 function으로 묶어줘야 새로 불러올수가 있어서

마지막에 전체를 gameset으로 묶어주고, 한번 호출해줬다.

조만간 객체 이름짓기 동영상 함 봐야겠다.

 

이중에서 아직 타이머 하나만 구현함..