JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (1)

이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 

 

이제부터는 일정시간을 두고 카드를 뒤집는 자바스크립트를 만들어 볼 예정이고 에러없이 작동한다면 각각 카드를 클릭할 수 있는 클릭이벤트 기능을 넣을 차례입니다. 

 

1. 카드 뒷면 보여주기

 

일정 시간 동안 카드의 뒷면을 보여주는 script를 작성합니다. 한꺼번에 뒤집을 수 있지만 시각적 효과를 위해서 1초후 첫 카드가 뒤집히면서 이후 0.1초 간격으로 전체 12장의 카드를 뒤집도록 하겠습니다. 시간이 들어간다는 이야기는 setTimeout(  ) 함수를 활용합니다. 

 

startGame(  ) 함수내에 작성해야 되겠죠. 

 

4개의 <div>태그 중 전체 프레임을 나타내는 container 클래스명을 기준으로 움직이며 지난시간 공부했던 add(  ) 메소드를 활용합니다. index가 필요한 forEach(  ) 메소드도 같이 사용합니다.

 

 

 

브라우저를 작동시키면 다음과 같이 카드 뒷면으로 전환됩니다. 

 

 

2. 카드 앞면으로 원상복귀

 

이제 게임을 위해서 어느정도 외울시간을 주고 (총 5초간) 카드를 앞면으로 돌려 놓습니다. remove(  ) 메소드를 이용하면 됩니다. add(  )가 들어간 코드와 remove(  )가 들어간 코드가 동시에 진행이 되기때문에 remove가 되기까지 총 5초가 걸립니다. 좀 더 정확히 말하면 나중에 확인할 Event Loop이론을 배우고 나면 왜 총 5초가 걸리는지 이해가 될 겁니다. 

 

 

3. 카드 클릭이벤트 만들기 

 

이제부터는 클릭이벤트를 통하여 각각의 카드를 뒤집고 색을 확인하는 과정입니다. 

그러기 위해서는 addEventListener(  ) 메소드를 이용하는데 보통 게임 흐름상 shuffle하고 createCard한 후 코딩을 하는게 맞겠죠.

 

 

상기 코드에서 playCard는 event와 같은 개념으로 생각됩니다. 

 

4. onclickCard 함수 만들기

 

① toggle(  ) 메소드 

 

onclickCard를 만들때 카드를 클릭하였을 경우 뒷면으로 뒤집혀지지만 색상이 틀렸을 경우 다시 원상복귀하는 메소드를 적용해야 하는데 이미 공부한 toggle(  ) 메소드를 사용하여 양방향 클릭이 가능하도록 적용해 줍니다.  

 

 

이제는 클릭여부에 따라 카드가 자연스럽게 뒤집히는 기능이 적용이 되었습니다. 

 

그런데 여기서 this가 사용되었습니다. this와 event.target에 대한 공부는 이전 시간까지 열심히 했기때문에 이곳에 사용된 this의 개념을 복습하는 의미로 확인해 보고자 합니다.

 

② this와 event.target

 

콘솔을 통해 this를 확인해 보도록 하겠슴니다.

 

 

임의의 카드를 클릭하면 this는 4개의 <div>태그인 부모 태그를 가리킵니다. 

 

 

당연히 카드가 뒤집히는 flipped 클래스가 맨 상위 부모클래스에 적용이 되어야 겠지요. 그렇다면 매개변수를 통하여 이벤트타겟으로 바꾸는 작업도 같이 해 볼 수 있겠습니다. 

 

 

상기와 같이 매개변수를 지정하고 e.target으로 접근했는데 카드가 뒤집히지 않습니다. 콘솔을 확인해 보니 e.target이 직접 일어나는 card-front와 card-back을 가리키고 있습니다. 

 

 

 

 

아직 초보인 관계로 이 부분이 상당히 난감하게 다가 왔습니다. 여러가지 시도도 해보고 했으나 이벤트타겟에 대한 이해가 이리 안 되었나 싶을 정도로 고민이 많은 부분이었네요. 

 

여러가지 자료를 케이스를 찾아가면서 차이점을 발견할 수 있게 되었네요. 즉, event.target은 행위가 일어나는 실제 타겟이고 이렇게 중첩된 경우 작동이 부모태그에서 일어나야 함에도 불구 event.target은 부모태그를 가리키지 않습니다. 맞는 정의인지는 모르겠지만 this가 가리키는 내용을 담는 이벤트의 현재타겟을 지정해줘야 합니다. 그게 event.currentTarget이라는 접근방식으로 풀면 문제가 풀립니다. 

 

즉, 이벤트가 일어나는 지점이 하나의 태그인 경우 event.target과 event.currentTarget은 같지만 현재 만들고 있는 4개의 중첩 태그가 있는 경우 event.target과 event.currentTarget은 다르다는 것을 이해하면 될 듯 합니다. 

 

따라서 다음과 같이 코드를 만들면 this와 같은 개념으로 활용할 수 있습니다. 

 

 

 

③ 빈 배열에 뒤집은 카드 추가 

 

카드를 클릭하여 두장을 확인한 후 색이 맞으면 완성된 배열로 넣고 그렇지 않으면 다시 앞면으로 뒤집는 코드를 만들어 볼 건데요. 처음 두장 확인을 위해서는 어찌되었던 빈 배열에 넣은 후 확인을 해야 하고 두장의 색이 같으면 또 다른 완성 배열에 보관을 해야합니다. 

 

맨 상단에 변수를 만드는 곳에 2장 확인용 변수와 완성된 카드 보관용 변수를 선언하고 코드를 만들도록 하겠습니다. 

 

 

그리고 뒤집은 카드를 clikced까지 넣는 코드는 다음과 같습니다. 

 

 

브러우저에는 잘 반영이 되네요. 

 

 

이벤트타겟에 대한 정의를 추가로 공부하다보니 머리가 아프네요. onclickCard(  ) 함수의 본격적인 카드 짝 맞추기 코드를 연이어서 만들도록 하겠습니다.