Android美女拼圖游戲開發

　　概述

　　• 游戲下載試玩

　　• 把圖片切分很多份，點擊交換拼成一張完整的；這樣關卡也很容易設計，3*3；4*4；5*5；6*6；一直下去

　　• 效果

　　• 加了個切換動畫，效果還是不錯的，其實游戲就是自定義了一個控件，下面我們開始自定義之旅

　　游戲的設計

　　首先我們分析下如何設計這款游戲：

　　1.我們需要一個容器，可以放這些圖片的塊塊，為了方便，我們准備使用RelativeLayout配合addRule實現

　　2.每個圖片的塊塊，我們准備使用ImageView

　　3.點擊交換，我們准備使用傳統的TranslationAnimation來實現

　　有了初步的設計，感覺這游戲so easy~

　　游戲布局的實現

　　首先，我們准備實現能夠把一張圖片，切成n*n份，放在指定的位置；

　　我們只需要設置n這個數字，然後根據布局的寬或者高其中的小值，除以n，減去一些邊距就可以得到我們ImageView的寬和高了~~

　　構造方法

Java代碼

1. /**  
2.      * 設置Item的數量n*n；默認為3  
3.      */    
4.     private int mColumn = 3;    
5.     /**  
6.      * 布局的寬度  
7.      */    
8.     private int mWidth;    
9.     /**  
10.      * 布局的padding  
11.      */    
12.     private int mPadding;    
13.     /**  
14.      * 存放所有的Item  
15.      */    
16.     private ImageView[] mGamePintuItems;    
17.     /**  
18.      * Item的寬度  
19.      */    
20.     private int mItemWidth;    
21.   
22.     /**  
23.      * Item橫向與縱向的邊距  
24.      */    
25.     private int mMargin = 3;    
26.   
27.     /**  
28.      * 拼圖的圖片  
29.      */    
30.     private Bitmap mBitmap;    
31.     /**  
32.      * 存放切完以後的圖片bean  
33.      */    
34.     private List<ImagePiece> mItemBitmaps;    
35.   
36.     private boolean once;    
37.   
38.     public GamePintuLayout(Context context)  {    
39.         this(context, null);    
40.     }    
41.   
42.     public GamePintuLayout(Context context, AttributeSet attrs)  {    
43.         this(context, attrs, 0);    
44.     }    
45.   
46.   /** 
47.      * 構造函數，用來初始化 
48.      * @param context  the context 
49.      * @param attrs    the attrs 
50.      * @param defStyle the def style 
51.      * @author qiu  博客：www.qiuchengjia.cn 時間：2016-09-12 
52.      */  
53.     public GamePintuLayout(Context context, AttributeSet attrs, int defStyle)  {    
54.         super(context, attrs, defStyle);    
55.   
56.    //把設置的margin值轉換為dp  
57.         mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,    
58.                 mMargin, getResources().getDisplayMetrics());    
59.         // 設置Layout的內邊距，四邊一致，設置為四內邊距中的最小值    
60.         mPadding = min(getPaddingLeft(), getPaddingTop(), getPaddingRight(),    
61.                 getPaddingBottom());    
62.     }

　　• 構造方法裡面，我們得到把設置的margin值轉化為dp；獲得布局的padding值；整體是個正方形，所以我們取padding四個方向中的最小值；

　　至於margin，作為Item之間的橫向與縱向的間距，你喜歡的話可以抽取為自定義屬性~~

　　onMeasure

Java代碼

1. /** 
2. * 用來設置設置自定義的View的寬高， 
3. * @param widthMeasureSpec  the width measure spec 
4. * @param heightMeasureSpec the height measure spec 
5. */  
6. @Override    
7. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  {    
8.    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    
9.   
10.    // 獲得游戲布局的邊長    
11.    mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());    
12.   
13.    if (!once)  {    
14.        initBitmap();    
15.        initItem();    
16.    }    
17.    once = true;    
18.    setMeasuredDimension(mWidth, mWidth);    

　　• onMeasure裡面主要就是獲得到布局的寬度，然後進行圖片的准備，以及初始化我們的Item，為Item設置寬度和高度

　　• initBitmap自然就是准備圖片了：

Java代碼

1. /** 
2.   * 初始化bitmap 
3.   */  
4. private void initBitmap()  {    
5.         if (mBitmap == null)    
6.             mBitmap = BitmapFactory.decodeResource(getResources(),    
7.                     R.drawable.aa);    
8.   
9.         mItemBitmaps = ImageSplitter.split(mBitmap, mColumn);    
10.   
11.    //對圖片進行排序  
12.         Collections.sort(mItemBitmaps, new Comparator<ImagePiece>(){    
13.             @Override    
14.             public int compare(ImagePiece lhs, ImagePiece rhs){    
15.             //我們使用random隨機比較大小  
16.                 return Math.random() > 0.5 ? 1 : -1;    
17.             }    
18.         });    
19.     }    

　　• 我們這裡如果沒有設置mBitmap就准備一張備用圖片，然後調用ImageSplitter.split將圖片切成n * n 返回一個List

　　切完以後，我們需要將順序打亂，所以我們調用了sort方法，至於比較器，我們使用random隨機比較大小，這樣我們就完成了我們的亂序操作，贊不贊~~

Java代碼

1. /** 
2.  * Description: 圖片切片類 
3.  * Data：2016/9/11-19:53 
4.  * Author: qiu 
5.  */  
6. public class ImageSplitter  {    
7.     /**  
8.      * 將圖片切成 , piece *piece  
9.      * @param bitmap  
10.      * @param piece  
11.      * @return  
12.      */    
13.     public static List<ImagePiece> split(Bitmap bitmap, int piece){    
14.   
15.         List<ImagePiece> pieces = new ArrayList<ImagePiece>(piece * piece);    
16.   
17.         int width = bitmap.getWidth();    
18.         int height = bitmap.getHeight();    
19.   
20.         Log.e("TAG", "bitmap Width = " + width + " , height = " + height);    
21.         int pieceWidth = Math.min(width, height) / piece;    
22.   
23.         for (int i = 0; i < piece; i++){    
24.             for (int j = 0; j < piece; j++){    
25.                 ImagePiece imagePiece = new ImagePiece();    
26.                 imagePiece.index = j + i * piece;    
27.                 int xValue = j * pieceWidth;    
28.                 int yValue = i * pieceWidth;    
29.   
30.                 imagePiece.bitmap = Bitmap.createBitmap(bitmap, xValue, yValue,    
31.                         pieceWidth, pieceWidth);    
32.                 pieces.add(imagePiece);    
33.             }    
34.         }    
35.         return pieces;    
36.     }    
37. }    

Java代碼

1. /** 
2.  * Description: 圖片bean 
3.  * Data：2016/9/11-19:54 
4.  * Author: qiu 
5.  */  
6. public class ImagePiece    
7. {    
8.     public int index = 0;    
9.     public Bitmap bitmap = null;    
10. }    

　　• 沒撒說的就是一個根據寬度高度，和n，來切圖保存的過程~~

　　ImagePiece保存的圖片以及索引，話說這兩個類還是我無意中在網上發現的~~

　　圖片到此就准備好了，現在看Item的生成已經設置寬高，即initItems

Java代碼

1.  /** 
2.    * 初始化每一個item 
3.    * @author qiu  博客：www.qiuchengjia.cn 時間：2016-09-12 
4.    */  
5. private void initItem()  {    
6.         // 獲得Item的寬度    
7.         int childWidth = (mWidth - mPadding * 2 - mMargin *   
8.         (mColumn - 1)) / mColumn;    
9.         mItemWidth = childWidth;    
10.   
11.         mGamePintuItems = new ImageView[mColumn * mColumn];    
12.         // 放置Item    
13.         for (int i = 0; i < mGamePintuItems.length; i++) {    
14.             ImageView item = new ImageView(getContext());    
15.   
16.             item.setOnClickListener(this);    
17.   
18.             item.setImageBitmap(mItemBitmaps.get(i).bitmap);    
19.             mGamePintuItems[i] = item;    
20.             item.setId(i + 1);    
21.             item.setTag(i + "_" + mItemBitmaps.get(i).index);    
22.   
23.             RelativeLayout.LayoutParams lp =  
24.                 new LayoutParams(mItemWidth,    
25.                     mItemWidth);    
26.             // 設置橫向邊距,不是最後一列    
27.             if ((i + 1) % mColumn != 0)  {    
28.                 lp.rightMargin = mMargin;    
29.             }    
30.             // 如果不是第一列    
31.             if (i % mColumn != 0)  {    
32.                 lp.addRule(RelativeLayout.RIGHT_OF,//    
33.                         mGamePintuItems[i - 1].getId());    
34.             }    
35.             // 如果不是第一行，//設置縱向邊距，非最後一行    
36.             if ((i + 1) > mColumn)  {    
37.                 lp.topMargin = mMargin;    
38.                 lp.addRule(RelativeLayout.BELOW,//    
39.                         mGamePintuItems[i - mColumn].getId());    
40.             }    
41.             addView(item, lp);    
42.         }    
43.     }    

　　• 可以看到我們的Item寬的計算：childWidth = (mWidth - mPadding * 2 - mMargin * (mColumn - 1) ) / mColumn;

　　容器的寬度，除去自己的內邊距，除去Item間的間距，然後除以Item一行的個數就得到了Item的寬~~

　　接下來，就是遍歷生成Item，根據他們的位置設置Rule，自己仔細看下注釋~~

　　注意兩點：

　　• 我們為Item設置了setOnClickListener，這個當然，因為我們的游戲就是點Item麼~

　　• 還有我們為Item設置了Tag：item.setTag(i + “_” + mItemBitmaps.get(i).index);

　　tag裡面存放了index，也就是正確的位置；還有i，i 可以幫助我們在mItemBitmaps找到當前的Item的圖片：（mItemBitmaps.get(i).bitmap）

　　• 到此，我們游戲的布局的代碼就結束了~~~

　　• 然後我們在布局文件裡面聲明下：

XML/HTML代碼

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" >  
5.   
6.     <game.qiu.com.beautygame.GamePintuLayout  
7.         android:id="@+id/id_gameview"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:layout_centerInParent="true"  
11.         android:padding="5dp" >  
12.     </game.qiu.com.beautygame.GamePintuLayout>  
13.   
14. </RelativeLayout>  

　　• Activity裡面記得設置這個布局~~

　　• 現在的效果是：

　　游戲的切換效果

　　初步的切換

　　• 還記得我們都給Item添加了onClick的監聽麼~~

　　現在我們需要實現，點擊兩個Item，他們的圖片能夠發生交換~

　　那麼，我們需要兩個成員變量來存儲這兩個Item，然後再去交換

Java代碼

1. /** 
2.   * 記錄第一次點擊的ImageView 
3.   */  
4. private ImageView mFirst;    
5. /** 
6.   * 記錄第二次點擊的ImageView 
7.   */  
8. private ImageView mSecond;    
9. /** 
10.   * 點擊事件 
11.   * @param view the view 
12.   * @author qiu  博客：www.qiuchengjia.cn 時間：2016-09-12 
13.   */    
14. @Override    
15. public void onClick(View v)  {    
16.     /**  
17.      * 如果兩次點擊是同一個  
18.      */    
19.     if (mFirst == v)  {    
20.         mFirst.setColorFilter(null);    
21.         mFirst = null;    
22.         return;    
23.     }    
24.     //點擊第一個Item    
25.     if (mFirst == null)  {    
26.         mFirst = (ImageView) v;    
27.         mFirst.setColorFilter(Color.parseColor("#55FF0000"));    
28.     } else//點擊第二個Item    
29.     {    
30.         mSecond = (ImageView) v;    
31.         exchangeView();    
32.     }    
33.   
34. }    

　　• 點擊第一個，通過setColorFilter設置下選中效果，再次點擊另一個，那我們就准備調用exchangeView進行交換圖片了，當然這個方法我們還沒寫，先放著~

　　如果兩次點擊同一個，去除選中效果，我們就當什麼都沒發生

　　• 接下來，我們來實現exchangeView：

Java代碼

1. /** 
2.   * 交換兩個Item圖片  
3.   * @author qiu  博客：www.qiuchengjia.cn 時間：2016-09-12 
4.   */  
5.  private void exchangeView()  {    
6.   
7.         mFirst.setColorFilter(null);    
8.         String firstTag = (String) mFirst.getTag();    
9.         String secondTag = (String) mSecond.getTag();    
10.   
11.         //得到在list中索引位置    
12.         String[] firstImageIndex = firstTag.split("_");    
13.         String[] secondImageIndex = secondTag.split("_");    
14.   
15.         mFirst.setImageBitmap(mItemBitmaps.get(Integer    
16.                 .parseInt(secondImageIndex[0])).bitmap);    
17.         mSecond.setImageBitmap(mItemBitmaps.get(Integer    
18.                 .parseInt(firstImageIndex[0])).bitmap);    
19.   
20.         mFirst.setTag(secondTag);    
21.         mSecond.setTag(firstTag);    
22.   
23.         mFirst = mSecond = null;    
24.   
25.  }    

　　• 應該還記得我們之前的setTag吧，忘了，返回去看看，我們還說注意來著~

　　通過getTag，拿到在List中是索引，然後得到bitmap進行交換設置，最後交換tag；

　　到此我們的交換效果寫完了，我們的游戲可以完了~~效果是這樣的：

　　• 可以看到我們已經可以玩了，至於為什麼不用清爽的風景圖，是因為，實在是看不出來那塊對那塊，還是妹子直觀~

　　大家肯定會吐槽，我擦，動畫切換呢，明明不是兩個飛過去交換位置麼，尼瑪這算什麼

　　也是，對與程序我們要有追求，下面我們來添加動畫切換效果~~

　　無縫的動畫切換

　　• 我們先聊聊怎麼添加，我准備使用TranslationAnimation，然後兩個Item的top，left也很容器獲取；

　　但是，要明白，我們實際上，Item只是setImage發生了變化，Item的位置沒有變；

　　我們現在需要動畫移動效果，比如A移動到B，沒問題，移動完成以後，Item得回去吧，但是圖片並沒有發生變化，我們還是需要手動setImage

　　這樣造成了一個現象，動畫切換效果有了，但是最後還是會有一閃，是我們切換圖片造成的；

　　為了避免上述現象，能夠完美的做到切換效果，這裡我們引入一個動畫圖層，專門做動畫效果，有點類似ps的圖層，下面看我們怎麼做；

Java代碼

1. /**  
2.   * 動畫運行的標志位  
3.   */    
4. private boolean isAniming;    
5. /**  
6.   * 動畫層  
7.   */    
8. private RelativeLayout mAnimLayout;    
9.   
10. /** 
11.   * 交換兩個Item圖片 
12.   * @author qiu  博客：www.qiuchengjia.cn 時間：2016-09-12 
13.   */  
14. private void exchangeView(){    
15.         mFirst.setColorFilter(null);    
16.         setUpAnimLayout();    
17.         // 添加FirstView    
18.         ImageView first = new ImageView(getContext());    
19.         first.setImageBitmap(mItemBitmaps    
20.                 .get(getImageIndexByTag((String) mFirst.getTag())).bitmap);    
21.         LayoutParams lp = new LayoutParams(mItemWidth, mItemWidth);    
22.         lp.leftMargin = mFirst.getLeft() - mPadding;    
23.         lp.topMargin = mFirst.getTop() - mPadding;    
24.         first.setLayoutParams(lp);    
25.         mAnimLayout.addView(first);    
26.         // 添加SecondView    
27.         ImageView second = new ImageView(getContext());    
28.         second.setImageBitmap(mItemBitmaps    
29.                 .get(getImageIndexByTag((String) mSecond.getTag())).bitmap);    
30.         LayoutParams lp2 = new LayoutParams(mItemWidth, mItemWidth);    
31.         lp2.leftMargin = mSecond.getLeft() - mPadding;    
32.         lp2.topMargin = mSecond.getTop() - mPadding;    
33.         second.setLayoutParams(lp2);    
34.         mAnimLayout.addView(second);    
35.   
36.         // 設置動畫    
37.         TranslateAnimation anim = new TranslateAnimation(0, mSecond.getLeft()    
38.                 - mFirst.getLeft(), 0, mSecond.getTop() - mFirst.getTop());    
39.         anim.setDuration(300);    
40.         anim.setFillAfter(true);    
41.         first.startAnimation(anim);    
42.   
43.         TranslateAnimation animSecond = new TranslateAnimation(0,    
44.                 mFirst.getLeft() - mSecond.getLeft(), 0, mFirst.getTop()    
45.                         - mSecond.getTop());    
46.         animSecond.setDuration(300);    
47.         animSecond.setFillAfter(true);    
48.         second.startAnimation(animSecond);    
49.         // 添加動畫監聽    
50.         anim.setAnimationListener(new AnimationListener(){    
51.   
52.             @Override    
53.             public void onAnimationStart(Animation animation){    
54.                 isAniming = true;    
55.                 mFirst.setVisibility(INVISIBLE);    
56.                 mSecond.setVisibility(INVISIBLE);    
57.             }    
58.   
59.             @Override    
60.             public void onAnimationRepeat(Animation animation){    
61.   
62.             }    
63.   
64.             @Override    
65.             public void onAnimationEnd(Animation animation){    
66.                 String firstTag = (String) mFirst.getTag();    
67.                 String secondTag = (String) mSecond.getTag();    
68.   
69.                 String[] firstParams = firstTag.split("_");    
70.                 String[] secondParams = secondTag.split("_");    
71.   
72.                 mFirst.setImageBitmap(mItemBitmaps.get(Integer    
73.                         .parseInt(secondParams[0])).bitmap);    
74.                 mSecond.setImageBitmap(mItemBitmaps.get(Integer    
75.                         .parseInt(firstParams[0])).bitmap);    
76.   
77.                 mFirst.setTag(secondTag);    
78.                 mSecond.setTag(firstTag);    
79.                 mFirst.setVisibility(VISIBLE);    
80.                 mSecond.setVisibility(VISIBLE);    
81.                 mFirst = mSecond = null;    
82.                 mAnimLayout.removeAllViews();    
83.                                 //checkSuccess();    
84.                 isAniming = false;    
85.             }    
86.         });    
87.   
88.     }    
89.   
90.     /**  
91.      * 創建動畫層  
92.      */    
93.     private void setUpAnimLayout(){    
94.         if (mAnimLayout == null){    
95.             mAnimLayout = new RelativeLayout(getContext());    
96.             addView(mAnimLayout);    
97.         }    
98.   
99.     }    
100.   
101.     private int getImageIndexByTag(String tag){    
102.         String[] split = tag.split("_");    
103.         return Integer.parseInt(split[0]);    
104.   
105.     }    

　　• 開始交換時，我們創建一個動畫層，然後在這一層上添加上兩個一模一樣的Item，把原來的Item隱藏了，然後盡情的進行動畫切換，setFillAfter為true~

　　動畫完畢，我們已經悄悄的把Item的圖片交換了，直接顯示出來。這樣就完美的切換了：

　　大致過程：

　　1.A ，B隱藏

　　2.A副本動畫移動到B的位置；B副本移動到A的位置

　　3.A把圖片設置為B，把B副本移除，A顯示，這樣就完美切合了，用戶感覺是B移動過去的

　　4.B同上

　　• 現在我們的效果：

　　• 現在效果滿意了把~~為了防止用戶狂點，在onClick裡面添加一句：

Java代碼

1. @Override    
2. public void onClick(View v)    
3. {    
4.     // 如果正在執行動畫，則屏蔽    
5.     if (isAniming)    
6.         return;    

　　• 到此我們的動畫的切換，已經完美結束了~~

　　切換時，我們是不是應該判斷是否成功了~~

　　游戲勝利的判斷

　　• 我們在切換完成，進行checkSuccess();的判斷；好在我們把圖片的正確的順序存在tag裡面~~

Java代碼

1. /** 
2.   * 用來判斷游戲是否成功 
3.   * @author qiu  博客：www.qiuchengjia.cn 時間：2016-09-12 
4.   */  
5. private void checkSuccess(){    
6.         boolean isSuccess = true;    
7.         for (int i = 0; i < mGamePintuItems.length; i++){    
8.             ImageView first = mGamePintuItems[i];    
9.             Log.e("TAG", getIndexByTag((String) first.getTag()) + "");    
10.             if (getIndexByTag((String) first.getTag()) != i){    
11.                 isSuccess = false;    
12.             }    
13.         }    
14.   
15.         if (isSuccess){    
16.             Toast.makeText(getContext(), "Success , Level Up !",    
17.                     Toast.LENGTH_LONG).show();    
18.             // nextLevel();    
19.         }    
20.     }    
21.   
22.     /**  
23.      * 獲得圖片的真正索引  
24.      * @param tag  
25.      * @return  
26.      */    
27.     private int getIndexByTag(String tag){    
28.         String[] split = tag.split("_");    
29.         return Integer.parseInt(split[1]);    
30.     }    

　　• 很簡單，遍歷所有的Item，根據Tag拿到真正的索引和當然順序比較，完全一致則勝利~~勝利以後進入下一關

　　• 至於下一關的代碼：

Java代碼

1. public void nextLevel(){    
2.         this.removeAllViews();    
3.         mAnimLayout = null;    
4.         mColumn++;    
5.         initBitmap();    
6.         initItem();    
7.     }    

　　總結

　　• ok，到此我們的游戲結束了，我來帶大家闖個關：

　　源碼下載

　　• 傳送門