JavaScript 입문 : 카드맞추기 게임 - 버그 수정 2 (셔플되는 동안 클릭방지, 완성된 카드 클릭방지, 동일한 카드 연달아 클릭방지)

이 글은 제로초 TV 자바스크립트 강좌를 참고하고 있습니다. 

 

카드맞추기 게임 버그수정 2번째입니다. 가능한 많은 버그를 발견하는 것이 완벽한 프로그램을 위한 첫걸음입니다. 버그수정 1탄에서는 마지막 카드가 넘어가지 않았는데 MIssion Clear로 뜨는 원인을 setTimeout(  ) 메소드로 1초의 여유를 두어 해결했고 셔플이 되는 동안  클릭을 방지하기 위해서 플래그변수를 활용하여 콘트롤 하였습니다. 

 

버그수정 2만으로 다음 그림과 같이 같은 그림을 찾았으나 클릭을 하면 다시 뒤집어 지고 또 한 카드만 계속 클릭을 하여도 계속 이벤트클릭이 이루어지는 것을 방지해 보겠습니다.

 

1. 버그 현상 

 

다음 그림에서 녹색으로 짝을 찾았으나 카드를 클릭하면 다시 뒤집어집니다. 아울러 임의의 주황색카드를 계속 클릭하여도 반응합니다. 

 

 

이를 해결해 보도록 하겠습니다.

 

2. 버그 수정

 

상기 2가지 버그가 일어나는 경우를 생각해보면 conclickCard(  ) 함수에서 발생합니다. 다음과 같이 버그 수정이 필요합니다. 

 

 

상기코드중 동일한 카드 클릭이라는 개념이 조금 어려울 수 있을것입니다. 화면을 클릭하면서 this가 콘솔에 찍히는 것을 보면 이해가 어느정도 됩니다.

 

첫번째카드 clicked[0]에 대한 개념을 보겠습니다. 

 

다음 그림에서 주황색으로 뒤집혀진 카드가 clicked[0]입니다.  

 

의미하는 바를 콘솔에서 찾아보면 다음과 같습니다. 

 

 

이는 곧 this를 이야기하는 것이고 clicked[0] 이 this라고 한다면 더 이상 클릭하지 말라는 뜻으로 2번이상 클릭을 방지할 수 있습니다. 

 

어느정도 버그가 수정이 되었습니다. 물론 아직 완벽히 버그 전체가 잡힌 것은 아닙니다만, 게임을 진행하면서 버그에 대해 더 찾는 노력을 해야합니다. 

 

특히, addEventListener(  )메소드와 setTimeout(  )이 들어가는 메소드가 나오는 경우는 버그가 필연적으로 생긴다고 봐야합니다. 

 

하나 더 발견한 버그중 하나는 어느순간 카드게임이 작동을 하지 않습니다. 이는 3개이상을 동시에 클릭하는 경우 3번째 카드가 남아 있는 경우로 짝이 맞지 않아도 다시 뒤집혀지지 않는 버그입니다. 

 

다음 2종류의 버그를 참조 바랍니다. 

 

보라색이 뒤집혀지지 않는 버그

동시에 3개를 클릭할 경우 앞 2장은 카드앞면으로 가는데 그 이후는 뒤집혀 있는 버그

 

상기와 같은 현상을 이해하고 수정하기 위해서는 자바스크립트의 중요한 이론중 하나인 '이벤트 루프 (Event Loop)'원리를 이해하여야만 합니다. 

 

이벤트루프를 이해하고 어느지점에서 버그가 발생되었는지 확인하고 수정할 수 있는 능력을 키워야 합니다. 

 

다음 시간에는 이벤트루프에 대해 이해하고 상기 발생한 버그를 수정할 수 있도록 공부하겠습니다.