BLOG ARTICLE 카드 찾기 게임 | 1 ARTICLE FOUND

  1. 2008.06.11 4.6 [중급] 카드 맞추기

이번장에서는 카드를 알아 맞추는 게임을 만들어 보겠습니다. 좌측 상단에 나와 있는 카드 중 가장 오른쪽에 나와 있는 모양을 아래에 뒤집혀진 4개의 카드 중에 찾아 내는 게임입니다. 예상되는 위치의 카드를 클릭하면 정답일 경우에는 다음 카드로 넘어 가고 틀렸을 경우에는 1초간 카드를 보여준 후 다시 게임이 진행됩니다. 3번의 기회가 있습니다. 

사용자 삽입 이미지

1. 변수 만들기
Varaiables의 [Make a variable] 버튼을 클릭하여 아래와 같이 변수를 만듭니다.

1) card1, card2, card3, card4
4개의 카드(스페이드-card1, 클로버-card2, 스타-card3, 하트-card4)들의 위치를 나타냅니다. 1~4의 값을 가지며 각각 첫번째, 두번째, 세번째, 네번째 위치에 있음을 의미합니다. 

2) live
남은 기회를 의미합니다. 3에서 부터 시작해서 틀릴 경우에 1씩 감소되며, 0이 되면 게임이 종료됩니다.

3) step
현재 맞출 카드의 순서를 나타냅니다. 1~4의 값을 갖습니다.

4) curMessage
화면에 보여줄 메시지를 의미합니다. 1~4의 값에 따라 'Correct!', 'Wrong!', 'You Win!!", 'You loose!!'를 출력합니다.


2. 스프라이트 생성

아래와 같이 각각 4개씩 아이콘, 카드, 뒷면 스프라이트를 생성합니다. 카드 뒷면 스프라이트는 먼저 하나만 만들고 스크립트를 작성 후에 'duplicate'로 복사하여 변경하여 사용하는 것이 편리합니다. (아래의 압축파일을 다운로드 받으시면 사용된 이미지들이 있습니다)


사용자 삽입 이미지

사용자 삽입 이미지
위의 이미지에서 Sprite13인 Wrong!! 스프라이트는 페인트 에디터를 이용해 직접 작성합니다. 그 뒤에 커스튬에서 'Wrong!', 'You win!!', 'You loose' 를 순서대로 추가 합니다.






3. 배경 스크립트 생성

배경에서 초기화 및 사용자 선택 시 처리에 관한 스크립트를 처리 합니다. 스프라이트 목록에서 좌측에 있는 배경을 선택한 후에 아래와 같이 스크립트를 추가합니다.

1) 초기화
사용자 삽입 이미지
[set step to (1)]

현재 단계를 1로 설정합니다.

[set live to (3)]
남은 기회를 3으로 설정합니다.

[set card1 to (0)]
[set card2 to (0)]
[set card3 to (0)]
[set card4 to (0)]
네개의 카드 위치를 모두 0으로 초기화 합니다.

[broadcast [setCard_1] and wait]
[broadcast [setCard_2] and wait]
[broadcast [setCard_3] and wait]
[broadcast [setCard_4] and wait]
순서를 정하도록 각각의 카드에 메시지를 보냅니다.



[broadcast [setPos_1] and wait]
[broadcast [setPos_2] and wait]
[broadcast [setPos_3] and wait]
[broadcast [setPos_4] and wait]
순서에 맞추어 카드가 위치하도록 메시지를 보냅니다.

2) 정답 처리
사용자 삽입 이미지
[change step by (1)]

단계를 1 증가합니다.

[set curMessage to (1)]
'Correct!' 란 메시지를 출력하도록 1로 설정합니다.

[broadcast [showCard_카드번호]]
각 단계에 맞추어 아이콘을 출력하도록 합니다.

[if <[step]=(5)>]
모든 단계가 종료되었을 경우에는 'You win!!'을 출력하도록 curMessage를 3으로 설정합니다.

[broadcast [showMessage] and wait]
설정된 curMessage에 맞추어 메시지를 출력하도록 합니다.





3) 오답 처리
사용자 삽입 이미지
[change live by (-1)]
기회를 1 감소합니다.

[if <[live] < (1)>]
기회가 1보다 작을 경우에는 curMessage를 4(You loose!!)로 아닐 경우에는 2(Wrong!)으로 설정합니다.

[broadcast [showMessage] and wait]
설정된 curMessage에 맞추어 메시지를 출력하도록 합니다.


4. 아이콘 스프라이트
 
첫번째 아이콘은 [show]로 시작시 보여 주며 나머지 아이콘들은 [hide]로 출력하지 않습니다. 아래는 각각의 아이콘 스프라이트에 따른 스크립트 입니다. 

사용자 삽입 이미지

[when I receive [showCard_카드번호]]
각 단계가 지날 때 마다 'showCard_카드번호' 메시지를 받게 되며 해당 카드는 [show]로 출력되게 합니다.


5. 앞면 카드 스프라이트

1) 초기화 및 좌표 설정
사용자 삽입 이미지

[go back (1) layers]
각 카드들은 카드 뒷면(?)과 겹쳐서 출력됩니다. 카드 뒷면이 먼저 보이도록 앞면카드들은 출력순서를 뒤로 보냅니다.

[set y to (-20)]
Y 좌표는 모든 카드가 같습니다.

[if <[card1]=(1)>]
자신의 위치에 따라 x 좌표를 결정합니다.  현재 스크립트는 첫번째 카드이기 때문에 card1을 비교하며 카드에 따라 각각 cad2, card3, card4를 비교합니다.

2) 위치 설정

사용자 삽입 이미지
첫번째 카드는 1~4중 임의의 위치로 설정합니다.



사용자 삽입 이미지
두번째 카드도 1~4중 임의의 위치로 설정합니다. 하지만 첫번째 카드와 중복된 위치가 되면 안되므로 card1과 검사하여 중복되지 않게 설정하도록 합니다.

[if <[card2]=[card1]>]
card1과 같은 번호일 때는 card2를 0으로 만들어 계속 루프를 돌도록 합니다.

[if <not<[card2]=(0)>>]
card2가 0이 아닐때는 스크립트를 중지합니다.


사용자 삽입 이미지
세번째 카드도 위와 동일한 방법으로 card1, card2와 중복되지 않도록 설정합니다.

위와 바뀐점은 card2와의 검사가 추가되었습니다.












사용자 삽입 이미지
네번째 카드도 위와 동일한 방법으로 card1, card2, card3와 중복되지 않도록 설정합니다.

위와 바뀐점은 card3과의 검사가 추가되었습니다.

















6. 뒷면 카드 스크립트

사용자 삽입 이미지
좌측은 첫번째 뒷면 카드의 예입니다. 다른 세장의 뒷면 카드들도 이와 동일 하면 x좌표만 각각 -50, 50, 150으로 바뀝니다.

[go to front]
같은 위치의 앞면 카드를 가리기 위해 가장 앞쪽에 출력되도록 합니다.

사용자 삽입 이미지
카드가 클릭되면 1초간 감추어서 아래장에 있는 앞면 카드가 출력되도록 한다음 다시 출력합니다.

각 단계(step)에 맞추어 각각의 카드를 검사합니다. step이 1일 경우에는 card1, 2일 경우에는 card2, 3일 경우에는 card3, 4일 경우에는 card4의 위치가 1인지 확인합니다. 여기서는 첫번째 뒷면 카드이기 때문에 1과 비교하고 뒷면 카드에 따라 각각 2, 3, 4와 비교합니다.

[if <[card1]=(1)>]
단계가 1이고 card1의 위치가 1일 경우에는 맞는 카드를 고른 경우입니다.

맞는 카드를 선택하였을 경우에는 [hide]로 뒷면 카드를 감추고 correct 메시지를 보냅니다. 이 메시지는 이전에 작성하였던 배경 스크립트에서 처리됩니다.

틀린 카드를 선택하였을 경우에는 wrong 메시지를 보냅니다.
























이제 완료되었습니다. 시작버튼을 클릭하여 플레이를 해봅니다. 아이콘에 나타난 카드를 네개의 뒤집어진 카드에서 마우스로 선택을 하여 3번의 기회동안에 4개의 카드를 모두 찾아 내면 'You win!!'과 함께 게임이 종료됩니다.

전체 소스는 아래의 파일을 다운로드 받아서 참고하세요.
AND