[스크래치] 슬라이드 조각퍼즐 맞추기 게임만드는 방법

스크래치 슬라이드 조각 퍼즐 맞추기 

게임만드는 방법

 

오랫만에 스크래치 코딩 포스팅을 하게 되었습니다. 1주일 조금 더 지난 것 같네요.

이번 시간에는 어린이 두뇌 게임인 조각 퍼즐 맞추기에 대하여 주제를 정하였습니다. 앞으로 두뇌게임 위주로 게임을 만들어 보고자 합니다.

그 첫 번째로 조각 퍼즐 맞추기 게임에 대하여 간단하게 만들어 보았습니다.

 

그럼 바로 시작하도록 하겠습니다.

 

■ 게임소개

아래는 게임 화면 입니다. 게임 방법은 모두 알고 계실 것이라 생각합니다. 간단하게 말씀드리면 조각을 움직여서 사진을 완성하는 게임입니다. 아래 화면은 사진이 완성 된 이미지 입니다.

 

 

 

■ 게임체험

그럼 게임을 해보고 개발방법에 대하여 알아보도록 하겠습니다.

 

 

 

■ 게임 만드는 방법

1. 먼저 사진을 준비합니다. 하나의 사진을 4조각으로 만들어 저장합니다.

2. 만든 조각을 스프라이트 파일 업로드 하기 기능을 통하여 업로드 합니다.

 

 

3. 먼저 사진이 없는 첫번째 스프라이트에 빈공간-X, 빈공간-Y 변수를 생성하고 클릭하였을 경우, 0으로 설정 하도록 합니다.

이 변수들은 빈 영역의 정보를 담을 것입니다.

좌측 상단 부터 좌표 X=1, Y=1 이 될 것입니다.

 

 

4. 퍼즐 스프라이트1~4까지의 코딩 부분입니다.

먼저 클릭했을때 실행되는 기능 입니다. 아래 코딩부분은 퍼즐1, 퍼즐2 부분입니다. 퍼즐3, 퍼즐4 부분은 x, y 로 이동하는 값만 다릅니다.  100만큼 다르게 설정 해 주시면 됩니다.

 

퍼즐1 스프라이트 코딩설명  - 좌표 설정 : 퍼즐1의 경우 X, Y 좌표가 각각 1입니다.  - 이미지의 초기 위치로 이동합니다. 퍼즐1 스프라이트가 기준(0,0)이 됩니다.    - 게임을 시작하면 퍼즐을  섞는 부분입니다.    섞기Cnt를 0으로 설정합니다.  - 섞기Cnt가 5보다 작을 때 까지 반복하며 섞게 됩니다.  - 각 퍼즐 스프라이트가 섞기를 할때 난수를 발생하여 랜덤으로 섞이도록 합니다.  - 움직이기 함수를 호출하여 퍼즐을 이동시킵니다.  - 섞기Cnt 를 +1 해 줍니다.

 

 

 

5. 각 스프라이트마다 작업은 동일합니다. 다음은 생성된 변수 부분입니다.

각 화면마다 X, Y 변수 및 섞기Cnt변수를 생성해 줍니다. 이 때 이 스프라이트에서만 사용으로 서정하시면 됩니다.

X, Y변수는 해당 퍼즐 스프라이트의 위치 좌표 정보를 가지고 있게 됩니다.

빈공간-X, -Y 변수는 전 스프라이트 영역에서 사용하도록 설정하였기에 모든 화면에서 보이게 됩니다.

 

 

 

 

6. 다음은 크게 3가지 부분을 코딩 해 줍니다.

첫째, 이 스프라이트가 클릭될 때 움직이기 함수를 호출해 줍니다.

두번째, 움직이기 함수 부분입니다. 빈공간 값과 현재 자신의 좌표를 이용하여 자신이 움직일 수 있는 공간으로 이동 시키는 부분입니다.

세번째 빈공간 정보를 수정하는 부분입니다. 크게 이 3가지 코딩으로 구분됩니다. 

 

- X좌표 이동 유무 조건 체크  - X좌표 좌측, 우측 조건 체크 후 조건에 맞다면 이동시키고, 해당 퍼즐 좌표 및 빈공간 좌표를 설정 합니다.  - Y좌표 이동 유무 조건 체크  - Y좌표 좌측, 우측 조건 체크 후 조건에 맞다면 이동시키고, 해당 퍼즐 좌표 및 빈공간 좌표를 설정 합니다.

 

 

7. 다음은 퍼즐2에서 4까지 부분입니다.

퍼즐1과 모두 동일하며, 단 X좌표의 이동 조건만 다릅니다.

그 이유는 1,1의 좌표 바로 좌측에만 빈 공간이 하나 있기 때문입니다. 

 

 

이렇게 하여 모든 설명이 끝이 났습니다.

 

퍼즐 이동 시 코딩부분에서 몇몇부분들을 변수로 설정하면, 4조각이 아닌 다양한 조각일 경우도 만들어 볼 수 있을 것 같습니다. 다음에는 더 많은 조각들로 스크래치 슬라이드 퍼즐 맞추기 게임을 만들어 보도록 하겠습니다.

수고하셨습니다.