안드로이드 같은 그림 찾기 게임을 만들어 보았습니다. Android simple game

안드로이드

안드로이드 같은 그림 찾기 게임을 만들어 보았습니다. Android simple game - Find the same picture game

알통몬_ 2019. 2. 14. 15:01

공감 및 댓글은 포스팅 하는데

아주아주 큰 힘이 됩니다!!

포스팅 내용이 찾아주신 분들께

도움이 되길 바라며

더 깔끔하고 좋은 포스팅을

만들어 나가겠습니다^^

같은 그림 찾기 애플리케이션을 아주 간단하게 만들어보았습니다.

이미지를 따로 만들기 귀찮아서 숫자 1 ~ 8로 대체 하였습니다.

굉장히 간단합니다.

activity_findthesamepicture.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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"
    tools:context=".findTheSamePicture.FindTheSamePictureActivity">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/pictureLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView
            android:padding="8dp"
            android:id="@+id/pictureViews"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintDimensionRatio="1:1"
            android:overScrollMode="never"
            android:layout_width="0dp"
            android:layout_height="0dp"/>

        <TextView
            android:visibility="gone"
            android:text="start"
            android:textStyle="bold"
            android:textSize="96sp"
            android:textColor="@android:color/black"
            android:gravity="center"
            android:id="@+id/startTxtView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/pictureViews"
            app:layout_constraintDimensionRatio="1:1"
            android:layout_width="0dp"
            android:layout_height="0dp" />

        <TextView
            android:visibility="gone"
            android:text="1"
            android:textStyle="bold"
            android:textSize="96sp"
            android:textColor="@android:color/black"
            android:gravity="center"
            android:id="@+id/count1TxtView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/pictureViews"
            app:layout_constraintDimensionRatio="1:1"
            android:layout_width="0dp"
            android:layout_height="0dp" />

        <TextView
            android:visibility="gone"
            android:text="3"
            android:textStyle="bold"
            android:textSize="96sp"
            android:textColor="@android:color/black"
            android:gravity="center"
            android:id="@+id/count3TxtView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/pictureViews"
            app:layout_constraintDimensionRatio="1:1"
            android:layout_width="0dp"
            android:layout_height="0dp" />

        <TextView
            android:visibility="gone"
            android:text="2"
            android:textStyle="bold"
            android:textSize="96sp"
            android:textColor="@android:color/black"
            android:gravity="center"
            android:id="@+id/count2TxtView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/pictureViews"
            app:layout_constraintDimensionRatio="1:1"
            android:layout_width="0dp"
            android:layout_height="0dp" />

        <Button
            android:id="@+id/restartBtn"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/pictureViews"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_width="0dp"
            android:text="재시작"
            android:textSize="48sp"
            android:textStyle="bold"
            android:layout_height="wrap_content" />
    </android.support.constraint.ConstraintLayout>
</layout>

item_picture.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.constraint.ConstraintLayout
        android:padding="8dp"
        android:id="@+id/pictureLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/pictureTxtView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="70sp"
            android:textStyle="bold"
            tools:text="1" />
    </android.support.constraint.ConstraintLayout>
</layout>

Picture.java

tag필드는 String display 대신 이미지를 사용했을 때

같은 이미지인지를 판단하기위해 사용됩니다.

저처럼 하실 때는 tag 필드는 사용되지 않습니다.

package al.tong.mon.findthesamepicture.findTheSamePicture;

class Picture {

    private String display;
    private String tag;
    private int check = 0;

    Picture(String display, String tag) {
        this.display = display;
        this.tag = tag;
    }

    String getDisplay() {
        return display;
    }

    String getTag() {
        return tag;
    }

    int getCheck() {
        return check;
    }

    void setDisplay(String display) {
        this.display = display;
    }

    void setTag(String tag) {
        this.tag = tag;
    }

    void setCheck(int check) {
        this.check = check;
    }
}

FindTheSamePictureAdapter.java

package al.tong.mon.findthesamepicture.findTheSamePicture;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.support.annotation.NonNull;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.ViewGroup;

import java.util.Vector;

import al.tong.mon.findthesamepicture.R;
import al.tong.mon.findthesamepicture.databinding.ItemPictureBinding;


public class FindTheSamePictureAdapter extends RecyclerView.Adapter<FindTheSamePictureAdapter.ViewHolder> {

    Vector<Picture> pictures = new Vector<>();

    private Activity activity;
    private Context context;

    private int width = 0, height = 0;

    private boolean startAnimate = false;

    FindTheSamePictureAdapter(Activity activity) {
        this.activity = activity;
        this.context = activity.getApplicationContext();
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ItemPictureBinding binding = ItemPictureBinding.inflate(LayoutInflater.from(context), parent, false);
        return new ViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        ItemPictureBinding binding = holder.binding;

        if (height != 0 && width != 0) {
            binding.pictureLayout.getLayoutParams().width = width;
            binding.pictureLayout.getLayoutParams().height = height;
        }

        Picture picture = pictures.get(position);
        String display = picture.getDisplay();
        int check = picture.getCheck();
        binding.pictureTxtView.setText(display);
        Log.e("check[" + position + "] = ", String.valueOf(check));
        if(check == 0 && startAnimate) {
            binding.pictureTxtView.animate()
                    .rotationY(90)
                    .setDuration(200)
                    .setListener(new AnimatorListenerAdapter() {
                        @Override
                        public void onAnimationEnd(Animator animation) {
                       binding.pictureTxtView.setBackgroundColor(ContextCompat.getColor(context, R.color.colorAccent));
                       binding.pictureTxtView.setTextColor(ContextCompat.getColor(context, R.color.colorAccent));
                       binding.pictureTxtView.animate()
                                .rotationYBy(90)
                                .rotationY(180)
                                .setDuration(200)
                                    .setListener(new AnimatorListenerAdapter() {
                                        @Override
                                        public void onAnimationEnd(Animator animation) {
                                            picture.setCheck(1);
                                        }
                                    })
                                    .start();
                        }
                    })
                    .start();
        } else if (check == 2) {
            binding.pictureTxtView.setTextColor(ContextCompat.getColor(context, R.color.colorAccent));
            binding.pictureTxtView.setBackgroundColor(Color.BLACK);
        } else {

        }
    }

    @Override
    public int getItemCount() {
        return pictures.size();
    }

    void setUpPicture(Vector<Picture> pictures) {
        this.pictures = pictures;
        notifyDataSetChanged();
    }

    void setLength(int width, int height) {
        this.width = width;
        this.height = height;
    }

    void setStartAnimate(boolean startAnimate) {
        this.startAnimate = startAnimate;
        notifyDataSetChanged();
    }

    void update(int pos, int check) {
        pictures.get(pos).setCheck(check);
        notifyItemChanged(pos);
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        ItemPictureBinding binding;

        ViewHolder(ItemPictureBinding binding) {
            super(binding.getRoot());
            this.binding = binding;
        }

    }
}

[ 광고 보고 가시죠! ]

[ 감사합니다! ]

FindTheSamePictureActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
package al.tong.mon.findthesamepicture.findTheSamePicture;
 
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.databinding.DataBindingUtil;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.Toast;
 
import java.util.Collections;
import java.util.Vector;
 
import al.tong.mon.findthesamepicture.R;
import al.tong.mon.findthesamepicture.databinding.ActivityFindthesamepictureBinding;
 
 
public class FindTheSamePictureActivity extends AppCompatActivity {
 
    ActivityFindthesamepictureBinding binding;
 
    Vector<Picture> pictures;
 
    Vector<Integer> selectedPos;
 
    FindTheSamePictureAdapter adapter;
 
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_findthesamepicture);
        binding.restartBtn.setOnClickListener(view -> recreate());
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 4);
        binding.pictureViews.setLayoutManager(gridLayoutManager);
        adapter = new FindTheSamePictureAdapter(this);
        binding.pictureViews.setAdapter(adapter);
 
 
        selectedPos = new Vector<>();
        pictures = new Vector<>();
        pictures.add(new Picture("1", "1"));
        pictures.add(new Picture("1", "1"));
        pictures.add(new Picture("2", "2"));
        pictures.add(new Picture("2", "2"));
        pictures.add(new Picture("3", "3"));
        pictures.add(new Picture("3", "3"));
        pictures.add(new Picture("4", "4"));
        pictures.add(new Picture("4", "4"));
        pictures.add(new Picture("5", "5"));
        pictures.add(new Picture("5", "5"));
        pictures.add(new Picture("6", "6"));
        pictures.add(new Picture("6", "6"));
        pictures.add(new Picture("7", "7"));
        pictures.add(new Picture("7", "7"));
        pictures.add(new Picture("8", "8"));
        pictures.add(new Picture("8", "8"));
        Collections.shuffle(pictures);
        adapter.setUpPicture(pictures);
 
        binding.pictureLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                int width = binding.pictureViews.getWidth() / 4 - 10;
                int height = binding.pictureViews.getHeight() / 4 - 10;
                Log.e("width", String.valueOf(width));
                Log.e("height", String.valueOf(height));
                adapter.setLength(width, height);
                adapter.notifyDataSetChanged();
                Handler handler = new Handler();
                handler.postDelayed(FindTheSamePictureActivity.this::setCount3, 1000);
                binding.pictureLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
        });
 
    }
 
    RecyclerView.OnItemTouchListener onItemTouchListener = new RecyclerView.OnItemTouchListener() {
        @Override
        public boolean onInterceptTouchEvent(@NonNull RecyclerView recyclerView, @NonNull MotionEvent evt) {
            int action = evt.getAction();
            switch (action) {
                case MotionEvent.ACTION_UP:
                    View child = recyclerView.findChildViewUnder(evt.getX(), evt.getY());
                    assert child != null;
                    int pos = recyclerView.getChildAdapterPosition(child);
                    Log.e("pos", String.valueOf(pos));
                    View txtView = child.findViewById(R.id.pictureTxtView);
                    int check = pictures.get(pos).getCheck();
                    if(check == 1) {
                        txtView.animate()
                                .rotationYBy(180)
                                .rotationY(90)
                                .setDuration(200)
                                .setListener(new AnimatorListenerAdapter() {
                                    @Override
                                    public void onAnimationEnd(Animator animation) {
                                        txtView.animate()
                                                .rotationYBy(90)
                                                .rotationY(0)
                                                .setDuration(200)
                                                .setListener(new AnimatorListenerAdapter() {
                                                    @Override
                                                    public void onAnimationStart(Animator animation) {
                                                        txtView.setBackgroundColor(Color.WHITE);
                                                    }
 
                                                    @Override
                                                    public void onAnimationEnd(Animator animation) {
                                                        selectedPos.add(pos);
                                                        if (selectedPos.size() == 2) {
                                                            int pos1 = selectedPos.get(0);
                                                            int pos2 = selectedPos.get(1);
                                                            if(pos1 != pos2) {
                                                                String display = pictures.get(pos1).getDisplay();
                                                                String display2 = pictures.get(pos2).getDisplay();
                                                                Log.e("display1", display);
                                                                Log.e("display2", display2);
                                                                if (display.equals(display2)) {
                                                                    Toast.makeText(FindTheSamePictureActivity.this, "잘했습니다.", Toast.LENGTH_SHORT).show();
                                                                    adapter.update(pos1, 2);
                                                                    adapter.update(pos2, 2);
                                                                } else {
                                                                    adapter.update(pos1, 0);
                                                                    adapter.update(pos2, 0);
                                                                }
                                                            } else {
                                                                adapter.update(pos1, 0);
                                                            }
                                                            selectedPos.removeAllElements();
                                                            selectedPos.clear();
                                                        }
                                                    }
                                                })
                                                .start();
                                    }
                                })
                                .start();
                    }
                    break;
            }
            return false;
        }
 
        @Override
        public void onTouchEvent(@NonNull RecyclerView recyclerView, @NonNull MotionEvent motionEvent) {
 
        }
 
        @Override
        public void onRequestDisallowInterceptTouchEvent(boolean b) {
 
        }
    };
 
    private void setCount3() {
        binding.count3TxtView.setVisibility(View.VISIBLE);
        Handler handler = new Handler();
        handler.postDelayed(this::setCount2, 1000);
    }
    private void setCount2() {
        binding.count3TxtView.setVisibility(View.GONE);
        binding.count2TxtView.setVisibility(View.VISIBLE);
        Handler handler = new Handler();
        handler.postDelayed(this::setCount1, 1000);
 
    }
    private void setCount1() {
        binding.count2TxtView.setVisibility(View.GONE);
        binding.count1TxtView.setVisibility(View.VISIBLE);
        Handler handler = new Handler();
        handler.postDelayed(this::start, 1000);
 
    }
 
    private void start() {
        binding.count1TxtView.setVisibility(View.GONE);
        binding.startTxtView.setVisibility(View.VISIBLE);
        Handler handler = new Handler();
        handler.postDelayed(() -> {
            binding.startTxtView.setVisibility(View.GONE);
            binding.pictureViews.addOnItemTouchListener(onItemTouchListener);
            adapter.setStartAnimate(true);
        }, 1000);
 
    }
}
 
Colored by Color Scripter
cs

프로젝트는 github에 공유해놓았습니다.

https://github.com/Parksunggyun/FindTheSamePicture

텍스트 대신 이미지로 대체한 프로젝트

https://github.com/Parksunggyun/FindTheSamePicture/tree/useImage

두 프로젝트 중 원하는 것으로 사용하시면 되겠습니다.

재생 영상.

이상입니다. 감사합니다.

저작자표시 비영리 동일조건

'안드로이드' 카테고리의 다른 글

안드로이드 슬라이드 퍼즐 게임을 만들어 보았습니다. Android Slide puzzle game. (0)	2019.02.18
안드로이드 x축, y축 회전 애니메이션 구현하기. (0)	2019.02.14
안드로이드 코틀린 익스텐션 사용하기. how to use kotlin extension in Android (0)	2019.02.12
안드로이드 주간 달력을 만들어보자!! Android Week Calendar (10)	2019.02.12
안드로이드 커스텀뷰 만들기 android customView (0)	2019.02.07

현재글안드로이드 같은 그림 찾기 게임을 만들어 보았습니다. Android simple game - Find the same picture game

IOS를 Java

Kotlin,Java 를 위주로 하고 Flutter, iOS(Swift, Swift UI) 공부하며 포스팅하려는 알통몬입니다.

Flutter, Python, RxJava2, Android, 홍대맛집, C#, 안드로이드, kotlin, Stream, java, 스트림, 라즈베리파이, swift3, ios, 코틀린, MySQL, NIO, 파이썬, 자바, 스위프트3,

Today :
Yesterday :

IOS를 Java