안녕하세요 느종입니다.
오늘은 같은 그림 찾기 페이지의 메인 화면을 만들어 보겠습니다.
제가 작성한 코드가 꼭 정답은 아닙니다. 더 간결하게 효율적으로 코드를 작성할 수도 있고, 제가 쓰지 않은 더 다양한 메소드들을 활용할 수도 있습니다. 챗gpt의 도움 없이 최대한 자기 스스로 코드를 하나씩 작성해 나가는 것이 공부도 되고 의미도 있다고 생각합니다. 그럼 시작하도록 하겠습니다. 함께 공부해요!
메인 화면 페이지
메인 화면입니다.
기존에 있었던 퀴즈 번호 부분과 기회(목숨)은 이번에 필요가 없어서 삭제를 하였습니다.
저는 4 x 3 총 12개의 카드 모양으로 구성을 하였는데요. 각자 자기가 원하는 카드 개수 만큼 늘리거나 줄일 수 있도록 코드를 작성할 예정입니다.
카드 디자인 같은 경우 자기가 원하는 디자인으로 추가하시면 될 듯 싶습니다.
카드 모양을 클릭하면 앞면(Q)가 뒤로 가고 뒷면(숫자)가 앞으로 회전하도록 하였고, 2개의 카드가 뒤집어지면 서로 숫자가 맞는지 판별하는 과정을 거치도록 하였습니다. 그 후에 2개의 카드 숫자가 일치하면 그대로 유지하고, 틀렸을 경우에는 다시 돌아가도록 하였습니다. 바로 돌아가면 사용자 입장에서 뭐지? 하는 생각이 들 수도 있으니 1초 정도 유지한 후에 돌아가도록 구성하였습니다.
그리고 12개의 모든 카드를 다 맞추면 결과 화면으로 넘어가도록 하였습니다. 이 때도 바로 넘어가버리면 조금 그러니깐 1초 정도 유지한 후에 넘어가도록 구성하였습니다.
시작 화면과 결과 화면은 텍스트와 버튼으로만 구성되어 있어서 비슷합니다.
메인 화면에서 보여질 카드 같은 경우에는 자바스크립트를 활용하여 동적으로 만드려고 합니다. 그 이유는 앞서도 말씀 드렸듯이 각자 자신이 원하는 카드 개수를 조절 할 수 있도록 하기 위함입니다. html코드에 넣어서 만들어도 상관은 없지만, 카드 개수를 바꾸고 싶을 때마다 번거로움이 발생할 수 있습니다.
자바스크립트 코드
[ scripts.js ]
quizNumber : 퀴즈 번호에 대한 태그가 들어가는 변수인데 이번에는 "같은 그림 찾기" 문구가 고정으로 들어갈 것입니다.startPage : 시작 화면 페이지에 대한 태그가 들어가는 변수
mainPage : 메인 화면 페이지에 대한 태그가 들어가는 변수
resultPage : 결과 화면 페이지에 대한 태그가 들어가는 변수
startTitle : 시작 화면에 나타날 타이틀 문구가 들어갈 변수
resultTitle : 결과 화면에 나타날 타이틀 문구가 들어갈 변수
startBtn : 시작 하기 버튼 태그가 들어갈 변수
retryBtn : 다시 하기 버튼 태그가 들어갈 변수
page : 현재 어떤 화면 페이지인지 넣어주는 변수
ROW_NUM : 행 숫자(가로 숫자)
COL_NUM : 열 숫자(세로 숫자)
※ 카드 배열을 더 늘리거나 더 줄이고 싶으시다면 ROW_NUM과 COL_NUM의 수를 변경하시면 됩니다.
numberList : 12개의 카드에 들어가는 숫자 배열입니다. 지금은 제가 배열을 고정으로 넣어 놓았지만 이 부분이 매번 게임을 진행할 때마다 다르게 할 수도 있고, ROW_NUM, COL_NUM 값에 따라서 유동적으로 크기가 변경이 되도록 할 수도 있습니다. 이 부분은 혹시라도 요청이 있으실 경우 코드를 작성해서 올리도록 하겠습니다.
clickedCount : 사용자가 카드에 클릭을 몇 번 했는지 숫자를 세는 변수
clickedItemList : 사용자가 클릭한 카드 아이템을 넣는 배열
isDisabled : 카드가 뒤집어 지는 동안에 다른 카드가 클릭되는 것을 방지하기 위해서 만든 변수
init() : 초기화 함수
page = "start" : 초기화 시 시작 화면으로 돌아가야 되므로 page에 start 변수를 넣어줍니다.
mainPage.replaceChildren() : 게임을 다시 시작했을 경우에 메인 화면에서 만들고 붙였던 카드 아이템들을 모두 삭제하는 메소드입니다. 이 것을 해주지 않으면 처음 시작은 상관없지만 사용자가 다시 하기 버튼으로 게임을 재시작한 경우에 카드가 중복으로 나오게 됩니다.
clickedCount = 0 : 클릭한 횟 수는 0으로 초기화합니다.
clickedItemList = [] : 클릭한 카드 아이템이 들어가는 배열도 초기화 해줍니다.
isDisabled = false : 카드 아이템이 클릭이 가능하도록 초기화 해줍니다.
setMainPageFunc() : 메인 화면 페이지에 원하는 개수 만큼의 카드를 배열하는 함수입니다. 나열한 카드에 numberList에서 설정한 숫자들도 추가합니다.
setItemFunc() : 위에서 설정한 카드 아이템에 클릭 이벤트를 추가하고, 클릭한 카드 아이템을 회전 시키고, 배열에 추가합니다.
오늘은 같은 그림 찾기 메인 화면 페이지에 대한 첫 번째 코드를 작성해보았습니다. 이번에도 메인 화면은 나누어서 포스팅을 해야 될 듯 싶습니다. 다음 시간에는 각각의 함수 내용과 기능들에 대한 코드를 작성하도록 하겠습니다.