JavaScript 실습

공부하기 싫어서 수업 때 만든 작은 창 만드는 방법을 응용해서 사천성을 만들어봤다.

사천성이 뭔지 모르는 사람도 있을테니 사천성은 간단하게 말하면 카드 짝 맞추기 게임입니다.

물론 미적 감각이 죽은 자퇴생 공돌이의 작품이라 디자인은 형편 없다...

 

simsimpooli.zip

0.01MB

 

적당히 기능구현만 하고 최적화라고는 1도 안해서 좀 형편없어보이긴 하지만

뭐라도 만들어낸게 있으니까 배우는 보람?이 느껴지긴 하는 것 같다.

 

만들면서 스스로 의문인 점들을 적어가며 해결해나갔고,

마지막까지 해결 못한 점들은 수업하는 날 강사님께 찾아가서 여쭤보려고 했는데,

 

자바스크립트에 sleep() 메서드가 없다는 걸 알게 되었고  적당히 직접 만들어서 쓰려고 했더니,

사용은 되는데 내가 원하는 순서로 사용이 안되어서 강사님께 여쭈어봤다.

// 자바스크립트에 sleep()이 없대서 적당히 만듦
function sleep(sec) {                           // 지연시킬 시간 입력
    let past = Date.now();
    let now = past;
    while (now - past < sec * 1000) {          // 아까전과 지금의 차이가 `sec`초가 될 때까지 이 작업을 수행한다.
        now = Date.now();
    }
}

if (count === MAX_COUNT){                   // 오픈된 게 2장이면
    // sleep(2);                           
    // 오픈한 2장의 값이 같으면
    if (main.querySelectorAll(':scope .dialog > .content.visible')[0].innerText === main.querySelectorAll(':scope .dialog > .content.visible')[1].innerText){
        count -= 2;                                                         // 냅둘 거여도 개수는 낮춰야 뒤의 진행에 문제가 없음
        main.querySelectorAll(':scope .dialog > .content.visible')[0].classList.add('visi');
        // 이제 더이상 안보이게하지 않음
        main.querySelectorAll(':scope .dialog > .content.visible')[1].classList.add('visi');
        // 이제 더이상 안보이게하지 않음

        main.querySelectorAll(':scope .dialog > .content.visible')[0].classList.remove('visible');
        // 원래 속성은 지우기
        main.querySelectorAll(':scope .dialog > .content.visible')[0].classList.remove('visible');
        // 원래 속성은 지우기, 0번을 삭제하면 1번이 앞으로 당겨져서 0번을 또 지워야함
        // 배열이면 안 이런데 어레이리스트 구현한 배열이라 이렇게 해야함
    }else {                                             // 2장의 값이 다르면
        for (let i = 0; i < MAX_COUNT; i++){
            main.querySelectorAll(':scope .dialog > .content.visible')[0].classList.remove('visible');
            // 둘 다 다시 덮어
            count --;       // 시행이 2번 되니까 한번에 1씩만 빼면 됨
        }
    }
}

 

위에 올린 자바스크립트 파일 중에 주석 쳐진 // sleep(2) 부분이다.

이 부분을 setTimeout(f, t) 메서드를 이용해서 구현하라고 말씀해주셨다.

아마 안되는 이유가 xhr이 비동기 방식인데 sleep(2)가 실행되는 중에 뒷 부분이 먼저 실행되서 그런 것 같다.

 

이 생각을 스스로 못한 게 좀 아쉽긴 하지만 뭐 일단 스스로 여기까지라도 만들어봤으니 그나마 좀 나은 것 같다.

 

그리고 다 만들고 한 생각인데

그냥 css에 gird 썼으면 됐는데 왜 위치 잡는 로직을 따로 만들어줬지..? 

 

머리가 멍청하면 몸이 고생한다는 말을 오늘도 떠올린다.

갈길이 멀다...

 

첫 화면

 

 

게임 시작 누르면 나오는 화면

 

 

진행 중인 화면