視頻地址： Android美女拼圖小游戲

實現(xiàn)功能：

（1）多個難度

第一關(guān)3*3。

（2）倒計時

（3）圖片切分

（4）圖片位置變換

第一步：

在src下創(chuàng)建工具包com.imooc.game.utils，創(chuàng)建兩個工具類分別為ImagePiece.java和ImageSplitterUtil.java:

package com.imooc.game.utils;import android.graphics.Bitmap;/*** 用來存儲每一張圖片。圖片碎片* */
public class ImagePiece
{private int index ; // 當(dāng)前第幾塊private Bitmap bitmap ; // 指向當(dāng)前圖片public ImagePiece(){}public ImagePiece(int index, Bitmap bitmap){this.index = index;this.bitmap = bitmap;}public int getIndex(){return index;}public void setIndex(int index){this.index = index;}public Bitmap getBitmap(){return bitmap;}public void setBitmap(Bitmap bitmap){this.bitmap = bitmap;}/** 這個是每個類里可以重寫的。* */@Overridepublic String toString(){return "ImagePiece [index=" + index + ", bitmap=" + bitmap + "]";}}

package com.imooc.game.utils;import java.util.ArrayList;
import java.util.List;import android.graphics.Bitmap;public class ImageSplitterUtil
{/*** 傳入bitmap，切成piece*piece塊，返回的是這個List列表。* @param bitmap* @param piece	           * @return List<ImagePiece>*/public static List<ImagePiece> splitImage(Bitmap bitmap, int piece){List<ImagePiece> imagePieces = new ArrayList<ImagePiece>();// 獲取圖片寬高int width = bitmap.getWidth();int height = bitmap.getHeight();// 圖片應(yīng)該是方的，這是每一塊的寬度。int pieceWidth = Math.min(width, height) / piece;for (int i = 0; i < piece; i++){for (int j = 0; j < piece; j++){ImagePiece imagePiece = new ImagePiece();// i表示行，j表示列，得到的數(shù)字就是1，2，3，4，5，6，7。。。imagePiece.setIndex(j + i * piece);int x = j * pieceWidth;int y = i * pieceWidth;// 第二三個參數(shù)是頂點坐標，第四五個參數(shù)是寬高。imagePiece.setBitmap(Bitmap.createBitmap(bitmap, x, y,pieceWidth, pieceWidth));imagePieces.add(imagePiece);}}return imagePieces;}}

第二步：GamePintuLayout類：

package com.imooc.game.pintu.view;import java.util.Collections;
import java.util.Comparator;
import java.util.List;import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Handler;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Toast;import com.imooc.game.pintu.R;
import com.imooc.game.utils.ImagePiece;
import com.imooc.game.utils.ImageSplitterUtil;/** 用RelativeLayout比較容易控制位置。* **/
public class GamePintuLayout extends RelativeLayout implements OnClickListener
{// 默認3*3的碎片private int mColumn = 3;// 容器的內(nèi)邊距private int mPadding;// 每張小圖之間的距離，橫縱。dpprivate int mMargin = 3;// 每一張小圖位置上的那個viewprivate ImageView[] mGamePintuItems;// 每一張小圖的寬度。private int mItemWidth;// 游戲的圖片。private Bitmap mBitmap;// 存放所有的圖片碎片的list。private List<ImagePiece> mItemBitmaps;// 操作一次的標識。private boolean once;// 游戲面板的寬度，容器的寬度private int mWidth;private boolean isGameSuccess;private boolean isGameOver;// 設(shè)置接口通知MainActivity進行回調(diào)。這三個函數(shù)是在MainActivity中進行實現(xiàn)的。這里提供的只是一個接口。public interface GamePintuListener{void nextLevel(int nextLevel);void timechanged(int currentTime);void gameover();}// 接口成員變量。public GamePintuListener mListener;/*** 設(shè)置接口回調(diào)* * @param mListener*/public void setOnGamePintuListener(GamePintuListener mListener){this.mListener = mListener;}private int mLevel = 1;private static final int TIME_CHANGED = 0x110;private static final int NEXT_LEVEL = 0x111;/** 進行UI操作。* */private Handler mHandler = new Handler(){public void handleMessage(android.os.Message msg){switch (msg.what){case TIME_CHANGED:// 如果游戲成功、失敗、停止，停止計時。if (isGameSuccess || isGameOver || isPause)return;if (mListener != null){mListener.timechanged(mTime);}if (mTime == 0){isGameOver = true;mListener.gameover();return;}mTime--;// 每一秒發(fā)送一次減少。mHandler.sendEmptyMessageDelayed(TIME_CHANGED, 1000);break;case NEXT_LEVEL:mLevel = mLevel + 1;// 這個是判斷用戶是否選擇進行下一關(guān)。if (mListener != null){mListener.nextLevel(mLevel);} else{nextLevel();}break;}};};private boolean isTimeEnabled = false;private int mTime;/*** 設(shè)置是否開啟時間* * @param isTimeEnabled*/public void setTimeEnabled(boolean isTimeEnabled){this.isTimeEnabled = isTimeEnabled;}/** 第一個構(gòu)造方法調(diào)用第二個構(gòu)造方法。* */public GamePintuLayout(Context context){this(context, null);}/** 第二個構(gòu)造方法調(diào)用第三個構(gòu)造方法。* */public GamePintuLayout(Context context, AttributeSet attrs){this(context, attrs, 0);}/** 第三個構(gòu)造方法進行初始化。* */public GamePintuLayout(Context context, AttributeSet attrs, int defStyle){super(context, attrs, defStyle);init();}private void init(){/** 可以用TypedValue進行單位的轉(zhuǎn)換，將dp轉(zhuǎn)為px，或者將sp轉(zhuǎn)為px* 這樣也就把我們3dp轉(zhuǎn)化為3px的值。* 在布局當(dāng)中盡可能的所有的字體使用sp，所有的merage使用dp，一般不使用px，因為不同的屏幕上分辨率是不同的。* */mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,3, getResources().getDisplayMetrics());// 保證上下左右邊距相同的，取最小值mPadding = min(getPaddingLeft(), getPaddingRight(), getPaddingTop(),getPaddingBottom());}/** 設(shè)置當(dāng)前布局的大小* */@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);// 取容器寬高的最小值。mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());// 如果once沒有發(fā)生過。if (!once){// 進行切圖以及排序。initBitmap();// 設(shè)置ImageView（Item）的寬高等屬性。initItem();// 判斷是否開啟時間。checkTimeEnable();once = true;}// 重置它占據(jù)的位置是一個正方形。setMeasuredDimension(mWidth, mWidth);}/*** 判斷是否開啟時間。* */private void checkTimeEnable(){// 如果開啟了，if (isTimeEnabled){// 根據(jù)關(guān)卡設(shè)置時間長短。countTimeBaseLevel();// 通知主界面顯示時間。mHandler.sendEmptyMessage(TIME_CHANGED);}}// 根據(jù)關(guān)卡設(shè)置時間長短。private void countTimeBaseLevel(){// 用pow可以根據(jù)游戲難度增加時間，2的mLevel次，指數(shù)增長。mTime = (int) Math.pow(2, mLevel) * 60;}/*** 進行切圖，已經(jīng)排序。*/private void initBitmap(){if (mBitmap == null){// 獲取Bitmap圖片對象mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.image);}// 進行切割后返回ImagePiece的List。mItemBitmaps = ImageSplitterUtil.splitImage(mBitmap, mColumn);// 使用sort亂序排序圖片。重寫compare方法。Collections.sort(mItemBitmaps, new Comparator<ImagePiece>(){@Overridepublic int compare(ImagePiece a, ImagePiece b){// 使用隨機數(shù)。return Math.random() > 0.5 ? 1 : -1;}});}/*** 設(shè)置ImageView(Item)的寬高等屬性。*/private void initItem(){// 獲取item寬度。（容器寬度-最左右的空隙-中間圖片之間的空隙）/ 一行Item的數(shù)目。mItemWidth = (mWidth - mPadding * 2 - mMargin * (mColumn - 1))/ mColumn;// 這個大小是隨程序的mColumn動態(tài)創(chuàng)建的。多個ImageView。mGamePintuItems = new ImageView[mColumn * mColumn];// 生成Item，設(shè)置Rule。for (int i = 0; i < mGamePintuItems.length; i++){// 生產(chǎn)一個一個的ImageView。mItemBitmaps是bitmap的ListImageView item = new ImageView(getContext());item.setOnClickListener(this);item.setImageBitmap(mItemBitmaps.get(i).getBitmap());mGamePintuItems[i] = item;item.setId(i + 1);// 在item的tag中存儲了index，index存儲的是真正的順序。item.setTag(i + "_" + mItemBitmaps.get(i).getIndex());/*** 排列順序* 0 1 2 3* 4 5 6 7* 8 9 10 11* */RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(mItemWidth, mItemWidth);// 不是最后一列的列設(shè)置右邊距，通過rightMarginif ((i + 1) % mColumn != 0){lp.rightMargin = mMargin;}// 不是第一列if (i % mColumn != 0){// 就是設(shè)置它是在誰的右邊排列，1 rightof 0lp.addRule(RelativeLayout.RIGHT_OF,mGamePintuItems[i - 1].getId());}// 如果不是第一行，就要設(shè)置上邊距，同時要設(shè)置它在誰的下面。if ((i + 1) > mColumn){lp.topMargin = mMargin;lp.addRule(RelativeLayout.BELOW,mGamePintuItems[i - mColumn].getId());}// 給這個item設(shè)置它的參數(shù)。addView(item, lp);}// for}public void restart(){isGameOver = false;mColumn--;nextLevel();}private boolean isPause ; public void pause(){isPause = true ; mHandler.removeMessages(TIME_CHANGED);}public void resume(){if(isPause){isPause = false ;mHandler.sendEmptyMessage(TIME_CHANGED);}}/*** 下一關(guān)要做的事。* */public void nextLevel(){// 取消當(dāng)前容器中的所有viewthis.removeAllViews();// 取消動畫層mAnimLayout = null;// 圖片碎片變復(fù)雜。mColumn++;isGameSuccess = false;checkTimeEnable();// 重新顯示新的圖片。initBitmap();initItem();}/*** 取多個參數(shù)的最小值。*/private int min(int... params){int min = params[0];for (int param : params){if (param < min)min = param;}return min;}// 兩個被點擊的圖片。private ImageView mFirst;private ImageView mSecond;@Overridepublic void onClick(View v){if (isAniming)return;// 如果兩次點擊了相同的圖片，代表取消第一個點擊，也就去掉點中狀態(tài)。if (mFirst == v){mFirst.setColorFilter(null);mFirst = null;return;}// 如果第一張null，說明此時點的這張圖片是第一張圖片，否則是第二張圖片。if (mFirst == null){mFirst = (ImageView) v;// 點中后有一個被點中的狀態(tài)，這里設(shè)置透明的紅色。55代表透明度，后面是八位顏色。mFirst.setColorFilter(Color.parseColor("#55FF0000"));} else{mSecond = (ImageView) v;// 交換item。exchangeView();}}/*** 動畫層*/private RelativeLayout mAnimLayout;// 正在動畫的時候，就不讓用戶亂點一通。private boolean isAniming;/*** 交換item*/private void exchangeView(){// 先去掉點中狀態(tài)。mFirst.setColorFilter(null);// 準備動畫層setUpAnimLayout();// 復(fù)制我們點中的圖片。ImageView first = new ImageView(getContext());// mItemBitmaps是存放所有的圖片碎片的list，它是被亂序排過的。final Bitmap firstBitmap = mItemBitmaps.get(getImageIdByTag((String) mFirst.getTag())).getBitmap();first.setImageBitmap(firstBitmap);// 要看看是不是RelativeLayout的LayoutParam，或者就是直接寫出Relative前綴來。LayoutParams lp = new LayoutParams(mItemWidth, mItemWidth);// 減去mPadding是因為，對于底下原本的那層，它的左邊是有邊距的，// 而對于上面的動畫層，它的整個大小是沒有覆蓋下面的邊距的，這樣它里面的元素也就不需要考慮下面的它說擁有的paddinglp.leftMargin = mFirst.getLeft() - mPadding;lp.topMargin = mFirst.getTop() - mPadding;first.setLayoutParams(lp);// 加到動畫層中。mAnimLayout.addView(first);// 復(fù)制我們點中的第二張圖片。ImageView second = new ImageView(getContext());final Bitmap secondBitmap = mItemBitmaps.get(getImageIdByTag((String) mSecond.getTag())).getBitmap();second.setImageBitmap(secondBitmap);LayoutParams lp2 = new LayoutParams(mItemWidth, mItemWidth);lp2.leftMargin = mSecond.getLeft() - mPadding;lp2.topMargin = mSecond.getTop() - mPadding;second.setLayoutParams(lp2);mAnimLayout.addView(second);// 設(shè)置動畫用這個TranslateAnimation。TranslateAnimation anim = new TranslateAnimation(0, mSecond.getLeft()- mFirst.getLeft(), 0, mSecond.getTop() - mFirst.getTop());// 動畫時間anim.setDuration(300);// 這個很關(guān)鍵。anim.setFillAfter(true);// 啟動動畫first.startAnimation(anim);TranslateAnimation animSecond = new TranslateAnimation(0,-mSecond.getLeft() + mFirst.getLeft(), 0, -mSecond.getTop()+ mFirst.getTop());animSecond.setDuration(300);animSecond.setFillAfter(true);second.startAnimation(animSecond);// 監(jiān)聽動畫anim.setAnimationListener(new AnimationListener(){@Overridepublic void onAnimationStart(Animation animation){// 先把下面的那兩個隱藏。mFirst.setVisibility(View.INVISIBLE);mSecond.setVisibility(View.INVISIBLE);isAniming = true;}@Overridepublic void onAnimationRepeat(Animation animation){// TODO Auto-generated method stub}@Overridepublic void onAnimationEnd(Animation animation){String firstTag = (String) mFirst.getTag();String secondTag = (String) mSecond.getTag();// 交換bitmap和tagmFirst.setImageBitmap(secondBitmap);mSecond.setImageBitmap(firstBitmap);mFirst.setTag(secondTag);mSecond.setTag(firstTag);// 結(jié)束的時候再把下面的兩個圖片顯示出來。mFirst.setVisibility(View.VISIBLE);mSecond.setVisibility(View.VISIBLE);mFirst = mSecond = null;// 最后把動畫層的東西都消掉mAnimLayout.removeAllViews();// 判斷用戶游戲是否成功checkSuccess();isAniming = false;}});}/*** 判斷用戶游戲是否成功*/private void checkSuccess(){boolean isSuccess = true;for (int i = 0; i < mGamePintuItems.length; i++){ImageView imageView = mGamePintuItems[i];if (getImageIndexByTag((String) imageView.getTag()) != i){isSuccess = false;}}if (isSuccess){// 當(dāng)前一次游戲結(jié)束以后，把上一次的Handler動作取消掉。isGameSuccess = true;mHandler.removeMessages(TIME_CHANGED);Toast.makeText(getContext(), "Success，level up !!!",Toast.LENGTH_LONG).show();mHandler.sendEmptyMessage(NEXT_LEVEL);}}/*** 通過tag獲取image的id，也就是當(dāng)初設(shè)置的亂排序以后對應(yīng)的i值。* tag中包含i和index，split[0]就是i。* @param tag* @return*/public int getImageIdByTag(String tag){String[] split = tag.split("_");return Integer.parseInt(split[0]);}/*** 根據(jù)tag獲取index。* */public int getImageIndexByTag(String tag){String[] split = tag.split("_");return Integer.parseInt(split[1]);}/*** 構(gòu)造動畫層。*/private void setUpAnimLayout(){if (mAnimLayout == null){mAnimLayout = new RelativeLayout(getContext());// 加到面板之中。addView(mAnimLayout);}}}

第三步:

package com.imooc.game.pintu;import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.os.Bundle;
import android.widget.TextView;import com.imooc.game.pintu.view.GamePintuLayout;
import com.imooc.game.pintu.view.GamePintuLayout.GamePintuListener;public class MainActivity extends Activity
{private GamePintuLayout mGamePintuLayout;private TextView mLevel ; private TextView mTime;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mTime = (TextView) findViewById(R.id.id_time);mLevel = (TextView) findViewById(R.id.id_level);mGamePintuLayout = (GamePintuLayout) findViewById(R.id.id_gamepintu);// 這個這個mGamePintuLayout.setTimeEnabled(true);// 哇，這個是我們自己寫的。mGamePintuLayout.setOnGamePintuListener(new GamePintuListener(){@Overridepublic void timechanged(int currentTime){// 轉(zhuǎn)為字符串的形式mTime.setText(""+currentTime);}@Overridepublic void nextLevel(final int nextLevel){// 到下一關(guān)的時候彈出dialog框讓用戶選擇是否進行下一關(guān)。new AlertDialog.Builder(MainActivity.this).setTitle("Game Info").setMessage("LEVEL UP !!!").setPositiveButton("NEXT LEVEL", new OnClickListener(){@Overridepublic void onClick(DialogInterface dialog,int which){mGamePintuLayout.nextLevel();// 轉(zhuǎn)為字符串的形式。mLevel.setText(""+nextLevel);}}).show();}@Overridepublic void gameover(){new AlertDialog.Builder(MainActivity.this).setTitle("Game Info").setMessage("Game over !!!").setPositiveButton("RESTART", new OnClickListener(){@Overridepublic void onClick(DialogInterface dialog,int which){mGamePintuLayout.restart();}}).setNegativeButton("QUIT",new OnClickListener(){@Overridepublic void onClick(DialogInterface dialog, int which){finish();}}).show();}});}@Overrideprotected void onPause(){super.onPause();mGamePintuLayout.pause();}@Overrideprotected void onResume(){super.onResume();mGamePintuLayout.resume();}}

第四步：activity_main.xml布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent" ><com.imooc.game.pintu.view.GamePintuLayoutandroid:id="@+id/id_gamepintu"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_centerInParent="true"android:padding="3dp" /><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_above="@id/id_gamepintu"android:layout_margin="3dp" ><TextViewandroid:id="@+id/id_level"android:layout_width="70dp"android:layout_height="70dp"android:background="@drawable/textbg"android:gravity="center"android:padding="4dp"android:text="1"android:textColor="#EA7821"android:textSize="30sp"android:textStyle="bold" /><TextViewandroid:id="@+id/id_time"android:layout_width="70dp"android:layout_height="70dp"android:layout_alignParentRight="true"android:background="@drawable/textbg"android:gravity="center"android:padding="4dp"android:text="120"android:textColor="#EA7821"android:textSize="30sp"android:textStyle="bold" /></RelativeLayout></RelativeLayout>

其中的textbg.xml文件放在drawable文件下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval" ><strokeandroid:width="2px"android:color="#1579DB" /><solid android:color="#B4CDE6" /></shape>

總結(jié)

以上是生活随笔為你收集整理的Android案例（1）——美女拼图小游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。