자바스크립트 실습(1) - 숫자 맞히기 게임

컴퓨터가 랜덤으로 1~100 사이의 숫자를 생성하고, 사용자가 그 숫자를 맞히는 게임이다. 사용자가 입력한 숫자가 정답보다 작다면 DOWN, 크다면 UP, 같다면 맞혔다는 문구를 출력한다.

 

var comNum = Math.floor(Math.random() * 100 + 1); // 컴퓨터가 만든 숫자
var userLabel = document.querySelector("#try");
var display = document.querySelector("#display");
var counter = document.querySelector("#counter");
var tryCount = 0; // 시도 횟수

userLabel.onkeydown = function(e) {
    if (e.keyCode == 13 || e.which == 3) {
        playGame();
        return false;
    }
}

function playGame() { // 확인 버튼 클릭시 실행
    var userNum = Number(userLabel.value); // 사용자가 입력한 숫자

    if (userNum < 1 || userNum > 100) { // 범위를 넘어선 경우
        alert("1~100 사이의 숫자만 입력할 수 있습니다.");
    }
    else {
        if (userNum < comNum) { // 정답보다 작은 경우
            display.innerText = "UP";
        }
        else if (userNum > comNum) { // 정답보다 큰 경우
            display.innerText = "DOWN";
        }
        else { // 정답을 맞힌 경우
            display.innerText = "맞힘";
        }
    }
    userLabel.value = "";
    counter.innerText = "시도 횟수 : " + ++tryCount + "회";
}

 

1. 랜덤 숫자 변수의 위치

---

처음에는 함수 내에 변수를 넣었는데 함수 안에 변수가 있으니 사용자가 확인 버튼을 누를 때마다 숫자가 바뀌는 문제가 발생했다. 어차피 다시 버튼을 누르면 reload 돼서 랜덤 숫자도 다시 바뀔 테니까 함수 밖으로 변수를 빼냈다.

 

2. while문

---

아직 C언어, Python 같은 언어에만 익숙해서 정답을 맞힐 때까지 게임이 계속 진행된다니까 아무 생각 없이 while 루프를 사용해버렸다. 그랬더니 무한루프 때문에 페이지가 먹통이 되어버렸다. (ㅠㅠ) 곰곰이 생각해보니 그냥 문구 출력하고 입력 창만 비워주면 되는 일이었다..

 

3. innerHTML과 innerText의 차이

---

둘 다 HTML 태그의 내부 문자를 가져올 때 사용한다. 다만 innerHTML은 문자를 태그로 인식하고 innerText는 텍스트로만 인식한다. 표시할 내용이 텍스트뿐이라면 innerText를 사용해도 된다.

 

4. Enter 키 입력해서 함수 실행하기

---

마우스로 직접 확인 버튼을 누르지 않고 Enter 키를 눌러서 함수를 실행시키기 위해서는 Enter 키의 keycode 값을 알아내야 한다. 키보드 입력 이벤트가 발생했을 때 Enter 키의 keycode 값이 입력된다면 함수를 실행하도록 한다.

키보드 입력 관련 이벤트

• onkeydown : 키를 눌렀을 때 발생한다.
• onkeyup : 키를 눌렀다 뗐을 때 발생한다.
• onkeypress : 키를 눌렀을 때 발생한다. ASCII 값을 사용한다.

실습 파일에 나온 그대로 작성했는데 실행이 안 돼길래 찾아봤더니 onkeydown, onkeyup에 적용되는 keycode 값을 알려주고 이벤트는 keypress를 사용해서 적용이 제대로 되지 않았다. 또 keycode 속성은 keyCode인데 c를 소문자로 써서 적용이 되지 않았던 것이었다.

 

 

---

나는 조금 더 깔끔하게 코드를 작성하고 싶어서 각 태그들을 모두 변수로 받아오긴 했는데 이게 더 비효율적인 건지... 더 효율적인 방법은 뭔지 알고 싶다.