TIL - 10 | Random Number Game 만들기

Random Number Game

• 첫번째 input에 넣은 숫자를 통해 두번째 input에 넣을 수 있는 숫자의 범위가 정해진다.
• 범위 안에 있는 자연수 중 하나를 user가 선택하여 넣어준다.
• play 버튼을 누르면 랜덤으로 숫자 하나를 골라 대소비교를 하여 승부를 가른다.

노마드 코더에서 무료로 진행 할 수 있는 챌린지라서 신청해서 진행중인데 과제중 하나로
Javascript를 이용하여 매우 간단한 방식의 게임을 만들어 보았다.

작업순서

1. 수도코드를 작성하여 HTML에 어떤 element를 만들 것 인지 결정하고
2. HTML 구조를 완성시키고 어떤 HTML element들을 JS와 연결 시킬지 결정.
3. 그리고 JS에 어떤 method, function들을 써야 하는지 정리 후 코드 작성.

코드정리

1. JS에 연결시킬 HTML element들을 불러온다.

const rangeForm = document.querySelector("#rangeForm"); 
const rangeInput = document.querySelector(".rangeInput");
const chooseForm = document.querySelector("#chooseForm");
const chooseInput = document.querySelector(".chooseInput");
const paintRes = document.querySelector(".paint");

HTML 요소를 JS로 가져오는 방법은 여러가지 있다.

• document.getElementById("IdName")
• document.getElementsByClassName("className")
• document.getElementsByTagName("tagName")
• document.querySelector("#name or .name")

대표적으로 위 4가지 방법이 있는데 querySelector는 CSS selector 표기방법으로 요소들을 가져오기 때문에 굉장히 편리하다고 생각해서 자주 사용한다.

2. rangeForm의 Event (oninput) 대한 handler 함수 생성.

function handlerRangeInput() {
  const rangeNum = rangeInput.value;
  chooseInput.setAttribute("max", rangeNum);
}

rangeForm.addEventListener("input", handlerRangeInput);

• range를 정하기 위한 숫자를 입력하면 input event가 발생한다
• addEventListener로 감지를 해주고 handlerRangeInput 함수 생성
• rangeNum이 입력되는 순간 chooseInput에 max=rangeNum 속성을 추가해주는
  setAttribute 사용

새롭게 알게된 내용

• input type:number의 default event는 oninput이다
• input event는 값을 입력하는 순간 발생하므로 event.preventDefault() 사용이 안됨.

3. submit Event에 대한 감지, handler 함수 생성.

function handlerSubmit(event) {
    event.preventDefault();
    const rangeNum = rangeInput.value;
    const chooseNum = chooseInput.value;
    const randomNum = Math.floor(Math.random() * rangeNum + 1);
    paintResult(chooseNum, randomNum)
  }

  chooseForm.addEventListener("submit", handlerSubmit);

• submit event는 form 태그의 Default event
  submit이 되면 창이 새로고침 되면서 입력값들이 사라짐

• 범위내의 숫자를 입력하고 paly를 누르게되면 submit event 발생

• 이를 감지하기 위해 addEventListener 사용

• submit 감지 시 Default event를 막기 위해 handler 함수에 event.preventDefault(); 사용

• submit 됨과 동시에 화면에 결과를 표시해주는 함수를 실행 시킴. paintResult

• 랜덤한 숫자를 뽑기위한 방법

  const randomNum = Math.floor(Math.random() * rangeNum + 1);

• Math.random();
  0~1 사이의 숫자값을 무작위로 리턴한다.

• Math.floor();
  흔히 수학에서 배우는 버림의 기능을 한다.

• Math.random() * rangeNum을 통해 범위값의 숫자가 나오게 하고

• Math.floor()로 감싸서 소숫점을 버리게 하여 정수가 리턴되도록 해주면 된다.
  이 방법은 굉장히 많이 쓰이므로 꼭 기억해두자.

결과를 web에 나타내주는 paint 함수 생성

function paintResult(chooseNum, randomNum) {

  if ( parseInt(chooseNum) > randomNum ) {
    paintRes.innerText = `You chose: ${chooseNum}, the machine chose: ${randomNum}\nYou Win!`
  } else if ( parseInt(chooseNum) < randomNum) {
    paintRes.innerText = `You chose: ${chooseNum}, the machine chose: ${randomNum}\nYou lost!`
  } else if ( parseInt(chooseNum) === randomNum) {
    paintRes.innerText = `You chose: ${chooseNum}, the machine chose: ${randomNum}\nDrow!`
  }
}

• chooseNum과 randomNum을 변수로 가진다.
• chooseNum은 string type으로 입력되기 때문에 parseInt()나 Number()를 이용해
  number type으로 바꾸어 준후 randomNum과 비교연산자를 통해 비교해준다.
• 조건에 따른 결과를 Template literals을 통해 저장해준다.

느낀점

항상 이론만 공부하고 아주 간단한 예제들만 다뤄보았기 때문에 내가 처음부터 HTML을 짜서 JS를 통해 동적인 기능들을 구현 하려고하니 시작부터 쉽지 않앗다.
배운 내용이고 어렵지 않은 내용이지만 어떤 tag를 사용해야 하고 method를 사용해야 하는지 쉽게 생각하기가 힘들었다. 그래서 생각도 오래하고 검색도 해보고... 그래도 딱히 명쾌하게 답은 나오지 않았다.
그래서 그냥 맨땅에 헤딩 해보자 안되면 계속 해보면 되지 라는 마음에 생각나는데로 구조를 잡고 JS코드를 작성해보았다.
역시나 처음 짜본 코드는 실패, 그 다음도, 다음, 다음 다음도 실패. 그러다 한 5시간 정도 지낫나...
결국은 만들어 지더라. 기뻣다. 허접하지만 첫 결과물이다.
이 과제를 하면서 느낀점은 그냥 부딪쳐보고 깨져봐야 깨닫고 배우는것도 많다 라는 것이다.
앞으로 많은 벽을 허물고 넘어가야 할 것인데... 우선 부딪쳐보자.
이게 오늘 내가 크게 깨달은 점이다. 크게 배웟다.~

p.s 오타는 조심 좀 하자. 오타때문에 날려먹은 시간이 너무 많다.