숫자 기억하기를 통해 게임을 만드는 미션이 생겼다.
먼저 HTML, CSS로 웹사이트를 그려놓자.
style
웹페이지 안의 모든 요소를 정중앙에 위치시키도록 justify와 align을 설정, 웹페이지 전체를aqua색으로 설정, container 박스의 위치를 정중앙에 위치시키고, 박스의 배경 색은aliceblue색으로 설정
- container 클래스 안에 숫자기억 게임을 위한 박스를 만들어 놓는다.
- 숫자를 보여주는
number-display에는display를 none으로 설정해 시작할 때만 숫자를 보여준다.- 그리고 input으로 정답을 입력할 자리를 만들어 놓는다.
- start button과 sub button으로 숫자 기억하기 게임의 시작 버튼과 정답 제출 버튼을 만들어 놓았다.
- 그 아래에는 정답인지 아닌지에 대한 박스를 놓는다.
그 다음 JS를 통해 게임을 만들 것이다.
랜덤 숫자 만들기
먼저 랜덤의 숫자를 출력해야 한다. 1000부터 9999 사이의 숫자를 출력해야 하기 때문에, Math의 random 함수 중 getRandomIntInclusive(min, max) 함수를 사용할 것
getRnadomIntInclusive(min, max)
- min과 max 사이의 숫자 중 랜덤으로 하나를 출력
랜덤 숫자를 위한 변수 선언
다음 랜덤의 숫자의 스코프 설정을 위해 function 내부가 아닌 function 바깥 script 내부에서 선언한다.
let RN;
다음 HTML 내부에 있는 요소들을 컨트롤하기 때문에 $(document)를 이용해야 한다.
시작 버튼
그 아래 start-button을 누를 경우 랜덤의 숫자가 출력되도록 한다.
그리고 3초 뒤 숫자 요소가 숨겨지도록 setTimeOut 함수를 이용한다. start-button을 눌렀을 경우 제출 버튼은 비활성화되도록 설정한다. 또한 setTimeOut이 끝나면 제출 버튼이 활성화되도록 한다.
제출 버튼
제출 버튼인 sub-button을 누르면 시작 버튼을 눌렀을 때 나왔던 숫자와 같은 것을 input에 입력해 정답을 얻어야 한다. 틀릴 경우 아래에 정답인지 메세지를 출력한다.
