[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part2 - 기능 구현(클릭 이벤트)

이번 시간에는 번갈아 가면서 클릭하면 사용자 1은 X 표시 사용자 2는 O 표시하는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

---

목차

1. 실행 화면
2. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 메인 코드 MainActivity.kt

 - 설명 -

 1. activityPlayer: Boolean = true

   활성화 플레이어 true: 사용자 1, false: 사용자 2

   클릭할 때마다 값이 변경된다. 

 2. buttons = arrayOfNulls<Button>(9)

   버튼 객체 담는 변수

 3. p1ScoreCount = 0

   사용자1 승수

 4. p2ScoreCount = 0

   사용자2 승수

 5. roundCount = 0

   클릭 개수

 6. gameState

   클릭 한 버튼 위치 들어갈 배열

 7. winningPosition

   승리 위치 값 담은 배열

 8. viewMode()

   순서 표시 함수

   해당 순서인 사용자 텍스트 빨강으로 변경

class MainActivity : AppCompatActivity(), View.OnClickListener {

    lateinit var binding: ActivityMainBinding

    //버튼 객체 담을 변수
    private val buttons = arrayOfNulls<Button>(9)

    //활성화 플레이어 변수 (true: p1 , false: p2)
    private var activityPlayer: Boolean = true

    private var p1ScoreCount = 0 ///플레이어1 승수
    private var p2ScoreCount = 0 //플레이어2 승수
    private var roundCount = 0 //클릭 횟수

    //클릭 한 버튼 위치 들어갈 배열(9개)
    var gameState: IntArray = intArrayOf(2, 2, 2, 2, 2, 2, 2, 2, 2)

    //승리 위치
    var winningPosition: Array<IntArray> =
        arrayOf(
            intArrayOf(0, 1, 2),//가로
            intArrayOf(3, 4, 5),//가로
            intArrayOf(6, 7, 8),//가로
            intArrayOf(0, 3, 6),//세로
            intArrayOf(1, 4, 7),//세로
            intArrayOf(2, 5, 8),//세로
            intArrayOf(0, 4, 8),//대각선
            intArrayOf(2, 4, 6),//대각선
        )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //순서 표시
        viewMode()

        //버튼 초기화
        for((index, item) in buttons.withIndex()){

            val buttonID = "btn_${index}"
            val resourceID = resources.getIdentifier(buttonID, "id", packageName)
            buttons[index] = findViewById(resourceID)
            buttons[index]?.setOnClickListener(this)
        }
    }

    //순서 표시(빨강: 순서)
    private fun viewMode() {
        if(activityPlayer){ //p1
            binding.player1.setTextColor(Color.RED)
            binding.player2.setTextColor(Color.BLACK)
        }else{//p2
            binding.player1.setTextColor(Color.BLACK)
            binding.player2.setTextColor(Color.RED)
        }
    }

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

        //해당 버튼에 값이 있으면 리턴
        if((view as Button).text.toString() != ""){
            Toast.makeText(applicationContext, "이미 체크됨", Toast.LENGTH_SHORT).show()
            return
        }

        //1. 버튼ID 변수에 담기(예: btn_2)
        val buttonId = view.resources.getResourceEntryName(view.id)

        //2. 버튼ID에서 숫자만 변수에 담기(예: 2)
        val gameStatePointer = buttonId.substring(buttonId.length-1, buttonId.length).toInt()

        //사용자 순서
        if(activityPlayer){ //p1
            //텍스트 설정
            view.text = "X"

            //텍스트 색상 설정
            view.setTextColor(Color.parseColor("#FFC34A"))

            //해당 위치에 0을 넣는다.
            gameState[gameStatePointer] = 0
        }else{ //p2
            //텍스트 설정
            view.text = "O"

            //텍스트 색상 설정
            view.setTextColor(Color.parseColor("#70FFEA"))

            //해당 위치에 1을 넣는다.
            gameState[gameStatePointer] = 1
        }
        // 순서 변경
        activityPlayer = !activityPlayer

        //순서 표시
        viewMode()
    }
}

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정