안녕하세요 느종입니다
오늘은 같은 그림 찾기 페이지를 마무리 지어보도록 하겠습니다. 저번 시간에 이어서 메인 페이지에서 실행될 자바스크립트 함수를 작성하도록 하겠습니다. 카드 아이템 클릭 함수, 다시 시작하는 함수를 다루어 볼 예정입니다. 그럼 바로 시작하도록 하겠습니다. 함께 해요!
1. 자바스크립트 코드
[ scripts.js ]
1. itemClickFunc(itemList) : 카드 아이템을 2개 클릭했을 때 실행 되는 함수입니다. 카드 아이템에 이벤트 리스너를 추가하거나, 삭제를 해야 되기 때문에 카드 아이템 리스트를 인자로 받아옵니다.2. isDisabled = true : 카드 아이템들이 클릭이 되지 않도록 true값을 넣어줍니다.
3. halfItemListLength : 카드 아이템은 2개씩 한 묶음이기 때문에 절반의 수를 변수로 넣어줍니다.
4. itemList[i].removeEventListener('click', itemList[i].clickHandle) : 카드 아이템을 2개 클릭하고 나면 클릭이 되지 않도록 하기 위해서 카드 아이템 리스트를 전체적으로 돌면서 클릭 이벤트 리스너를 삭제해 줍니다. 앞선 포스팅에서 프로퍼티로 만든 clickHandle를 사용할 수 있도록 itemList를 인자로 받아와서 코드를 작성해 줍니다.
5. setTimeout(function() { 내용 }, 1000);: 카드 아이템 2개를 클릭하고 나면 2개가 일치하는지 일치하지 않는지 판별하는 시간을 가지는데 그 때 잠깐의 공백을 주기 위해서 setTimeout을 사용합니다. 1000이 1초입니다.
6. if(clickedItemList[0].querySelector(".back-item").innerHTML === clickedItemList[1].querySelector(".back-item").innerHTML) { : 클릭 한 카드 아이템이 추가되어 있는 배열(clickedItemList)에 첫 번째 뒷면 값과 두 번째 뒷면 값이 같은지 확인합니다.
7. clickedCount++ : 카드 아이템 2개의 값이 일치하면 clickedCount를 하나 더해줍니다. clickedCount는 카드가 전부 뒤집어 졌는지 판단하기 위한 변수입니다.
8. } else { : 카드 아이템 2개의 값이 일치하지 않다면
9. clickedItemList[j].style.transform = "rotateY(0deg)" : clickedItemList를 돌면서 클릭된 카드 아이템을 다시 앞면으로 돌리는 코드를 작성합니다.
10. itemList[i].addEventListener('click', itemList[i].clickHandle) : 2개가 일치하는지 하지 않는지 판단이 모두 끝나면 다시 카드 아이템이 클릭될 수 있도록 반복문을 통해 클릭 이벤트 리스너를 추가해 줍니다.
11. clickedItemList = [] : 클릭 된 2개의 카드 아이템들에 대해 판단이 끝났으므로, clickedItemList는 초기화시켜줍니다.
12. isDisabled = false : 다시 클릭이 될 수 있도록 false를 넣어줍니다.
13. if(clickedCount === halfItemListLength) { : 일치할 때마다 clickedCount를 1씩 더하다 보면 전체 카드 아이템을 다 뒤집었을 때 카드 아이템의 개수의 절반 값과 동일하게 됩니다. 이때 결과 화면 페이지로 갈 수 있도록 코드를 작성합니다. 이 때도 바로 결과 페이지로 가기보다는 1초 정도 공백을 두어 사용자가 맞춘 카드를 확인할 수 있도록 하였습니다.
14. chapter = "result" : 결과 화면 페이지 이므로 result를 넣어줍니다.
15. quizNumber.innerHTML = "결과 확인" : 퀴즈 번호 영역에는 결과 확인 문구를 넣어줍니다.
16. resultTitle.innerHTML = "축하합니다." : 결과 화면에는 축하합니다 문구를 넣어줍니다.
17. mainPage.classList.toggle("hidden") : 메인 페이지는 사라지도록 합니다.
18. resultPage.classList.toggle("hidden") : 결과 페이지는 나타나도록 합니다.
19. retryFunc() : 다시 하기 함수입니다.
20. switch(chapter) { : 스위치문을 사용하여 chapter에 따라서 어떤 페이지가 나타날지를 결정합니다.
21. init() : 초기화 함수입니다.
2. 결론 & 관련 글
이렇게 해서 장장 5개의 포스팅만에 같은 그림 찾기 페이지를 완성하였습니다. 코드 상으로 어렵고 복잡한 내용은 아닌데 자세하게 설명을 쓰다 보니 5개로 나누진 것 같네요. 다음 시간에는 스톱 워치를 만들어 보고, 다시 하기 페이지가 아닌 모달창을 만들어 보도록 하겠습니다.
👉 관련 글: