[Javascript] 로또를 만들어보자

자바스크립트로도 로또를 만들어보자. 

자바로 해봤는데 뭐 어렵겠어.. 라고 생각했지만 쉽진않았다. 약간의 재미와 약간의 스트레스와 약간의 성취감까지..

    <button type="button" id="createUserNums">Generate User Numbers</button>
    <button type="button" id="createWinNums">Generate Winning Numbers</button>
    <button type="button" id="showResult" onclick="showResult()">Result</button>
    <h3 id="userNums"></h3><br>
    <h3 id="winNums"></h3>
    <h3 id="result"></h3>

먼저 버튼 세개와 출력될 곳 세 곳을 잡아줬다.

첫번째 버튼은 유저의 로또번호 여섯개가 랜덤생성되고 userNums 자리에 출력 시켜주는 버튼이고,

두번째 버튼은 보너스 번호를 포함한 로또번호 일곱개가 랜덤생성되고 winNums 자리에 출력 시켜주는 버튼이다.

세번째 버튼은 유저의 번호와 당첨번호를 대조하여 당첨여부를 result 자리에 출력해주는 버튼이다.

 

스크립트를 열고 직관적이게 버튼별로 작성해보자.

 	let userNumArr = new Array([]);
        let winNumArr = new Array([]);

먼저 전역변수로 활용할 수 있게 유저번호, 당첨번호 배열을 선언해준다.

	document.getElementById('createUserNums').addEventListener('click', function(){
            const userNums = new Set([]);
            while(userNums.size<6){
                userNums.add(Math.floor(Math.random()*10)+1);
            }
            userNumArr = [...userNums];
            for(let i=0; i<userNumArr.length; i++){
                document.getElementById('userNums').innerHTML += `${userNumArr[i]} `;
            }
        })

첫번째 버튼이다. 먼저 중복 숫자가 생기지 않게 Set에 숫자 여섯개를 넣어주고 이걸 배열로 변환한 후에 userNums 자리로 내보냈다. 1위부터 낙첨까지 모든 결과를 보기 위해서 숫자는 1~45 범위가 아닌 1~10으로만 잡아줬다.

 

	document.getElementById('createWinNums').addEventListener('click', function(){
            const winNums = new Set([]);
            while(winNums.size<7){
                winNums.add(Math.floor(Math.random()*10)+1);
            }
            winNumArr = [...winNums];
            for(let i=0; i<winNumArr.length-1; i++){
                document.getElementById('winNums').innerHTML += `${winNumArr[i]} `;
            }
            document.getElementById('winNums').innerHTML += `[${winNumArr[6]}]`;
        })

두번째 버튼이다. 유저 번호와 동일하게 생성하였으나 7개이고, 마지막 보너스 번호는 대괄호가 품고 출력된다.

 

	function showResult(){
            let result = '';
            let count = 0;
            console.log(userNumArr);
            console.log(winNumArr);
            for(let i=0; i<winNumArr.length-1; i++){
                if(userNumArr.includes(winNumArr[i])){
                    count++;
                }
            }
            switch(count){
                case 6 : result = '1ST Place!'; break;
                case 5 : if(userNumArr.includes(winNumArr[6])){
                            result = '2ND Place!'; break;
                            }else{
                            result = '3RD Place!'; break;
                            }
                case 4 : result = '4TH Place!'; break;
                case 3 : result = '5TH Place!'; break;
                default: result = 'Failed';
            }
            document.getElementById('result').innerText = result;
        }

결과 확인이다. 특별한 이유는 없지만 그냥 펑션으로 해줬다.

먼저.. for문을 돌려서 당첨번호 배열 인덱스 0~5까지의 값들과 유저번호들 중 몇개가 일치하는가 count 변수에 담아올렸다. 

이후 switch를 써서 result 변수에 결과를 담았다. 특이한 점은 5개숫자일치+보너스 숫자일치인 2등도 뽑아내야하기에 case 5에서 if 구문을 사용해서 2등과 3등을 가렸다. 

 

결과를 보자.

숫자 범위를 1~10까지만 잡았지만 1위는 역시 잘 안나온다. 어쨌거나 1위부터 5위, 낙첨까지 모두 결과가 제대로 나오는 것이 확인된다.