JavaScript 입문 : 카드맞추기 게임 - 카드 기본데이터, 카드 생성, 카드 섞기, 카드맞추기 게임 시작 함수

이 글은 제로초TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 

 

지난시간까지 카드맞추기 게임 순서도와 카드가 뒤집히는 애니메이션인 CSS를 다뤄 봤습니다. 지금부터는 순수하게 자바스크립트만을 이용하여 카드맞추기 게임을 만들어 가도록 하겠습니다. 

 

1. 카드 구성요소 만들기 

 

카드 구성요소로는 전체 카드갯수와 색상이 들어간 배열이 필요합니다. 아울러 짝을 맞추는 게임이니 같은 색을 두번 사용해야 합니다.  여기서는 concat(  ) 함수를 이용해 봅니다. 

 

이제는 내가 쓰는 코드가 에러가 있는지 미리 확인하는 습관도 중요합니다. 강좌등을 보면 코드에 console.log(  ) 메소드를 이용하라는 지침이 많은데 직접 코드에 쓰는 것 보다 콘솔에 타이핑해보면 쉽니다. 

 

위 구성요소가 잘 되었는지는 다음과 같이 콘솔에서 확인 가능합니다. 

 

 

습관적으로 이용해 보기 바랍니다. 

 

concat(  ) 메소드를 모르는 경우는 12개의 색을 다 써줘도 됩니다. 

 

2. 카드 섞기 선언

 

카드를 섞는 함수를 선언합니다. 여기서 용어에서 주의할 점은 호출과 선언이라는 단어의 차이점인데요. 

예를 들어

start(   );  형태는 호출입니다. 선언은 호출을 위한 함수식이라고 보면 됩니다. function start(  )  {     } 정도로 사용되겠죠.

 

카드를 랜덤하게 섞는 방식은 기존에 배웠던 피셔-예이츠 셔플 (Fisher-Yates Shuffle) 방식을 사용합니다.

 

 

3. CSS 연계 카드 태그데이터 만들기

 

함수식을 이용하여 HTML에 들어갈 카드데이터를 CSS 클래스명과 일치시켜 주고 4개의 <div>태그를 연결해 줍니다. 연결은 append(  )나 appendChild(  )메소드를 사용합니다. 

 

 

함수식을 종료하거나 대기상태로 바꾸는 경우 가능한 return으로 마감합니다. 현재까지는 브라우저상 변화가 없습니다만, 필요시 브라우저 콘솔에 변수명 등 잘 실행이 되는지는 확인할 필요는 있습니다. 

 

상기 createCart(i)에서 i는 향후 반복문에 사용될 매개변수입니다. 지금은 당장 안써도 됩니다만 우선 반영해 놓겠습니다. 

 

4. 게임시작 함수 만들기 

 

전체적인 프레임이 완성되면 기본적인 게임시작 함수를 만듭니다. 순서도상 게임은 무작위 섞은 후 createCard(  )가 필요합니다. 

 

 

상기 코드에서 i가 사용되고 있는 것을 확인할 수 있습니다. 반복문이기 때문이고요. 생성된 카드 12개가 다음과 같이 브라우저에 보이면 기본적인 구조는 완성된 겁니다. 

 

 

상기와 같이 작성된 기본형에 CSS 특성을 이용하여 카드 뒷면을 일정시간 보여주고 다시 일정 시간이 지난 후 카드앞면으로 돌아오는 과정을 다음시간에 알아보고자 합니다.