Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags
more
Archives
Today
Total
관리 메뉴

항해일지

야구게임 만들기 JS 본문

항해99/WIL

야구게임 만들기 JS

효환 2023. 4. 6. 11:49

 

 

랜덤한 값을 만드는 함수

// 랜덤한 0 - 9까지의 값을 만드는 함수
function ranNum() {
    let r = []
    while (r.length < 3) {
        const randomNum = Math.floor(Math.random() * 10)
        if (!r.includes(randomNum)) {
            r.push(randomNum)
        }
    }

    return r
}

 

1. 랜덤하게 만든 변수를 담을 빈배열을 변수로 선언해준다.

 

2. 반복문을 통하여 3개의 상수를 받는 조건을 만든다.

 

3 . Math.floor() : 버림 메소드 / Math.random() : 0 부터 1까지의 랜덤한 난수를 만드는 메소드

     이 두개를 합하여 0 - 9 까지 랜덤한 숫자를 만들어 주었다. 

 

4.  includes() : 배열에 특정한 값의 포함 여부를 확인하는 메소드

     만들어둔 랜덤한 값을 넣읗 빈배열 r에 랜덤한 값을 3개 넣는데 포함되어 있지 않은것만 푸쉬할수 있게

     하여 중복된 숫자가 없게 하였다.

 

 

 

야구 게임 메인 함수

baseballGame()

function baseballGame() {
    let answer = ranNum()
    let count = 0
    
    while (true) {
        let inputNum = prompt("컴퓨터가 숫자를 생성하였습니다. 답을 맞춰보세요!")
        let inputArray = inputNum.split('').map(Number)
        if (inputArray.length !== 3) {
            alert("세 자리 숫자를 입력해주세요.")
            continue
        }
        count++;
        
        let strike = 0
        let ball = 0

        for (let i = 0; i < 3; i++) {
            if (inputArray[i] === answer[i]) {
                strike++
            } else if (answer.includes(inputArray[i])) {
                ball++
            }
        }

        if (strike === 3) {
            alert(`${count}번 만에 맞추셨습니다. 게임을 종료합니다`)
            break;
        } else {
            alert(`${count}번째 시도 : ${inputArray} --> ${strike}S ${ball}B`)
        }

    }
}

 

1. 위에 만들어둔 랜덤한 값을 만드는함수를 메인 함수에서 사용하기 위해 answer라는 변수에 담아주었다.

 

2. 몇번 시도했는지 카운팅을 하기위해 count 변수를 만들고 초기화 시켜두었다.

 

3. while 루프를 실행하여 사용자에게 prompt로 숫자를 입력 받았다. 이때 입력 받은 숫자는 문자열 형태로 받아졌기 때문

   에 spilt() 메소드를 통하여 문자열을 하나씩 분리하여 배열로 받았다. map() 메소드를 사용하여 배열의 각 요소에 접근하 

  여 Number로 변환 시켰다.

 

4. 입력받은 배열이 3자리 수가 아닐경우 경고 메세지를 띄우고 continue 를통하여 다시 처음으로 돌아가게 만들었다. 위에

     입력받은 조건들이 제대로 다 수행될 경우 카운트를 하나씩 증가시켰다.

 

5. 이후 for 루프가 실행되며, 사용자가 입력한 숫자와 난수를 비교하여 만들어둔 strike, ball 변수를 계산한다.

 

6. strike는 배열의 위치와 값이 같아야 증가하고 ball 은 값만 포함되어있어도 증가하게 만들었다.

 

7. strike의 값이 3이라면 조건문을 끝내여 끝나는 alert() 메세지와 함께 break를 통하여 루프를 종료한다.

 

8. 그렇지 않다면 else 조건문에서 alert() 메소드를 사용하여 "${count}번째 시도 : ${inputArray} --> ${strike}S ${ball}B" 라 

    는 메시지를 출력하여 사용자가 3 strike를 할수있게 힌트를 준다

 

 

 

 

 

 

baseball.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>야구게임</h1>

    <script src="baseball.js"></script>
    
</body>
</html>

 

 

 

 

 

 

 

'항해99 > WIL' 카테고리의 다른 글

SEO 란  (0) 2023.04.28
React Hook  (0) 2023.04.21
화살표 함수 (Arrow function)와 this  (0) 2023.04.14
JavaScript의 ES란? ES5/ES6 문법 차이  (0) 2023.04.10
'항해99/WIL' Related Articles more
Comments