기억력 테스트 미니게임을 만들어보았다.

게임의 규칙은 간단하다. 눌러야 할 카드들이 잠깐 표시될 때 위치를 외웠다가 누르면 된다.

Memory test
Github repository

게임 진행

1. 시작 버튼을 눌러서 게임 시작

2. 표시되는 카드 외우기

3. 카운트가 종료되면 외웠던 카드들을 클릭
   3-1. 정답이 아닐 경우 게임 오버 (기회 2번)
   3-2. 정답일 경우 다음 라운드 진행 (총 50라운드)

구현 기능

정답 생성

매 라운드마다 정답은 랜덤으로 생성된다.

// 전체 카드 배열 생성
const newAnswer = [...전체카드id];

// (전체 카드 수 - 정답 카드 수) 만큼 반복해서 정답 카드만 남기고 나머지는 삭제한다.
for (
  let i = (전체카드수 - 정답카드수), j = (전체카드수 - 1);
  i !== 0;
  i--, j--
) {
  
  // index를 랜덤으로 결정 후 삭제.
  const pick = Math.round(Math.random() * j);
  newAnswer.splice(pick, 1);
}

// 정답 카드만 남는다.
setAnswer(newAnswer);

난이도 증가

전체 카드 수 증가

처음엔 3x3 카드로 시작하지만 게임이 진행되며 그 개수가 늘어난다.

• 1 ~4 라운드
  • 3x3 (9장)
• 5 ~ 12 라운드
  • 4x4 (16장)
• 13 ~ 24 라운드
  • 5x5 (25장)
• 25 ~ 50 라운드
  • 6x6 (36장)

25라운드부터는 무려 36장의 카드가 필요하기 때문에 숫자에 맞게 카드를 생성하는 함수를 만들어 사용하였다.

// n개의 카드를 n줄 반환하는 함수
const rows = () => {
	const rowsReturn: Array<any> = [];
  
  	// 카드 생성 함수
	const cards = (i: number) => {
		const cardsReturn: Array<any> = [];
      
		for (let j = 1; j <= √전체카드수; j++) {
			const id = (-√전체카드수 + j) + (√전체카드수 * i);
			cardsReturn.push(
				<div
					id={`${id}`}
					key={`${id}`}
				></div>
			);
		}
		return cardsReturn;
	};

	// 카드 줄 생성 함수
	for (let i = 1; i <= √전체카드수; i++) {
		rowsReturn.push(
			<div key={i} className={styles.row}>
				// 카드 줄에서 카드 생성 함수 호출
				{cards(i)}
			</div>
		);
	}

	return rowsReturn;
}

정답 카드 수 증가

라운드가 증가할 수록 정답 카드의 개수도 함께 증가한다.

전체 카드 수가 증가할 때 마다 정답 카드 수는 1로 초기화 된다.

타이머

타이머 함수에 따라 게임이 진행된다.
여태 진행한 프로젝트 중 가장 많은 타이머가 들어갔다.

1. 라운드 준비 시간 3초

   • 첫 2초 동안 정답 카드 공개

   • 마지막 1초는 정답 카드 숨김

2. 라운드 클리어 시 대기시간 1초

3. 이후 반복

난이도 증가 문구가 출력될 때는 타이머를 1초씩 뒤로 밀었다.

로고

일러스트레이터로 제작했다.

512x512

파비콘

스크린샷