[안드로이드 코틀린] 같은 그림 찾기 게임 만드는 방법 part2 - 이미지 섞기& 보여주기

이번 시간에는 같은 그림 찾기 part2 이미지 섞기와 섞은 이미지를 보여주는 방법을 알아보겠습니다.

화면 구성은 아래 링크를 들어가시면 됩니다. 

2022.04.02 - [안드로이드] - [안드로이드] 같은 그림 찾기 게임 만드는 방법 part1 - 화면 구성

[안드로이드] 같은 그림 찾기 게임 만드는 방법 part1 - 화면구성

---

목차

1. 실행 화면
2. 카드 클래스 MemoryCard.kt
3. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 카드 클래스 MemoryCard.kt

- 설명 -

1. imageId 

  이미지 아이디

2. isFaceUp

  카드 앞면(false), 카드 뒷면(true)

3. isMatched

  match (true), no match (false)

2. 카드 클래스 MemoryCard.kt

data class MemoryCard(

    val imageId: Int,
    val isFaceUp: Boolean,
    val isMatched: Boolean
)

 

3. 메인 코드 MainActivity.kt

- 설명 -

1. imageList.add(R.drawable.dog)

  이미지를 리스트에 담는다.

2. imageList.shuffle()

  이미지를 섞는다

3. cards.add(MemoryCard(imageList[index], false, false))

  카드 리스트에 데이터 담기

4. buttons[index]?.setImageResource(cards[index].imageId)

  버튼에 이미지 담기

5. 이미지 res -> drawable

cat.png

0.00MB

dog.png

0.00MB

pig.png

0.00MB

rabbit.png

0.00MB

class MainActivity : AppCompatActivity(), View.OnClickListener{

    //버튼 리스트
    private val buttons: Array<ImageButton?> = arrayOfNulls<ImageButton>(8)

    //이미지 리스트
    private lateinit var imageList: ArrayList<Int>

    //카드 리스트
    private lateinit var cards: ArrayList<MemoryCard>

    //결과 텍스트
    private lateinit var resultText: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //초기화
        resultText = findViewById(R.id.result_text)
        val resetBtn: Button = findViewById(R.id.reset_btn)
        resetBtn.setOnClickListener {
            //셋팅
            init()
        }

        //셋팅
        init()

    }//onCreate

    //셋팅 함수
    private fun init(){

        //이미지 리스트 초기화
        imageList = ArrayList()

        //카드 리스트 초기화
        cards = ArrayList()

        //리스트에 데이터 등록
        imageList.add(R.drawable.dog)
        imageList.add(R.drawable.pig)
        imageList.add(R.drawable.rabbit)
        imageList.add(R.drawable.cat)
        imageList.add(R.drawable.dog)
        imageList.add(R.drawable.pig)
        imageList.add(R.drawable.rabbit)
        imageList.add(R.drawable.cat)

        //순서 섞기
        imageList.shuffle()

        for((index, item) in buttons.withIndex()){

            //버튼 아이디
            val buttonID = "imageBtn${index}"

            //리소스 아이디
            val resource: Int = resources.getIdentifier(buttonID, "id", packageName)

            //버튼 초기화
            buttons[index] = findViewById(resource)

            //각 버튼에 클릭 이벤트 적용
            buttons[index]?.setOnClickListener(this)

            //카드 리스트에 데이터 담기
            cards.add(MemoryCard(imageList[index], false, false))

            //버튼에 이미지 담기
            buttons[index]?.setImageResource(cards[index].imageId)
        }
    }

    //클릭 이벤트
    override fun onClick(view: View?) {

        //view id 가져오기
        val id: Int? = view?.id

        //위치 변수
        var position: Int = 0

        when(id){
            R.id.imageBtn0 -> position = 0
            R.id.imageBtn1 -> position = 1
            R.id.imageBtn2 -> position = 2
            R.id.imageBtn3 -> position = 3
            R.id.imageBtn4 -> position = 4
            R.id.imageBtn5 -> position = 5
            R.id.imageBtn6 -> position = 6
            R.id.imageBtn7 -> position = 7
        }
    }
}

2022.08.05 - [안드로이드] - [안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 회전 표시 쉽게 만드는 방법

[안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 회전 표시 쉽게 만드는 방법

2022.08.04 - [안드로이드] - [안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 카드플립(CardFlip) 쉽게 만드는 방

[안드로이드] 애니메이션으로 뷰(View) 표시 및 숨기기 - 카드플립(CardFlip) 쉽게 만드는 방

2022.08.03 - [안드로이드] - [안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드는 방법

[안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드