생각보다 순탄하게 지렁이 게임을 끝내고 카드 짝 맞추기 게임으로 넘어왔는데
제일 짧게 끝날것같았던 프로젝트가 제일 긴 시간이 걸렸고
나를 제일 힘들게했다🥲..
근데 그만큼 이 프로젝트하면서 얻은게 많다
그래서 제일 고맙고 기억에 찐하게 남을것같은 프로젝트
(프로젝트에 사용된 모든 이미지는 무료 아이콘 사이트인 Flaticon에서 다운받아 사용하였음을 알립니다.)
나의 삽질기 시작🔧
html과 css를 사용하여 간단한 뼈대를 만들어놓고
js로 넘어가서 게임이 시작하면 저 동물 친구들을 차례로 보여준 후
다시 카드를 뒤집어 앞면이 보이게 하는 동작을 구현하려고하였다.
음..아직 좀 미흡하긴하지만 좋아 좋아 출발이 좋아 괜찮아 괜찮아
그 다음은 동물 카드를 랜덤하게 배치하고
여기까진 나름 무난하게 만들었다
그런데..뭔가 좀 이상했다..
동물카드 사이의 틈을 실수로 클릭하게되면 이렇게 요소 전체가 사라져버리거나
개체가 어디론가 이동되고 사라져버리는 현상이 발생했다
<div class="game-board">
</div>나는 위의 html구조 사이에 javascript를 이용하여 반복문을 통해
<div class="animals">
<div class="animal">
<div class="front"></div>
<div class="back"></div>
</div>
</div>위 구조를 반복출력하고 있었다
따라서 카드를 뒤집는 로직은
$board.addEventListener('click', (e) => {
e.target.parentElement.firstElementChild.style.transform = `rotateY(${180}deg)`
e.target.parentElement.lastElementChild.style.transform = `rotateY(${0}deg)`
}이렇게 구현해놓았는데
parentElement를 찍다보니 board의 상위 class인 inner가 호출돼서
사라지는건가? 싶어서
html구조도 다시 정리하기도하고 또 다른 div를 만들어서 넣기도해보고 등등
여러 삽질을 했는데도 변하는건 아무것도 없었다 😶........
그러다가 대략 이런 표정으로
다시 콘솔에 이벤트를 찍어 타겟을 찬찬히 둘러보던 중,,,
난 무언가를 보고 말았고
,...
너니...? 너니?!!?!?!!?? 너야!?
if(e.target.parentElement.className === 'animal'){
e.target.parentElement.firstElementChild.style.transform = `rotateY(${180}deg)`
e.target.parentElement.lastElementChild.style.transform = `rotateY(${0}deg)`
}ㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠ
이 바보 천치 ㅠㅠㅠㅠㅠ
ㅜㅜㅜ저 조건을 안걸어 놓으니까 다 눌리고 다 뒤집히지!!!!!!!
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠ
ㅠㅠㅠㅠㅠ
흑흑..
조건문에 e.target.parentElement.className === 'animal'을 넣어
카드들(class front&back)의 parentElement의 class가 animal일때만 뒤집히게 해주었더니 문제가 해결되었다
gameboard 영역의 온 사방간데를 다 눌러보아도 아까와같은 현상이 없어서
정말 기뻤었다🤸♀️
이렇게 쓰고보니 굉장히 간단한 오류고 100% 나만할것 같은 실수지만..
해결과정에서 많은걸 배웠고 더욱 꼼꼼히 코딩 할 수 있게 되었기때문에 용기내서 포스팅해본다🥲
