[Javascript] 야구게임 구성하기

자바로도 구성해본 야구게임이다.

이하는 규칙이다;

1) 컴퓨터가 0~9 사이의 중복되지 않는 정수 3개를 랜덤으로 출제하면 플레이어가 맞추는 게임

2) 플레이어가 입력한 숫자와 컴퓨터의 출제 숫자의 수, 자리수가 동일하면 1 Strike

3) 입력한 숫자는 출제 숫자에 포함되어 있으나 자리수가 동일하지 않으면 1 Ball

4) 숫자가 전혀 포함되어 있지 않으면 Out

5) 3 Strike는 성공

 

    <button type="button" id="gameStart">게임 시작</button><br>
    <p>숫자 추측하기: <input type="text" id="inputNum"></p>
    <button type="button" id="showResult">결과 확인</button>
    <h3 id="run"></h3>
    <h3 id="result"></h3>
    <br>
    <h3 id="imgHere"></h3>

html 태그를 먼저 자리잡아준다. 

컴퓨터가 숫자를 생성하게 해줄 게임시작 버튼을 위치시키고

플레이어거 숫자를 입력할 input 박스, 결과를 확인할 버튼, 게임시작에 대한 피드백을 표시할 위치, 결과의 위치, 그리고 재미로 넣을 이미지의 위치 태그까지 작성해줬다.

 

이제 스크립트를 열고,

	let comArr = ([]);
        let userArr = ([]);
        let tryCnt = 0;

전역변수들을 선언해준다.

	document.getElementById("gameStart").addEventListener('click', function(){
            const arr = new Set([]);
            while(arr.size<3){
                arr.add(Math.floor(Math.random()*10));
            }
            comArr = [...arr];
            console.log(comArr);
            document.getElementById('run').innerText = '숫자가 생성되었습니다.' 
            document.getElementById('imgHere').innerHTML = '';
            document.getElementById('result').innerHTML = '';
            tryCnt = 0;
            
        })

중복숫자 생성을 피하기 위해 Set을 사용해서 생성 후 배열을 만들어줬다. 

추가로, 게임시작버튼을 누르면 이전 게임을 초기화 하기 위해 시도횟수를 0으로 맞추고, imgHere와 result 태그 안도 비워주도록 했다. 

결과 함수는 여러 기능들을 따로 분리하지 않아 좀 길다.

라인별로 뜯어서 해석하면,

97 차후에 출력될 결과값인 result 변수를 선언

98 ball의 횟수를 나타낼 변수를 선언

99 strike의 횟수를 나타낼 변수를 선언

100 시도 횟수 증가

101 유저가 입력한 숫자 세개를 가져와서 inputThree라는 변수에 담음

103 유저가 입력한 숫자가 세개가 아니라면,

104 에러 메세지를 출력해준다

105 그렇지 않은 정상적인 경우엔

106 for문을 열고

107 inputThree의 각자리 숫자들을 userArr 배열에 넣어준다

110 유저가 입력한 숫자에 중복되는 값이 있는지 확인하기 위해 userArr에 담긴 값들을 가진 duplic이라는

set을 선언하고

111~112 duplic set에 담긴 값의 개수가 3개 미만이면(userArr에 중복이 있다면) 에러 메세지를 출력해준다.

114~124 이중 for문을 사용하여 userArr, comArr의 값과 인덱스 값이 같은 요소가 있다면 stkCnt의 수를 증가시키고 값은 같고 인덱스값이 다른 요소가 있으면 ballCnt를 증가시켜준다.

125~127 stkCnt, ballCnt가 모두 0이면 result변수에 Out을 담아주고 도발 이미지를 imgHere 태그에 출력해준다.

128~130 stkCnt가 3이면 result변수에 축하를 담아주고 축하 이미지를 imghere 태그에 출력해준다.

131~132 out이나 성공이 아니라면 result변수에 strike와 ball의 개수를 담아준다.

134 결과가 담긴 result 변수를 result 태그에 출력시켜준다.

 

기능구현이 끝났지만 뭔가 아쉽니다. 

그래, 디자인도 살짝만 입혀주자.

	<style>
         .ani{
            width: 150px;
            
            background-color: transparent;
            animation-name: straysquare;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }

        button{
            width: 100px;
            height: 40px;
            background-color: green;
            border: 3px solid burlywood;
            border-radius: 4px;
            color: white;
            font-size: medium;
            font-weight: bold;
        }
        button:hover{
            background-color: rgb(68, 68, 68);
        }
        p{
            font-weight: bold;
            font-size: medium;
        }
        input{
            border: 3px solid rgb(207, 148, 70);
            width: 100px;
            height: 30px;
            border-radius: 4px;
            background-color: transparent;
            font-weight: bolder;
        }
    </style>

 

잘 구현된다.