JavaScript 입문 : 카드맞추기 게임 - 순서도

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

 

자바스크립트를 이용하여 뒤집혀진 카드의 짝을 찾는 '카드맞추기' 게임을 만들어 보고자 합니다. 다음과 같은 결과물을 예상 할 수 있는데요. 첫 화면에 12개의 카드가 엎어져 있고 전체 색을 보여준 후 다시 뒤집어 진 상태에서 같은 색을 맞추는 게임입니다. 

 

강좌에 따르면 자바스크립트의 가장 중요한 요소 중 하나인 '이벤투 루프, Event Loop'에 대해 이해를 해야 완벽한 게임을 만들 수 있다고 합니다. 이론과 원리를 안다면 에러가 나는 상황에서 답답한 마음도 아느정도 해소될 것으로 기대해 봅니다. 

 

▒ 카드맞추기 게임 완성 결과물

 

첫 화면에는 다음과 같이 12개의 카드가 엎어진 상태로 보입니다. (편의상 카드앞면이라고 하겠습니다. )

 

 

다음은 순서대로 카드 뒤집는 장면입니다. (이를 카드 뒷면이라고 하겠습니다 .)

 

 

상기 그림이 다시 카드 앞면으로 돌아간 후 클릭을 통해 카드짝을 맞추는 게임으로 이해 하면 됩니다. 상기 구조를 이헤하기 위해 우선적으로 떠오르는 메소드는 타이머를 사용하는게 떠 오르는 군요. 물론 클릭함수 등 addEventListener는 기본이고요. 

 

관련하여 순서도를 만들어 보도록 하겠습니다. 

 

▒ 카드맞추기 게임 순서도 

 

순서도를 그릴때 처음에는 손으로 그려보았다가 엑셀로 만들어 보았다가 지금은 Draw.io라는 프로그램을 이용하는데 블로그에 기록할려다 보니 프로그램의 도움을 받지 사실 머리속에 남는 방식은 손으로 그리는게 최고인 것 같습니다. 시간도 빠르구요. 

 

프로그램을 이용하면서 일반적인 순서도를 떠나서 좀 더 편한 방식이 없을까 고민은 항상 듭니다. 

 

 

프로그램도 익숙해지면 빠르긴 하네요. 

빠르게 하는 방법은 될 수 있는대로 그림의 모양을 줄이는 방법을 생각해 볼 수 있습니다. 

 

본격적인 코딩에 앞서 생각할 수 있는 자바스크립트는 랜덤하게 섞는것은 피셔-예이츠 셔플(Fisher-Yates Shuffle)이고 몇초 뒤라는 용어들은 setTimeout(  ) 메소드를 이용하면 됩니다. 

 

카드가 뒤집혀지는 원리는 CSS를 통하여 만들면 되는데 다음 시간부터 정식적으로 알아보도록 하겠습니다.