카드맞추기게임
-
JavaScript 입문 : 카드맞추기 게임 - 카드게임 수량 유저 선택하기, 총 걸린시간 계산하기컴퓨터 알아가기/JavaScript 2022. 10. 13. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 기본으로 공부하고 있습니다. 현재까지 카드맞추기 게임을 만들면서 어느정도 버그가 수정이 되었다고 판단되어 조금 더 업그레이드를 해보고자 합니다. 첫번째는 카드의 수량을 최대치로 정해놓고 시작시 유저가 원하는 카드갯수를 입력하여 게임을 시작하고 최종적으로는 게임완료 시간을 계산하도록 하겠습니다. 1. 카드수량 정하기 게임 시작시 카드 수량을 입력하도록 만들겠습니다. 최대 20개까지 카드의 숫자를 만들도록 하고 이는 alert 메시지를 통하거나 버튼클릭으로 만들 수 있습니다. 주의할 점은 카드 2개가 같은 색이어야 하고 유저가 몇장을 선택할지 모르기 때문에 최대 20장의 반인 10장의 색상을 slice( ) 메소드로 나누어준 값을 concat( ) 메소드로 복사합니다..
-
JavaScript 입문 : 카드맞추기 게임 - 버그 수정 2 (셔플되는 동안 클릭방지, 완성된 카드 클릭방지, 동일한 카드 연달아 클릭방지)컴퓨터 알아가기/JavaScript 2022. 10. 9. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 참고하고 있습니다. 카드맞추기 게임 버그수정 2번째입니다. 가능한 많은 버그를 발견하는 것이 완벽한 프로그램을 위한 첫걸음입니다. 버그수정 1탄에서는 마지막 카드가 넘어가지 않았는데 MIssion Clear로 뜨는 원인을 setTimeout( ) 메소드로 1초의 여유를 두어 해결했고 셔플이 되는 동안 클릭을 방지하기 위해서 플래그변수를 활용하여 콘트롤 하였습니다. 버그수정 2만으로 다음 그림과 같이 같은 그림을 찾았으나 클릭을 하면 다시 뒤집어 지고 또 한 카드만 계속 클릭을 하여도 계속 이벤트클릭이 이루어지는 것을 방지해 보겠습니다. 1. 버그 현상 다음 그림에서 녹색으로 짝을 찾았으나 카드를 클릭하면 다시 뒤집어집니다. 아울러 임의의 주황색카드를 계속 클릭하여..
-
JavaScript 입문 : 카드맞추기 게임 - 버그 수정 1 (마지막카드 뒤집히기 전 완료메시지, 셔플되는 동안 클릭금지)컴퓨터 알아가기/JavaScript 2022. 10. 8. 19:30
이 글은 제로초 TV 자바스크립트 강좌를 참고로 공부하고 있습니다. 지난시간까지 카드맞츠기 게임에 대한 기본적인 코딩을 완료 하였습니다. 순서도상에 나와 있는 기본 프로그래밍을 다루어 보면서 흐름에 대한 느낌을 이해할 수 있는 시간이었습니다. 이제부터는 만들어진 게임에 대한 버그가 있는지를 최대한 확인하면서 각걱의 에러를 수정하도록 하겠습니다. 이 과정이야말로 좀 더 코딩에 대한 이해도가 높아질 수 있다고 보여지네요. 1. 마지막 카드가 뒤집히 전 게임 완료 우선 눈에 가장 먼저 띄는 버그는 마지막 카드가 넘겨지기 전에 게임이 미리 끝났다고 alert창이 뜨는 현상입니다. (원인 추축) 이는 마지막 카드가 뒤집히는 시간과 Mission Clear가 나오는 시간이 거의 동시에 이루어지기 때문으로 추측이 됩..
-
JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (2)컴퓨터 알아가기/JavaScript 2022. 10. 6. 19:30
지난시간 이어서 카드 짝 맞추기에 대한 본격적인 코드를 공부해 보도록 하겠습니다. 참고로 본 글은 제로초 TV 자바스크립트 강좌를 참고로 하고 있습니다. 다시 순서도를 보겠습니다. 순서도 상 다음 주황색 영역을 만들어 보고자 합니다. 1. 카드 짝 맞추기 이제부터는 본격적으로 뒤집힌 카드가 2장인지 여부와 2장이 색이 다르면 다시 카드앞면으로 돌아가고 같은 색이면 완료배열에 넣고 return하는 프로그램을 만들도록 하겠습니다. 아래 코드는 onclickCard( ) 함수내에서 이루어지는 코드입니다. ① 카드가 2장인가 보통 코드의 기본을 만들때 반대로 하더군요. 즉, 카드가 2장인가의 코드는 카드가 2장이 아니면으로 하는게 풀어가는게 쉽습니다. ② 같은색인가 clicked에 넣은 색상이 첫번째 카드와 두..
-
JavaScript 입문 : 카드맞추기 게임 - 카드뒤집기(setTimeout( )이용), 클릭이벤트 (onclickCard 함수) 만들기 (1)컴퓨터 알아가기/JavaScript 2022. 10. 5. 19:30
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 공부하고 있습니다. 이제부터는 일정시간을 두고 카드를 뒤집는 자바스크립트를 만들어 볼 예정이고 에러없이 작동한다면 각각 카드를 클릭할 수 있는 클릭이벤트 기능을 넣을 차례입니다. 1. 카드 뒷면 보여주기 일정 시간 동안 카드의 뒷면을 보여주는 script를 작성합니다. 한꺼번에 뒤집을 수 있지만 시각적 효과를 위해서 1초후 첫 카드가 뒤집히면서 이후 0.1초 간격으로 전체 12장의 카드를 뒤집도록 하겠습니다. 시간이 들어간다는 이야기는 setTimeout( ) 함수를 활용합니다. startGame( ) 함수내에 작성해야 되겠죠. 4개의 태그 중 전체 프레임을 나타내는 container 클래스명을 기준으로 움직이며 지난시간 공부했던 add( ) 메소드를 ..