[Project] 숫자 야구 게임 만들기

 

Overview

 

해당 포스팅은 학습을 진행하면서 구현한 연습의 결과물들을 정리하고, 발전해 나가는 과정을 정리한 글입니다.

해당 프로젝트를 통해 웹에서 발생한 이벤트를 바탕으로 Javscript 기능을 구현하는 방법에 대해 이해했습니다.

이번 포스팅은 기존 작업한 내용에서 발전시킨 내용을 주로 담고 있습니다.

 

---

 

Introduce

 

소개 : Vanilla JS를 이용한 숫자 야구 게임

기간 : 2023년 7월 (1일)

배포 페이지 : https://sstaar91.github.io/VanillaJS_Practice/pages/baseBall/index.html

구현 화면

 

---

 

주요 기능 및 코드

 

예전에 자바스크립트를 배우면서 간단한 게임을 만들어 봤었는데, 그 중에서 숫자 야구 게임을 만들어봤었다.

그때는 그냥 대충 만들다가 에러 투성이의 코드만 남겨둔채 세션을 따라가기 급급했었는데,

이번에 기회가 되서 새로운 버전으로 한번 만들어보았다.

 

1. 새로운 번호 만들기

const secretNumber = createSecretNumber();

function createSecretNumber() {  
  const answerNumbers = new Array();
   while (answerNumbers.length < 3) {
   const number = Math.floor(Math.random() * 10);
   answerNumbers.push(number);
  }

  return answerNumbers.join(",");
}

 

문제가 될 번호를 생성하기 위해서 새로운 배열을 생성했다.

그 후, 랜덤으로 번호를 생성해서 해당 배열에 담아주는 로직을 구현했다.

그 후, 해당 배열을 join으로 묶어서 문자열이 들어가도록 구현했다.

 

여기서 한 가지 문제점이 드러났다..!

야구 게임에서 숫자의 중복이 발생하면 안된다라는 점이었다.

지금의 코드는 단순히 랜덤으로 숫자를 생성해서 3자리 숫자만 만들면 되는 로직이어서, 모든 값이 중복이 될 수 있다라는 문제가 있었다.

그래서 중복 숫자가 발생하면 중복을 처리하는 로직이 필요했다.

 

const secretNumber = createSecretNumber();

function createSecretNumber() {
  const uniqueDigits = new Set();
  while (uniqueDigits.size < 3) {
    const digit = Math.floor(Math.random() * 10);
    uniqueDigits.add(digit);
  }

  return Array.from(uniqueDigits).join("");
}

 

Set을 이용해서 중복을 처리했더니 깔끔하게 중복되지 않은 숫자 3자리를 얻어낼 수 있었다.

 

 

2. strike와 ball 판독하기

function getResult(secretNumber, guessNumber) {
  let strikes = 0;
  let balls = 0;

  for (let i = 0; i < 3; i++) {
    if (secretNumber[i] === guessNumber[i]) {
      strikes++;
    } else if (secretNumber.includes(guessNumber[i])) {
      balls++;
    }
  }

  return [strikes, balls];
}

 

유저가 입력한 숫자가 자리에 따라서 스트라이크인지 볼인지 판독하는 기능이 이 야구 게임에 핵심 기능이라고 생각된다.

로드 됐을 때 만들어진 정답 숫자와 유저가 입력한 숫자를 비교해서 동일한 자리수에 같은 숫자라면 스트라이크를

다른 자리수이지만 같은 숫자라면 볼을 표시해서 해당 값을 배열로 반환했다.

 

  const [strikes, balls] = getResult(secretNumber, guessNumber);

    answerList.push({
      id: count,
      guess: guessNumber,
      strike: strikes,
      ball: balls,
    });

    if (strikes === 3) {
      alert(`축하합니다! ${count}번만에 숫자를 맞추셨습니다.`);
      makeList(answerList);
    } else {
      alert(`스트라이크: ${strikes}, 볼: ${balls}`);
      makeList(answerList);
    }

 

반환한 스트라이크와 볼의 값을 UI를 그려주는 함수에 전달한다.

이렇게 전달하면 입력된 값이 계속 결과값이 쌓여서 보여주는 UI를 보여줄 수 있게 된다.

 

 

최종적으로 이러한 화면을 확인할 수 있었다.

 

---

 

Next Version Update Preview

 

- 결과 리스트 UI 업그레이드

- React 마이그레이션