숫자 기억 게임 만들기 4일차 完

앞으로 며칠은 더 걸릴 줄 알았는데, 그간의 노력이 빛을 발했는지 오늘에 이르러 드디어 게임을 완성했다. 아래는 최종본이다. 

 

 

시작 버튼 클릭->

입력 텍스트 박스 비활성화+아래쪽 박스 비표시

+랜덤한 수 생성+랜덤한 수가 생성된 위쪽 박스 표시+카운트 박스 표시

+3초 카운트+3초 후 위쪽 박스와 카운트 박스 비표시

+입력 텍스트 박스 활성화 ->

 

입력-> 제출 버튼 클릭->

아래쪽 박스 표시

+정답인지 아닌지 확인하고 결과값을 출력하는 if문

+입력 텍스트 박스에 입력된 값 초기화

 

반드시 필요한 기능 외에도 ui, 편의성 측면에서 필요할 것 같은 기능들을 구현해 보았다. 제법 힘들었지만, 드디어 스스로 무언가를 만들어내었다는 성취감이 커서 매우 뿌듯해졌다. 

 

이제 더 자세히 살펴보자면,

 

저번에 문제가 되었던 것은 랜덤한 수 생성과 인풋값 지정, let 변수 선언, 그리고 소소하게는 타이머의 시간을 잘못 설정한 것들이었다. 

 

먼저 랜덤한 수 생성부터 살펴보면, 이 문제는 html에서 콘솔을 통한 디버깅으로 상세를 알아볼 수 있었는데 내가 Max와 Min을 변수 선언하지 않은 것이 원인이었다. 

function generateRandomNumber() {

            let Max = 9999;

            let Min = 1000;

            randomnumber = Math.floor(Math.random() * (Max - Min) + Min);

            number_display.innerHTML = `${randomnumber}`;

            return randomnumber;

        }

 

 

이 코드에서 2, 3번째 줄이 문제의 원인이다. 전에는 아예 숫자로 입력했는데, 여러가지 시도를 하는 과정에서 변수로 입력해놓고는 변수 선언을 지워버렸던 것이다. 

 

그리고 리턴 위에 있는 코드는 이 함수에서 생성한 랜덤한 수의 값을 html 본 페이지, 즉 동영상에서 '여기를 보세요!'라고 쓰여진 위쪽 박스에 출력하는 부분이다. 이러한 과정이 없으면 페이지 내에서 함수 자체가 잘 돌아가더라도 사용자가 눈으로 볼 수 없으니 게임이 성립하지 않는다. 

 

다음은 인풋값 지정과 변수 선언이었는데, 이는 내가 기본적인 문법 자체에 익숙하지 않아서 생긴 문제라서 집중에서 잘 살펴보고 조사해보니 금방 해결할 수 있었다. 타이머 시간 설정은 단순한 부주의였으므로 오늘에 들어서 빠르게 게임의 필수 기능들을 완성하고 게임을 작동시킬 수 있었다. 

 

이 시점에서는 

 

시작 버튼 클릭->

+랜덤한 수 생성+랜덤한 수가 생성된 위쪽 박스 표시+

+3초 후 위쪽 박스 비표시

입력-> 제출 버튼 클릭->

아래쪽 박스 표시

+정답인지 아닌지 확인하고 결과값을 출력하는 if문

+입력 텍스트 박스에 입력된 값 초기화

 

까지 구현했다. 

 

이후 시간이 많이 남았고, 직접 구동해보니 미흡한 점이 눈에 띄어서 나름 ui와 편의성에 신경을 써보았다. 그것이 입력 텍스트 박스 비활성화/활성화, 타이머 표시 기능, 기타 박스 표시/비표시 ui 기능이었다. 또 <br>를 문장 사이에 넣어서 출력되는 문장에 줄바꿈을 해주는 것도 익혀서 넣었다. 

 

이 과정에서 학습한 것 중 두 가지를 꼽자면 disabled(비활성화/활성화)와 비동기 처리로 실행 순서 제어(타이머 표시 기능)한 것을 들 수 있다. 

 

입력 텍스트 박스에 적용한 disabled는 숫자 기억 게임 답게 숫자가 표시 되는 3초간 숫자를 머리로만 기억하고 미리 답을 입력해두지 않도록 하기 위해서 필요한 기능이다. 이는 display와 같이 html 버튼 태그에 포함된 속성으로 이전에

 

result.style.display = "flex";를 통해 result를 id로 가진 태그의 display 속성을 변경한 것처럼

$("#user_input").prop('disabled', true);를 통해 user_input을 id로 가진 태그의 disabled 속성을 변경했다. 

 

원래는 위쪽의 방법으로 disabled 속성을 변경하려고 했는데, 알 수 없는 이유로 구동에 실패했다. 추측하기로는 변수 선언 문제인 것 같은데, 아직은 원인을 밝혀낼 수는 없었기에 추후의 과제로 남았다. 

 

다음은 비동기 처리로 실행 순서 제어(타이머 표시 기능)이다. 이번엔 먼저 코드를 보도록 하자. 

function startGame() {

            generateRandomNumber();

            number_display.style.display = "flex";

            count_display.style.display = "flex";

            result.style.display = "none";

            $("#user_input").prop('disabled', true);

            setTimeout(function three() {

                count_display.innerHTML = `3`;

                setTimeout(function two() {

                    count_display.innerHTML = `2`;

                    setTimeout(function one() {

                        count_display.innerHTML = `1`;

                        setTimeout(function endGame() {

                            number_display.style.display = "none";

                            count_display.style.display = "none";

                            $("#user_input").prop('disabled', false);

                        }, 1000);

                    }, 1000);

                }, 1000);

            }, 1);

        }

 

이는 시작 버튼을 누르면 실행되는 게임시작 함수이다. 함수 선언 밑의 5줄은 하나의 랜덤한 수 생성 함수를 제외하면 거의 CSS와 관련된 것이고, 중요한 것은 아래쪽의 거의 비스듬한 도형처럼 보이는 코드이다. 이 코드는 setTimeout(함수, 딜레이 시간)의 문법에서 함수 부분에 액자식으로 다음에 실행되어야 할 함수를 욱여넣은 것이다.

 

그럼으로써 0.001초 후에 카운트 박스에 '3'을 띄우고, 1초 뒤에 '2'를, 2초 뒤에 '1'을, 3초 뒤에 숫자와 카운트 박스가 비표시되고 동시에 입력 텍스트 박스도 활성화되는 함수가 실행되는 구조이다. 하지만 욱여넣었다는 표현에 걸맞게 이러한 함수를 실행하는 것은 비효율적이며 디버깅이 힘들고 연속해서 실행해야 하는 함수가 많으면 이러한 문제가 더욱 부각된다는 점에서 썩 좋은 방법은 아니다. 다만 초보의 입장에서는 직관적이라서 써먹기 좋았다. 

 

 

이렇게 숫자 기억 게임 만들기가 마무리되었다. 이번에는 이런 간단한 게임을 만들었지만 앞으로 더 많이 배워서 다른 재미있는 것들도 만들 수 있게 되었으면 좋겠다.