코인 맞추기 게임 만들기 | JavaScript 프로젝트

소개

이 프로젝트에서는 간단한 "동전 맞추기" 게임을 만드는 방법을 배우게 됩니다. 이 게임은 아홉 개의 컵 중에서 무작위로 세 개의 컵을 선택하여 동전을 넣고, 플레이어가 해당 숫자를 입력하여 올바른 컵을 맞춰야 합니다.

👀 미리보기

Guess the Coin game preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

사용자 입력에서 고유한 숫자를 추출하는 findNum 함수를 구현합니다.
1 에서 9 사이의 중복되지 않는 세 개의 난수를 생성하는 randomCoin 함수를 구현합니다.
프로젝트의 디렉토리 구조와 제공된 파일을 이해합니다.

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

JavaScript 함수와 배열을 사용합니다.
정규 표현식 (regular expressions) 을 사용하여 문자열에서 특정 데이터를 추출합니다.
난수를 생성하고 고유성을 보장합니다.
단계별 지침에 따라 프로젝트를 완료합니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
├── images
├── index.html
└── js
    ├── findCoin.js
    └── index.js

여기서:

css는 스타일 파일 폴더입니다.
images는 이미지 파일 폴더입니다.
index.html은 메인 페이지입니다.
js/index.js는 동전을 렌더링하고 애니메이션을 적용하는 JavaScript 파일입니다.
js/findCoin.js는 완성해야 하는 JavaScript 파일입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하면 페이지가 표시됩니다.

findNum 함수 구현

이 단계에서는 js/findCoin.js 파일에서 findNum 함수를 구현합니다.

js/findCoin.js 파일을 엽니다.

findNum 함수를 찾습니다:

// Compose an array of the input values 1-9
function findNum(input_values) {
  // TODO
  const reg = /\d/g;
  const uniqueNumbers = [];
  const nums = input_values.match(reg) || [];
  nums.forEach((num) => {
    const parsedNum = parseInt(num);
    if (!isNaN(parsedNum) && !uniqueNumbers.includes(parsedNum)) {
      uniqueNumbers.push(parsedNum);
    }
  });
  return uniqueNumbers;
}

findNum 함수는 input_values 매개변수를 받아 입력에서 찾은 고유한 숫자 (1-9) 의 배열을 반환합니다.
다음 단계를 따라 findNum 함수를 구현합니다:
- 정규 표현식 /\d/g를 사용하여 input_values 문자열에서 모든 숫자를 찾습니다.
- 고유한 숫자를 저장할 빈 uniqueNumbers 배열을 생성합니다.
- 일치하는 숫자를 반복하고 parseInt를 사용하여 정수로 변환합니다.
- 파싱된 숫자가 유효한 숫자인지 (NaN 이 아닌지) 와 uniqueNumbers 배열에 이미 없는지 확인합니다.
- 숫자가 유효하고 고유한 경우 uniqueNumbers 배열에 추가합니다.
- uniqueNumbers 배열을 반환합니다.

randomCoin 함수 구현

이 단계에서는 js/findCoin.js 파일에서 randomCoin 함수를 구현합니다.

randomCoin 함수를 찾습니다:

let randomCoin = () => {
  let randomNumArr = [];
  // TODO
  while (randomNumArr.length < 3) {
    const randomNumber = Math.floor(Math.random() * 9) + 1;
    if (!randomNumArr.includes(randomNumber)) {
      randomNumArr.push(randomNumber);
    }
  }
  return randomNumArr;
};

randomCoin 함수는 1 에서 9 사이의 중복되지 않는 3 개의 무작위 숫자로 구성된 배열을 생성해야 합니다.
다음 단계를 따라 randomCoin 함수를 구현합니다:
- 무작위 숫자를 저장할 빈 randomNumArr 배열을 생성합니다.
- while 루프를 사용하여 1 에서 9 사이의 고유한 무작위 숫자 3 개를 생성합니다.
- 루프 내부에서 Math.floor(Math.random() * 9) + 1을 사용하여 무작위 숫자를 생성합니다.
- 생성된 숫자가 randomNumArr 배열에 이미 없는지 확인합니다.
- 숫자가 고유한 경우 randomNumArr 배열에 추가합니다.
- randomNumArr 배열에 3 개의 고유한 숫자가 있으면 배열을 반환합니다.

이 단계를 완료하면 "Guess the Coin" 게임이 완전히 작동합니다. 모든 함수가 완료된 GIF 는 다음과 같습니다:

Completed Effect

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.