[React] 기억력 테스트 미니게임

소고기는레어·2022년 6월 7일

React game

Project 🗂

목록 보기

8/15

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

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

Memory test
Github repository

게임 진행

시작 버튼을 눌러서 게임 시작
표시되는 카드 외우기
카운트가 종료되면 외웠던 카드들을 클릭
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;
}