JavaScript 입문 : 숫자 야구 게임 - 무작위(랜덤) 숫자 만들기

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다.

 

지난 시간 숫자 야구 게임에 대한 순서도를 그려 보았습니다. 이 순서도에서 문제를 내는 출제자(술래)입장을 코딩할 예정입니다. 순서도만 따지면 다음과 같습니다. 

 

우선 기본적인 HTML 프레임만 만들어 놓고 상기 순서도를 코딩해 보겠습니다. 

 

1. 숫자야구를 위한 기본 HTML

 

기본적 HTML 모양이 필요합니다. 출제자가 낸 랜덤 숫자 4개는 컴퓨터 어딘가에 저장을 시키고 우리는 기본적 HTML에 숫자를 직접 타이핑 하면서 게임을 진행할 겁니다.

 

 

상기와 같은 입력창을 하나 만들고 이 입력창에 숫자를 입력해 가면서 컴퓨터에서 랜덤하게 만든 숫자를 맞출 생각입니다. 

우선 HTML 코드는 다음과 같이 사용합니다. 

 

 

참고로 <form>태그 밑에 id = logs를 사용한 <div> 태그를 만들어 주았는데요 .. 이 곳은 앞으로 입력된 숫자가 스트라이크인지 볼인지 등을 나타내는 화면이라고 보시면 될 것 같습니다. 

 

2. 랜덤숫자 만들기 

 

이제는 출제자 입장에서 숫자 4개를 미리 만들어 놓아야 합니다. 우리는 출제자 입장에서도 숫자 4개를 만드는 코딩연습이 필요합니다. 

 

0부터 9까지 랜덤하게 숫자를 뽑는 함수를 공부할 필요가 있는데요. Math.random(  ) 라는 함수를 이용합니다.  

 

Math.random( )을 브라우저에서 실행시켜 보겠습니다. 

 

Math.random(  )의 범위는 0이상 1미만 사이 소수입니다. 정수로 바꾸기 위해서는 먼저 9를 곱합니다. 범위는 

0 <= Math.random( ) < 9이 되겠습니다.

 

우리가 필요한 수는 1부터 9까지 수이므로 전체에 1을 더해주고 소수점 내리기를 하면 0에서 9까지 정수를 구할 수 있습니다. 

 

 

소수점 내리기 함수 Math.floor(  )를 사용합니다. 

이제는 0부터 9까지 정수를 랜덤하게 뽑을 수 있습니다. 

 

여기서 주의할 점은 Math.random(  ) 함수는 진짜 무작위로 나오는 수가 아니라고 합니다. 중요한 프로그램을 만들거나 랜덤수를 이용 보안이 필요한 경우에 사용할 경우는 Web Crypto API의 window.crypto.getRandomValues(  )를 사용해야 한다고 합합니다.