안녕하세요. 느종입니다.
저번 포스팅에 이어서 같은 그림 찾기 페이지를 만들어 보도록 하겠습니다. 간단할 줄 알았는데 설명이 길어지다 보니 여러 개로 나누어서 올린 점 양해 부탁 드리겠습니다. 그럼 바로 시작하도록 하겠습니다. 함께 공부해요!
결과 화면 페이지
결과 화면 페이지입니다. 정말 심플하게 만들었습니다.
다양한 이미지나 문구들을 활용하면 더 멋진 결과 화면 페이지가 될 것 같습니다.
자바스크립트 코드
[ scripts.js ]
setItemFunc() : 생성 된 카드 item들에게 클릭 이벤트를 추가하고, 회전 효과를 부여합니다.let itemList = document.querySelectorAll(".item") : 클래스명이 item인 태그들 모두를 가져와서 itemList 배열에 추가합니다.
for(let i=0; i<itemList.length; i++) { : itemList 배열에 대해 반복문을 실행합니다.
const clickHandler = function() { : 이 부분이 중요한데, 이전 포스팅에서 말했듯이 카드를 2번 클릭하고 나면 두 개의 카드 값이 일치하는지, 일치하지 않는 지에 대해 검사를 하게 되는데 이 때 약 1초 정도의 시간 차를 가집니다. 그 1초 동안 다른 카드들이 클릭이 되지 않게 하기 위해서 카드 item들에 대해 클릭 이벤트를 삭제하고, 1초 후에 다시 클릭 이벤트가 추가 될 수 있도록 해야 됩니다. 그래서 핸들러 변수를 만들어서 위와 같은 기능을 구현하였습니다.
if(isDisabled) return : 카드들이 클릭이 불가능하면(isDisabled = true)이면 return해주기 위한 함수입니다.
itemList[i].style.transform = "rotateY(180deg)" : 클릭 한 카드 item을 180 회전합니다.
clickedItemList.push(itemList[i]) : 클릭 한 카드 item을 배열에 추가합니다.
if(clickedItemList.length === 2) { : 클릭 한 카드 item이 2개일 경우(배열의 길이가 2인 경우)
itemClickFunc(itemList) : 클릭 한 카드 item들에 대한 검사 함수이다. 클릭 이벤트를 삭제하고, 추가 해야 되므로 전체 카드 item 배열을 인자로 가져갑니다.
itemList[i].clickHandle = clickHandler : 각 카드 item에 clickHandle이라는 프로퍼티를 추가합니다. 쉽게 설명하자면 F12를 눌러서 div class="item"이 부분으로 간 다음에 properties 탭으로 가보면 아래와 같이 clickHandle이 있는 것을 확인 할 수 있습니다.
다음 시간에 작성할 itemClickFunc(itemList) 함수에서 각 카드 item에 클릭 이벤트 리스너를 추가하거나, 삭제 할 때 사용합니다.
itemList[i].addEventListener('click', clickHandler) : 각 카드 item들에게 클릭 이벤트를 추가해줍니다.
오늘은 저번 포스팅 때 만들었던 카드 item들에게 클릭 이벤트를 추가해 주는 함수를 작성하였습니다. addEventListener와 removeEventListener를 사용하여 이벤트 리스너를 등록하거나, 삭제 하기 위해서는 함수 형태로 인자가 들어가야 됩니다. 그래서 클릭 핸들러를 만들었고, 프로퍼티에 추가하고 등록하는 방식으로 코드를 작성하였습니다.
다음 시간에는 2개의 카드 item을 클릭 하고 나면 1초 동안 모든 카드 item에 대해 클릭이 되지 않도록 클릭 이벤트 리스너를 삭제하는 것과 1초 후에 다시 모든 카드 item에 대해 클릭이 되도록 클릭 이벤트 리스너를 등록하는 함수를 작성하도록 하겠습니다. 또 2개의 카드 item 뒷면의 숫자가 일치하면 그 대로 유지하고, 뒷면의 숫자가 일치하지 않으면 다시 앞면으로 돌아가도록 하는 코드도 추가로 작성할 예정입니다. 그리고 결과 화면 페이지까지 작성하여 같은 그림 찾기 콘텐츠를 마무리 지으려고 합니다. 그럼 다음 시간에 오도록 하겠습니다.