[3주차 기본과제] 카드게임 만들기

[eastlaw80]

✨ 구현 기능 명세

• 기본 과제

✅ 게임 난이도 선택

1. 난이도의 종류
   1. easy → 10개 :: 5쌍 맞추기
   2. normal → 14개 :: 7쌍 맞추기
   3. hard → 18개 :: 9쌍 맞추기
2. 난이도 중간에 바꿀시, 카드 모두 뒤집어서 처음으로 돌아가기

✅ 정답 수 노출

1. (현재 나의 스코어) / 전체 정답 으로 상단에 노출

✅ 카드 선택

1. 2개의 카드를 선택하면 다른 카드는 선택할 수 없습니다.
2. 해당 카드의 일치 여부를 조사
   1. 정답일 경우
      1. 정답 스코어 증가
      2. 카드 뒤집힌 채로 유지
   2. 오답일 경우
      1. 카드 다시 뒷면으로 돌리기

✅ 카드 배열 순서

1. 카드가 배열되는 순서는 반드시 랜덤으로 지정
2. 난이도에 따라 지정되는 쌍도 랜덤으로 지정

🌼 PR Point

컴포넌트는 크게 헤더, 레벨, 카드게임, 카드 이렇게 4가지가 있고, 이 4가지 컴포넌트를 Mainpage파일에서 적절히 조합하여 컴포넌트로 만든 뒤, MainPage컴포넌트를 app.jsx에서 불러오는 식으로 구현했습니다.

1. index.js에 저장된 데이터를 이용, MakeDataList 파일에서 난이도별 랜덤 카드 리스트를 만들어서 export 해줍니다.
2. Mainpage 컴포넌트 : 레벨과 점수를 초기화, 0점, Easy레벨로 하위 컴포넌트들이 구동을 시작하도록 합니다.
3. Header 컴포넌트 : 현재 점수 state와 현재 레벨 state를 이용하여 총점과 현재 점수를 띄워주게 됩니다.
4. Level 컴포넌트 : 버튼에 따라 현재 레벨 state를 변경하여 줍니다.
5. CardGame 컴포넌트 : 레벨에 따라 랜덤 리스트를 가져와서 map을 이용하여 화면에 카드들을 띄워줍니다. 또한 클릭시에 isFlipped 속성을 변경, 카드를 비교하여 같을경우 corrected 속성도 변경하여 준다. 마지막으로 두개 클릭 후 조금뒤 저장된 클릭 내용을 초기화 한다.
6. Card 컴포넌트 : IsFlipped 속성에 따라 카드 이미지의 vidibility 속성이 hidden 또는 visible로 오감. 이를 통해 카드의 앞뒷면을 구현함.

🥺 소요 시간, 어려웠던 점

• ??h
• 몇시간 했는지 모르겠습니다...대강 코딩 만으로 20시간은 넘게 한거 같기도...? 어려웠던 부분,,,은 일단 시작부터 문제였습니다. 파일구조를 어떻게 짜야할지 고르는 것 부터 쉽지 않았습니다. 파일 구조가 복잡하고 여러 선택지가 있어서 내가 이게임을 어떤 구조로 구현할지 정하는 것부터 꽤 오래걸렸습니다. 결국에 하게된게 지금의 방식인데 이게 괜찮은 형태인지는 사실 아직도 잘 모르겠습니다. 그냥 어떻게든 굴러가게만 한 느낌. 그 다음으로 본격적인 구현에서 만난 첫번째 고비는 Map을 이용해서 데이터에서 내용들을 가져와서 카드들을 만들어서 화면에 띄우는 것이었습니다. 일단 짝맞추기고, 랜덤이고 화면에 띄우는 거 먼저 해보고 생각하자 싶어서 달려들었는데 데이터 구조부터 잘못 만들어놔서 데이터 구조도 사용하기 좋은 방식으로 몇번 수정하고, map을 사용하는데 조건이 여러가지로 까다로워서 계속 이것저것 해보면서 하느라 너무 오래걸렸습니다. 그리고 생각보다 컴포넌트가 많이 복잡한건 아닌거 같아서 그냥 prop drilling으로 했는데 오류가 자주 떠서 계속 오류 잡고 다시하고 오류잡고 다시하고 했습니다,,

🌈 구현 결과물

2023-05-05.8.24.15.mov

[Dangpy]

오홍!! 이거 이렇게도 사용할 수 있구나? 난 냅다 리턴문 안에 넣어놨고돈 좋돠!

[yesongoget]

와 이렇게도 할 수 있나보다 대박,,,,,,

[yesongoget]

굿굿! 깔끔해서 보기 좋다! 고생햇숴~!!

[yesongoget]

와 이렇게도 할 수 있나보다 대박,,,,,,

[yesongoget]

switch문 쓴 거 넘 좋다!!

[yesongoget]

머야 태그 시멘틱하게 잘 썼다! 반성,,,

[yesongoget]

이거 나도 고쳐야되는데,,, title 이름도 숫자맞추기 게임 이렇게 바꿔주면 좋겠당!