[React] 야구게임(BULLS AND COWS)

⚾️ 어렸을 적 정말 많이 했던 야구게임을 만들어보자 🐮
랜덤으로 4자리의 숫자와 위치를 정확하게 맞춰야 하는 게임으로
만약 4자리 중 숫자는 맞지만, 위치가 틀릴 경우 ball 🥹 숫자와 위치 모두 맞을 경우 strike 😆

 

✨ 결과물

⚾️ 콘솔창을 잘 보자!

💚 새로고침 시, 랜덤의 4자리 숫자를 제공
💚 숫자 4개를 입력하면 정답에 맞게 ball & strike를 화면에 반환
💚 입력 값이 정답일 경우 👉🏻 alert창을 띄운 후, 정답 공개 & '다시 하기' 버튼으로 변경

❗️숫자 중복 값을 입력할 경우, alert창으로 경고
❗️ 4자리의 숫자를 입력하지 않은 경우, alert창으로 경고
❗️ 숫자 외에 다른 문자를 입력할 경우, alert창으로 경고

 

 

 

---

⚾️ 숫자 4자리 랜덤으로 받아오기

export const generateRandomNumber = () => {
  // 1~9까지 숫자 이용
  const candidates = [1,2,3,4,5,6,7,8,9];

  // 4자리 숫자 이용
  const pickedNumbers = shuffle(candidates).splice(0, 4); 
  return pickedNumbers;
}

const shuffle = (array) => {
  // 숫자 랜덤하게 뽑음
  return array.sort(() => {
    return Math.random() - 0.5 // 범위 : -0.5 ~ 0.5
  })
}

✅ 1~9까지의 숫자 중 4자리를 랜덤하게 뽑기 위해 sort() 함수 👉🏻 Math.random() 이용
✅ 랜덤하게 정렬한 1~9까지의 숫자 중 splice()를 통해 index가 0부터 3까지인 숫자를 get!

 

 

 

⚾️ 필요한 상태값 작성

const [randomNumber, setRandomNumber] = useState(generateRandomNumber());
const [answer, setAnswer] = useState('');
const [logs, setLogs] = useState([]);
const [isSuccess, setIsSuccess] = useState(false);

✅ 렌더링 여부 확인하여 숫자 랜덤으로 받아오는 상태값
✅ 입력 값 확인하는 상태값
✅ 입력한 값 화면 표시 상태값 
✅ 성공 여부 확인하는 상태값 

 

 

 

⚾️ 야구 게임 원리 작성(strike, ball)

// strike, ball, 정답 유무
const { strike, ball } = randomNumber.reduce((prev, cur, index) => {
// 같은 자리 같은 수가 존재 --> strike
 if(answers[index] === cur) {
   return {
     ...prev, // 처음 초기값은 strike: 0, ball: 0
     strike: prev.strike + 1
   }
 }
 // 다른 자리에 수가 존재 --> ball
 if(answers.includes(cur)) {
   return {
     ...prev,
     ball: prev.ball + 1
   }
 }
 return prev;
 }, {
  strike: 0,
  ball: 0
 });

✅ 처음 초기값은 strike:0, ball:0으로 설정
✅ randomNumber의 reduce()를 사용하여 if문 조건에 맞을 때, 이전 데이터를 나타내는 prev.strike or prev.ball에 +1

 

 

 

⚾️ 유효성 검사

// 숫자 외 문자 입력한 경우
if(answers.some((item) => isNaN(item))) {
  alert('숫자만 입력해주세요.');
  return;
}

// 입력 값 4자리 아닌 경우
if(answers.length !== 4) {
  alert('4자리로 입력해주세요.');
  return;
}

// 입력 값에 중복 값 있는 경우
const isDuplicate = answers.some((number) => {
  return answers.indexOf(number) !== answers.lastIndexOf(number)
})

if(isDuplicate) {
  alert('중복 없이 입력해주세요.');
  return;
}

✅ 숫자 외에 문자를 입력하는 경우, 입력 값이 4자리가 아닌 경우, 입력 값에 중복 값이 있는 경우 👉🏻 alert창으로 경고

 

 

 

 

---

🫠 정답 맞힌 후, 초기화하는 함수 등은 아래 전체 코드에 있으니 확인해 보자!
useState로 상태값을 관리하고, 조건문도 크게 많지 않아 비교적 간단한 토이프로젝트였던 것 같다 😆
근데 이 부분은 다시 고치고 싶다.
입력을 하면 입력창을 초기화하는 부분!! 이 부분을 놓쳤다.. 동영상으로 기록을 남기면서.. 다시 캐치했다.. ㅎ😭

 

 

 

 

⚾️ 전체 코드 깃허브 ⬇️⬇️⬇️

https://github.com/YouJin-Cho/BULLS-AND-COWS

GitHub - YouJin-Cho/BULLS-AND-COWS