TIL-4 JavaScript로 숫자야구게임 구현하기

TIL-4 JavaScript로 숫자야구게임 구현하기

 

 

prologue. 재미있는 야구 게임을 만드는 사람은

재미가 없을 수 있다..😀..

 

오늘은 팀과제를 제출하기 하루전 과제는 숫자로 하는 야구 게임 만들기!!

게임을 만들 생각에 아주 신이난다.

 

분명 .. 신이 났었는데.. 만들기 시작한 이후..

어라 눈에서 왜 눈물이.. 😭

 

 

1. 주차별 팀과제

스파르타 코딩클럽 1주차 팀과제

주차별 팀과제는 위 사진과 같다.

 

 

컴퓨터는 0과 9 사이의 서로 다른 숫자 3개를 무작위로 뽑습니다. (ex) 123, 759 사용자는 컴퓨터가 뽑은 숫자를 맞추기 위해 시도합니다. 컴퓨터는 사용자가 입력한 세자리 숫자에 대해서, 아래의 규칙대로 스트라이크(S)와 볼(B)를 알려줍니다. 숫자의 값과 위치가 모두 일치하면 S 숫자의 값은 일치하지만 위치가 틀렸으면 B 기회는 무제한이며, 몇번의 시도 후에 맞췄는지 기록됩니다. 숫자 3개를 모두 맞춘 경우, 게임을 종료합니다.

 

중점은 위 To do 과제조건에 부합하는 프로그램을 구현하는 것이다.

 

 

 

 

2. 설계 및 구현

 

이를 반복문과 조건문을 통합하여 구현할 수 있었는데..

세가지 정도의 반복문과 조건문을 포함한 함수를 사용하여 만들어 보았다.

 

첫번째 무작위 0~9 까지의 랜덤숫자를 생성하는 함수

두번째 무작위 랜덤 숫자 함수에서 나온 값을 활용하여 심판을 보는 함수(스트라이크, 볼 판단)

세번째 위 두가지 함수를 합쳐서 게임을 진행할 수 있게 하는 함수다.

 

// 랜덤 숫자 생성함수
function genRandomNumbers() {
    var gameNum = [];
    for (var i = 0; gameNum.length < 3; i++) {
        var num = Math.floor(Math.random() * 10);
        if (!gameNum.includes(num)) {
            gameNum.push(num);
        }
    }
    return gameNum;
}

var cpuNumbers = genRandomNumbers();
// 랜덤 숫자 생성 이후 심판역할 함수
function refereeGame(cpuNumbers, userNumbers) {
    var strikes = 0;
    var balls = 0;

    for (var i = 0; i < 3; i++) {
        if (userNumbers[i] == cpuNumbers[i]) {
            strikes++;
        } else if (cpuNumbers.includes(parseInt(userNumbers[i]))) {
            balls++;
        }
    }
    return { strikes, balls };
}

// 위 두가지 함수를 활용하여 게임을 진행하는 함수
function playGame() {
    var cpuNumbers = genRandomNumbers();
    var attempts = 0;
    var gameOver = false;

    while (!gameOver) {
        var userGuess = prompt('세 자리 숫자를 입력하세요 :');
        if (userGuess.length !== 3 || isNaN(userGuess)) {
            console.log('유효한 세 자리 숫자를 입력하세요.');
            continue;
        }
        attempts++;
        var result = refereeGame(cpuNumbers, userGuess);
        console.log(`${attempts}번째 시도 : ${userGuess}`);
        console.log(`${result.balls}B${result.strikes}S`);

        if (result.strikes === 3) {
            console.log(`${attempts}번 만에 맞히셨습니다. 게임을 종료합니다.`);
            gameOver = true;
        }
    }
}

playGame();

맨 처음에는 최대한 for문을 활용하여 설계 하여 진행하려고 했고

JavsScript 문법 상 이상없도록 하려고 노력했으며

부족한 부분은 GPT와 브레인 스토밍 하며 약 3시간 정도 걸쳐 작성하였다.

챗GPT는 한번에 답을 찾기 보다는 본인의 로직 가설이 실제 적용 가능한지 원리를 브레인 스토밍 하며 진행하길 바란다..

안그러면.. 그냥 복사 붙여넣기.. 수준에 불과하다.. (특정원리에 대한 최소한의 이해라도 하려는 노력이 정말 필요하다..)

 

 

그러나 해당 과제는 실제 구현할 수 있도록 구현한 모습을 캡쳐하여 보내는 것도

과제에 포함되어 있었기 때문에 HTML로 구현해야 했고

 

막상 HTML로 구현을 해야하니 적용법에 익숙치 않아서

해당 부분은 챗GPT에게 도움을 받아서 작성을 완료 했다.

 

그랬더니 JS 파일과 HTML 파일의 연동이 안되는지 오류가 발생했고

해당 오류를 최종적으로 해결하기 위한 코드 수정을 진행한 이후에는

 

아래와 같이 재밌는 게임을 완성단계 까지 구현 할 수 있었다.

 

html 환경에서 구현한 게임 화면

 

 

궁금한 사람들은 아래 깃 주소를 남겨 놓으니 확인 해 보기 바란다.

 

https://github.com/genaileepro/team-test

GitHub - genaileepro/team-test: team-test