그림짝맞추기 앱개발

그림짝맞추기 앱만들기 13 - 이미지 50개준비하고 프로젝트에 등록하기, 4단계 설정하기

두결앱개발 2026. 1. 5. 05:25
반응형
SMALL

안녕하세요~ 두결입니다.

 

지난시간에는 카운트다운을 팝업화면으로 만들어서 화면 중앙에 띄워보았었습니다.

 

이번시간에는

그림 짝맞추기 4단계 12개 이미지를 해보겠습니다.

 


▣  이미지 50개준비하고 프로젝트에 등록하기

먼저, 지금 이미지가 10개밖에 없어서 50개로 준비해보겠습니다.

 

네 위와앝이 50개 이미지를 준비하였습니다.

50개가 많긴 하네요 ㅎㅎ

 

50개 이미지를 파일로 저장한 후에

리소스에 등록하였습니다.

 

// 리소스의 이미지ID를 배열에 초기화 해주는 함수
private void InitImageArray()
{
    nArrImageID = new int[MAX_IMAGECOUNT];

    nArrImageID[0] = R.drawable.imagepair_01;   nArrImageID[1] = R.drawable.imagepair_02;
    nArrImageID[2] = R.drawable.imagepair_03;   nArrImageID[3] = R.drawable.imagepair_04;
    nArrImageID[4] = R.drawable.imagepair_05;   nArrImageID[5] = R.drawable.imagepair_06;
    nArrImageID[6] = R.drawable.imagepair_07;   nArrImageID[7] = R.drawable.imagepair_08;
    nArrImageID[8] = R.drawable.imagepair_09;   nArrImageID[9] = R.drawable.imagepair_10;
    nArrImageID[10] = R.drawable.imagepair_11;   nArrImageID[11] = R.drawable.imagepair_12;
    nArrImageID[12] = R.drawable.imagepair_13;   nArrImageID[13] = R.drawable.imagepair_14;
    nArrImageID[14] = R.drawable.imagepair_15;   nArrImageID[15] = R.drawable.imagepair_16;
    nArrImageID[16] = R.drawable.imagepair_17;   nArrImageID[17] = R.drawable.imagepair_18;
    nArrImageID[18] = R.drawable.imagepair_19;   nArrImageID[19] = R.drawable.imagepair_20;
    nArrImageID[20] = R.drawable.imagepair_21;   nArrImageID[21] = R.drawable.imagepair_22;
    nArrImageID[22] = R.drawable.imagepair_23;   nArrImageID[23] = R.drawable.imagepair_24;
    nArrImageID[24] = R.drawable.imagepair_25;   nArrImageID[25] = R.drawable.imagepair_26;
    nArrImageID[26] = R.drawable.imagepair_27;   nArrImageID[27] = R.drawable.imagepair_28;
    nArrImageID[28] = R.drawable.imagepair_29;   nArrImageID[29] = R.drawable.imagepair_30;
    nArrImageID[30] = R.drawable.imagepair_31;   nArrImageID[31] = R.drawable.imagepair_32;
    nArrImageID[32] = R.drawable.imagepair_33;   nArrImageID[33] = R.drawable.imagepair_34;
    nArrImageID[34] = R.drawable.imagepair_35;   nArrImageID[35] = R.drawable.imagepair_36;
    nArrImageID[36] = R.drawable.imagepair_37;   nArrImageID[37] = R.drawable.imagepair_38;
    nArrImageID[38] = R.drawable.imagepair_39;   nArrImageID[39] = R.drawable.imagepair_40;
    nArrImageID[40] = R.drawable.imagepair_41;   nArrImageID[41] = R.drawable.imagepair_42;
    nArrImageID[42] = R.drawable.imagepair_43;   nArrImageID[43] = R.drawable.imagepair_44;
    nArrImageID[44] = R.drawable.imagepair_45;   nArrImageID[45] = R.drawable.imagepair_46;
    nArrImageID[46] = R.drawable.imagepair_47;   nArrImageID[47] = R.drawable.imagepair_48;
    nArrImageID[48] = R.drawable.imagepair_49;   nArrImageID[49] = R.drawable.imagepair_50;

 

InitImageArray()함수에서 50개의 이미지를 배열에 할당해주었습니다.

 

이부분도 for문으로 바꿀려고 하면 리소스를 XML로 만들어서 할수 있긴한데.. 

귀찮으니 그냥 넘어가도록 하겠습니다. ^^;

 

실행을 해보면

 

 

네 50개 이미지가 랜덤으로 잘 표시가 되네요..^^

 

 


▣  4단계 설정하기

자, 이제 본격적으로 4단계 설정을 해보겠습니다.

switch(nGameStage)
{
    case 1:
        nCurImageCount = 4; // 1단계 이미지 개수 4개
        break;
    case 2:
        nCurImageCount = 6; // 2단계 이미지 개수 6개
        break;
    case 3:
        nCurImageCount = 8; // 3단계 이미지 개수 8개
        break;
    case 4:
        nCurImageCount = 12; // 4단계 이미지 개수 12개
        break;
}

 

먼저, InitImageArray()함수에서 4단계일때 이미지 개수를 12개로 설정하구요~

 

switch(nGameStage)
{
    case 1:
        fImagePosX[0] = 0.1f; fImagePosY[0] = 0.3f;
        fImagePosX[1] = 0.9f; fImagePosY[1] = 0.3f;
        fImagePosX[2] = 0.1f; fImagePosY[2] = 0.67f;
        fImagePosX[3] = 0.9f; fImagePosY[3] = 0.67f;
        break;
    case 2:
        fImagePosX[0] = 0.1f; fImagePosY[0] = 0.2f;
        fImagePosX[1] = 0.9f; fImagePosY[1] = 0.2f;
        fImagePosX[2] = 0.1f; fImagePosY[2] = 0.5f;
        fImagePosX[3] = 0.9f; fImagePosY[3] = 0.5f;
        fImagePosX[4] = 0.1f; fImagePosY[4] = 0.8f;
        fImagePosX[5] = 0.9f; fImagePosY[5] = 0.8f;
        break;

    case 3:
        fImagePosX[0] = 0.2f; fImagePosY[0] = 0.2f;
        fImagePosX[1] = 0.8f; fImagePosY[1] = 0.2f;
        fImagePosX[2] = 0.2f; fImagePosY[2] = 0.44f;
        fImagePosX[3] = 0.8f; fImagePosY[3] = 0.44f;
        fImagePosX[4] = 0.2f; fImagePosY[4] = 0.68f;
        fImagePosX[5] = 0.8f; fImagePosY[5] = 0.68f;
        fImagePosX[6] = 0.2f; fImagePosY[6] = 0.92f;
        fImagePosX[7] = 0.8f; fImagePosY[7] = 0.92f;
        break;

    case 4:
        fImagePosX[0] = 0.1f; fImagePosY[0] = 0.2f;
        fImagePosX[1] = 0.5f; fImagePosY[1] = 0.2f;
        fImagePosX[2] = 0.9f; fImagePosY[2] = 0.2f;

        fImagePosX[3] = 0.1f; fImagePosY[3] = 0.39f;
        fImagePosX[4] = 0.5f; fImagePosY[4] = 0.39f;
        fImagePosX[5] = 0.9f; fImagePosY[5] = 0.39f;

        fImagePosX[6] = 0.1f; fImagePosY[6] = 0.58f;
        fImagePosX[7] = 0.5f; fImagePosY[7] = 0.58f;
        fImagePosX[8] = 0.9f; fImagePosY[8] = 0.58f;

        fImagePosX[9] = 0.1f; fImagePosY[9] = 0.77f;
        fImagePosX[10] = 0.5f; fImagePosY[10] = 0.77f;
        fImagePosX[11] = 0.9f; fImagePosY[11] = 0.77f;
        break;
}

 

CreateImageView()함수에서 

4단계일때 12개의 이미지의 위치를 설정해줍니다.

3 x 4열로 하였습니다.

 

// ImageView의 가로, 세로 크기 설정
layoutParams = imgvCur.getLayoutParams();

switch(nGameStage) {
    case 1:
        layoutParams.width = 415;
        layoutParams.height = 510;
        break;
    case 2:
        layoutParams.width = 415;
        layoutParams.height = 510;
        break;
    case 3:
        layoutParams.width = 345;
        layoutParams.height = 430;
        break;
    case 4:
        layoutParams.width = 282;
        layoutParams.height = 350;
        break;
}
imgvCur.setLayoutParams(layoutParams);

 

이미지의 크기도 약간 작게해야되니까... 4단계일때의 이미지 크기도 설정해주었습니다.

 

잘되는지 한번 실행해보겠습니다.

 

 

네 12개 이미지가 잘 표시되고 그림짝맞추기 로직도 잘 돌아가네요..^^

 

그런데, 갑자기 어려워진 느낌이네요 ㅎㅎ

12개만 해도 쉽지않네요~

 

이런식으로 하면

4단계 12개, 5단계 14개, 6단계 16개, 7단계 20개가 끝일듯한데.. 8단계 24개는 이미지가 너무 작을듯하고...

이건 나중에 해보면서 결정해보죠 ㅎㅎ

원래는 10단계 30개까지 해보려고 했는데 될지는 모르겠네요...

 

 

실행 동영상도 한번 보시죠~

 

 

 

 

 

이번시간에는 여기까지만 하구요~

 

다음시간에는 5단계로 가기전에  시간제한을 둬보도록 하겠습니다.

30초 안에 맞추는걸로 하고 30초 시간을 표시해보고 30초 안에 못맞추면 팝업창을 띄워서 재도전할지 아니면 그만둘지를 결정할수 있도록 해보겠습니다.

 

 

그럼, 이만~

감사합니다. ^^

 

반응형
LIST