로또 만들기

이때까지 배운 내용들로 로또 만들어봄.

중간에 이상한데서 실행 안되서 겁나 개빡쳐 죽는줄.

암튼 시작함.

로또의 순서는

1. 컴퓨터가 무작위 숫자 7개를 뽑음

2. 사용자가 무작위 숫자 7개를 뽑음

3. 뽑은 숫자들을 비교함

4. 맞춘 갯수에 따라 등수를 발표함

이렇게 됨.

 

그래서 우선적으로 무작위 숫자를 내는 로또번호를 만듦.

1. 컴퓨터가 무작위 숫자 7개를 뽑음

Math.random( )이란 함수를 통해서 생성했음.

앞의 Math.floor는 랜덤하게 나온 숫자가 실수일 경우 내림을 통해 정수로 만들어주는 역할을 함.

이것 말고도 ceil, round가 있는데 각각 올림, 반올림을 해줌.

Math.random( ) 함수 뒤에 있는 * 44는 랜덤하게 뽑을 숫자의 한계값을 설정해줌.

로또는 1부터 45까지의 숫자 중 7개를 뽑는것이기에 뒤에 +1도 야물딱지게 해줌.

 

근데, 여기서 문제

로또는 같은 숫자를 선택하면 안됨.

그래서 같은 숫자가 나오지 않게끔 만들어줌.

for문 안에 다시 for문을 걸어 만약 같은 값이 lotto배열 안에 있다면

다시 값을 받아오도록 만듦.

 

그리고 받아온 lottoNum을 배열 lotto에다가 밀어넣음.

그래서 컴퓨터가 무작위의 숫자 7개를 뽑는 코드를 합치면 이렇게 됨.

2. 사용자가 무작위 숫자 7개를 뽑음

다음은 사용자가 무작위 숫자 7개를 뽑는 과정을 보겠음.

큰 틀은 1번 과정과 그렇게 다르지 않음.

우선, prompt 창을 이용해 사용자에게 숫자를 받아오는 과정을 반복시킴.

한번에 숫자 7개를 입력받자니, 배열을 잘 다룰 자신이 없어

일단은 번거롭더라도 prompt창을 7번 띄워 

사용자에게 값을 받아오기로 함.

 

다음은 만일, 사용자가 1~45를 벗어나는 값이나,

값을 입력하지 않았을 경우, 경고창을 띄우는 작업을 함.

근데 문제가 있음.

이렇게 소스코드를 짜두면, 경고 알람창이 뜬 후에도 1~45를 벗어나는 숫자를 입력하던가,

숫자를 입력안하게 되어도 별 다른 경고없이 넘어가게 됨.

이건 쫌 더 알아봐야 될 것 같음.

 

다음으로는 사용자가 같은 숫자를 입력한 경우 다시 값을 받아오게끔 만들었음.

1번의 코드와 거의 유사함.

그리고 받아온 yourNum을 배열userNum에다가 밀어넣음.

그래서 사용자에게 번호를 입력받아오는 코드를 다 합치면

이렇게 됨.

3. 뽑은 숫자 비교하기

다음은 각자가 뽑은 숫자를 비교하는 과정임.

count라는 변수를 선언해서

두 배열안의 값들이 같을 경우 더해지도록 만들어 놓음

중복 for문을 이용해 두 배열의 값들을 전부 비교할 수 있게끔 함.

처음에 아무생각 없이

lotto[i] == userNum[i];

라고 선언해뒀었는데

생각해보니까 그렇게 하면 같은 인덱스번호에 위치한 

두 값들끼리 비교하게 된단걸 깨달음.

그래서 중복 for문으로 코드 수정함.

4. 맞춘 갯수에 따라 등수를 발표함

다음은 맞춘 갯수에 따라 등수 발표하게 만드는거임.

로또 룰 살펴보니까

1등은 본번호 6개 전부 맞기

2등은 본번호 5개 + 보너스 번호 맞기

3등은 본번호 5개 맞기

4등은 본번호 4개 맞기

5등은 본번호 3개 맞기

였음.

if문이랑 else if문 이용해서 구현함. 

겁나 지저분해보이는거 나도 앎.

근데 어쩔 수 없었음.

처음에 case문으로 했었는데

내가 어디서 실수한건지 자꾸 구동이 안되는거임.

그래서 어쩔 수 없이 else if문으로 구현함.

 

게다가 2등 구현해놓은거 맞는지 모르겠음.

확인해보고 싶은데 내 운빨로는 어림도 없고, 

저거 확인한다고 난리피다가 소스코드 엉망 될까봐

걍 냅둠.

(얼렁뚱땅 돌아가는 내 소스코드들....)

 

5. 화면에 구현하기

암튼 다음으로는 화면에 구현하기.

솔직히 화면에 구현하는게 제일 힘들었던 것 같음.

코드만 짜는건 익숙한데,

짜놓은 코드들끼리 연결시켜서 이벤트 적용시키는게 

안익숙해서 그런가

솔직히 하면서 멘붕 좀 왔었음.

 

암튼 소스 코드를 보면

일단 html은 이렇게 해둠

아이디를 왤케 많이 걸었냐고 생각할 수도 있지만

워, 워. 다 쓸 데가 있음.

 

다음은 css

id에 num숫자로 넣어둔 친구들은 다 num1 css 복붙해서 붙여둠.

 

아, 그리고 html에서 보였다시피 내가 저 위에 else if문으로 구현해둔

등수 출력하는 부분은

'결과 확인'이라는 버튼을 눌렸을 때, 나오도록 만들려고 했음.

 

근데, 갑자기 이 부분에서 뭘 어떻게 해야

내가 말한데로 실행이 되는지 감이 안오는거임.

(원래: 번호확인 창으로 넘어가면 바로 결과가 나왔었음)

그래서 열심히 구글링했지.

답은 겁나 쉬웠음.

걍 저 else if문을 함수로 만들면 되는거였음.

이렇게 난 아직 함수 생성에 안익숙하구나를 느껴버리고....

 

암튼 이게 그 함수만든 코드임.

이 외에도 로또 번호 확인 이라는 버튼을 눌렀을 때,

각 영역 안에 배열의 값들이 들어가는 함수와

(이거 한번에 넣는 법 알고 싶다...)

 

내가 선택한 번호 확인 버튼을 눌렀을 때, 

'[선택한 번호]' 영역이

사용자가 입력한 번호가 화면에 보이게끔 만드는 함수를 만듦.

 

그 다음은 이벤트와 변수 연결

형태는 

document.getElementById('html id').이벤트 =  변수명 등의 동작

 

이렇게 저 형태를 이용해서 이벤트와 변수를 연결해서 동작하게끔 만듦.

 

그래서 전체 소스파일을 보자면.... 엄.... 너무 기니까 그냥 파일로 올려둠.

빠빠

lotto.html

0.01MB