[안드로이드/JAVA] 안드로이드로 Wordle 만들어 보기 #1

인터넷을 찾아보다 Wordle이란 게임을 보게 되었는데 이게 유행이라고 하더라

그래서 한번 안드로이드화 시키기로 마음먹었다.

 

먼저 룰을 알아보도록 하자.

 

Rule

6번의 시도 안에 오늘의 워들을 알아내야 한다.

이때 내가 적은 단어가 정답에 맞는지는 단어를 적고 각 타일의 색으로 알아낸다.

 

만일 타일이 초록색으로 표시된다면:

• 표시된 글자가 워들에 존재한다.
• 표시된 글자가 정확히 같은 위치에 위치한다.

만일 타일이 노란색으로 표시된다면:

• 표시된 글자가 워들에 존재한다.
• 하지만 정확히 같은 위치에 있지는 않다.

만일 타일이 회색으로 표시된다면:

• 이 글자는 워들에 없는 글자이다.
• 같은 글자를 둘 이상 제시했을 때 워들에 존재하는 개수보다 더 많은 경우에도 이렇게 표시된다.

 

그러면 이제 만들어 보도록 하자

 

일단 오늘 만들어 볼 것은 타일의 색깔 바꾸기와 이미지 위에 텍스트로 표시하기이다.

 

이전의 올렸던 글들을 이용한 것이니 모른다면 한번 보고 오는 것을 추천한다.

 

이미지 색 바꾸기

[안드로이드/JAVA] 백그라운드 색 바꾸기, 이미지 뷰 색 바꾸기

 

이미지 위에 텍스트 표시하기

[안드로이드] 이미지에 텍스트 넣기

 

이제 먼저 화면부터 만들어 보자.

 

화면 맨 위에 Wordle이란 글자를 적어두고

글자와 색을 바꿀 이미지 5개와

입력란 하나를 만들었다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Wordle"
        android:gravity="center"
        />


    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="412dp"
        android:layout_height="122dp"
        android:layout_weight="0"
        android:orientation="horizontal"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="-2dp">


        <TextView
            android:id="@+id/Empty1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="27dp"
            android:layout_marginTop="40dp"
            android:background="@android:drawable/screen_background_light"
            android:gravity="center"
            android:text=""
            android:textSize="30sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/Empty2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="27dp"
            android:layout_marginTop="40dp"
            android:background="@android:drawable/screen_background_light"
            android:gravity="center"
            android:text=""
            android:textSize="30sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/Empty3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="27dp"
            android:layout_marginTop="40dp"
            android:background="@android:drawable/screen_background_light"
            android:gravity="center"
            android:text=""
            android:textSize="30sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/Empty4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="27dp"
            android:layout_marginTop="40dp"
            android:background="@android:drawable/screen_background_light"
            android:gravity="center"
            android:text=""
            android:textSize="30sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/Empty5"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="27dp"
            android:layout_marginTop="40dp"
            android:background="@android:drawable/screen_background_light"
            android:gravity="center"
            android:text=""
            android:textSize="30sp"
            android:textStyle="bold" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="412dp"
        android:layout_height="247dp"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="484dp"
        tools:ignore="MissingConstraints">

        <EditText
            android:id="@+id/Enter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="5글자를 입력해 주세요."
            android:layout_marginTop="100dp"
            />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

그러면 이제 코드를 보러 가자.

 

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Vibrator;
import android.text.Editable;
import android.view.KeyEvent;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private Vibrator vibrator;
    public String O = "truck";
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        EditText e = findViewById(R.id.Enter);

        TextView Empty1 = findViewById(R.id.Empty1);
        TextView Empty2 = findViewById(R.id.Empty2);
        TextView Empty3 = findViewById(R.id.Empty3);
        TextView Empty4 = findViewById(R.id.Empty4);
        TextView Empty5 = findViewById(R.id.Empty5);


        e.setOnKeyListener(new View.OnKeyListener() {
            @SuppressLint("ResourceAsColor")
            @Override
            public boolean onKey(View view, int i, KeyEvent keyEvent) {
                switch (i){
                    case KeyEvent.KEYCODE_ENTER:
                        Editable l = e.getText();
                        int size = l.length() - 1;
                        size++;
                        if(size != 5){
                            vibrator = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE);
                            vibrator.vibrate(1000);
                            Toast t = Toast.makeText(getApplicationContext(),"5글자만 입력해 주십시오.", Toast.LENGTH_LONG);
                            t.show();
                            System.out.println(size);
                            e.setText("");
                        }else{
                           String answer = l.toString();
                           char[] answerchar = answer.toCharArray();
                           char[] Ochar = O.toCharArray();

                            System.out.println(answer);
                           e.setText("");

                            //gray

                            for(int j = 0; j < 5; j ++){
                                String s = String.valueOf(answerchar[j]);
                                if(!O.contains(s)){
                                    if(j == 0){
                                        Empty1.setBackgroundColor(Color.parseColor("#808080"));
                                        Empty1.setText(s);
                                    }else if(j == 1){
                                        Empty2.setBackgroundColor(Color.parseColor("#808080"));
                                        Empty2.setText(s);
                                    }else if(j == 2){
                                        Empty3.setBackgroundColor(Color.parseColor("#808080"));
                                        Empty3.setText(s);
                                    }else if(j == 3){
                                        Empty4.setBackgroundColor(Color.parseColor("#808080"));
                                        Empty4.setText(s);
                                    }else{
                                        Empty5.setBackgroundColor(Color.parseColor("#808080"));
                                        Empty5.setText(s);
                                    }
                                }
                            }



                           //yellow
                           for(int j = 0; j < 5; j++){
                               if(answerchar[0] == Ochar[j] || answerchar[0] - 'A' == Ochar[j]) {
                                   Empty1.setBackgroundColor(Color.parseColor("#FFFF00"));
                                   String s = String.valueOf(answerchar[0]);
                                   Empty1.setText(s);

                               }
                               if(answerchar[1] == Ochar[j] || answerchar[1] - 'A' == Ochar[j]) {
                                   Empty2.setBackgroundColor(Color.parseColor("#FFFF00"));
                                   String s = String.valueOf(answerchar[1]);
                                   Empty2.setText(s);


                               }
                               if(answerchar[2] == Ochar[j] || answerchar[2] - 'A' == Ochar[j]) {
                                   Empty3.setBackgroundColor(Color.parseColor("#FFFF00"));
                                   String s = String.valueOf(answerchar[2]);
                                   Empty3.setText(s);


                               }
                               if(answerchar[3] == Ochar[j] || answerchar[3] - 'A' == Ochar[j]) {
                                   Empty4.setBackgroundColor(Color.parseColor("#FFFF00"));
                                   String s = String.valueOf(answerchar[3]);
                                   Empty4.setText(s);

                               }
                               if(answerchar[4] == Ochar[j] || answerchar[4] - 'A' == Ochar[j]) {
                                   Empty5.setBackgroundColor(Color.parseColor("#FFFF00"));
                                   String s = String.valueOf(answerchar[4]);
                                   Empty5.setText(s);


                               }
                           }

                           //Green
                            if(answerchar[0] == Ochar[0] || answerchar[0] - 'A' == Ochar[0]) {
                                Empty1.setBackgroundColor(Color.parseColor("#7CFC00"));
                                String s = String.valueOf(answerchar[0]);
                                Empty1.setText(s);


                            }
                            if(answerchar[1] == Ochar[1] || answerchar[1] - 'A' == Ochar[1]) {
                                Empty2.setBackgroundColor(Color.parseColor("#7CFC00"));
                                String s = String.valueOf(answerchar[1]);
                                Empty2.setText(s);

                            }
                            if(answerchar[2] == Ochar[2] || answerchar[2] - 'A' == Ochar[2]) {
                                Empty3.setBackgroundColor(Color.parseColor("#7CFC00"));
                                String s = String.valueOf(answerchar[2]);
                                Empty3.setText(s);

                            }
                            if(answerchar[3] == Ochar[3] || answerchar[3] - 'A' == Ochar[3]) {
                                Empty4.setBackgroundColor(Color.parseColor("#7CFC00"));
                                String s = String.valueOf(answerchar[3]);
                                Empty4.setText(s);

                            }
                            if(answerchar[4] == Ochar[4] || answerchar[4] - 'A' == Ochar[4]) {
                                Empty5.setBackgroundColor(Color.parseColor("#7CFC00"));
                                String s = String.valueOf(answerchar[4]);
                                Empty5.setText(s);

                            }



                        }
                break;
                }
                return true;
            }
        });
    }
}

나는 5글자를 적지 않았을 때 진동이 오도록 바이브레이터를 넣었다.

진동에 대한 것은 나중에 따로 글을 쓰도록 하겠다.

검사할 것이 5개뿐이기에 단순 if문으로 색과 텍스트를 바꾸어 갔다.

이런 식으로 작성을 하게 되면 기본적인 틀은 만들어진 것이다.

 

public String O라고 쓰인 부분이 정답이 들어갈 부분이다.

나중에는 랜덤으로 가져와야 하지만 지금은 기본적인 틀만 만드는 부분이기에 그냥 truck으로 고정해 두었다.

 

다음번에는 6번의 기회를 주고 정답을 맞혔을 때의 처리와 못 맞추었을 때의 처리를 만들어 오겠다.