티스토리 뷰
// 01. HTML / CSS 디자인 구성
// 02. 클릭한 카드 뒤집기
// 03. 두개의 뒤집은 카드 확인하기
// 04. 클릭한 카드 두개의 이미지 가져오기
// 05. 두개의 카드 이미지 비교
// 06. 틀린 이미지 애니메이션 효과 주기
// 07. 빨리 클릭하면 버그 발생 처리하기
const cards = document.querySelectorAll(".cards li"); // 카드들 선택자
let cardOne, cardTwo;
let disableDeck = false;
function flipCard(e){
let clickedCard = e.target; // 클릭한 카드 선택자
if(clickedCard !== cardOne && !disableDeck){
clickedCard.classList.add("flip");
// 첫번째 카드와 두번째 카드의 데이터 저장
if(!cardOne){ // 첫번째 카드에 데이터가 없으면
return cardOne = clickedCard; // 클릭한 카드의 데이터를 cardOne에 저장
}
cardTwo = clickedCard; // 첫번째 카드에 데이터가 있으면 클릭한 카드의 데이터를 cardTwo에 저장
disableDeck = true; // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음
let cardOneImg = cardOne.querySelector(".back img").src; // 처음 클릭한 카드의 이미지 가져오기 뒤에 .src는 데이터를 문자열로 가져옴
let cardTwoImg = cardTwo.querySelector(".back img").src; // 그다음 클릭한 카드의 이미지 가져오기
// console.log(cardOneImg, cardTwoImg);
matchCards(cardOneImg, cardTwoImg)
}
}
function matchCards(img1, img2){
if(img1 == img2){
cardOne.removeEventListener("click", flipCard);
cardTwo.removeEventListener("click", flipCard);
cardOne = cardTwo = ""; // 카드 초기화
disableDeck = false; // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음
} else {
setTimeout(() => {
cardOne.classList.add("shake");
cardTwo.classList.add("shake");
}, 400)
setTimeout(() => {
cardOne.classList.remove("shake", "flip");
cardTwo.classList.remove("shake", "flip");
cardOne = cardTwo = "";
disableDeck = false; // 빨리눌러서 애니메이션이 진행중일때 클릭이 안되게 막아놓음
}, 1200)
}
}
cards.forEach(card => {
card.addEventListener("click", flipCard);
})
'Javascript' 카테고리의 다른 글
Javascript 타자게임 만들기 (0) | 2022.04.15 |
---|---|
Javascript 뮤직 플레이어 만들기 (0) | 2022.04.15 |
Javascript 이벤트 객체 메서드 (0) | 2022.04.14 |
Javascript 요소 객체 메서드 (0) | 2022.04.14 |
Javascript 브라우저 객체 메서드 (0) | 2022.04.14 |
댓글
© 2018 webstoryboy