一、需求描述
拼圖是一款益智類經(jīng)典游戲了，本游戲?qū)W習(xí)了一些前輩們的經(jīng)驗(yàn)，整體來說講，將圖片用切圖工具進(jìn)行切割，監(jiān)聽用戶手指滑動(dòng)事件，當(dāng)用戶對(duì)凌亂的圖片，在一定的時(shí)間內(nèi)拼湊恢復(fù)成原來的樣子，則成功闖關(guān)。 根據(jù)游戲不同的關(guān)卡對(duì)圖片進(jìn)行動(dòng)態(tài)的切割。玩家可以在隨意交換任意兩張圖片，通過遍歷切割好的每塊圖片，將用戶選中的圖片，進(jìn)行替換；
其中主要的功能為：
二、主要功能分析
在拼圖游戲開發(fā)過程中，實(shí)現(xiàn)的主要的功能;提供給用戶所使用，具體功能分析如下所示：
1、編寫切片工具：由于拼圖游戲需要準(zhǔn)備一個(gè)完整的圖片，從直觀上來看，我們不能每次都將一個(gè)完整的圖片進(jìn)行分割，如果是3*3，分成9塊，4*4分成16份，這樣帶來的圖片資源極大的混亂，不利于后期的維護(hù)，然后Andorid就提供了具體的方法來實(shí)現(xiàn)對(duì)特定圖片的切圖工具，通過傳入的參數(shù)的不同，對(duì)圖片分割成所需要的矩陣，并設(shè)置每塊的寬高。利用兩個(gè)for循環(huán)進(jìn)行切圖。并設(shè)置每塊圖片的大小位置和每塊圖片的塊號(hào)下標(biāo)Index。
2、自定義容器：自定義相對(duì)布局文件，用來存放切割好的圖片，并設(shè)置圖片之間的間隙，以及確定圖片上下左右的關(guān)系。以及設(shè)置圖片與容器的內(nèi)邊距設(shè)置。
3、實(shí)現(xiàn)圖片交換：實(shí)現(xiàn)手指的監(jiān)聽事件，將對(duì)選中的兩張圖片進(jìn)行位置的變換。
4、實(shí)現(xiàn)交換圖片的動(dòng)畫效果：構(gòu)造動(dòng)畫層，設(shè)置動(dòng)畫，監(jiān)聽動(dòng)畫
5、實(shí)現(xiàn)游戲過關(guān)邏輯：成功的判斷，關(guān)卡的回調(diào)。
6、實(shí)現(xiàn)游戲時(shí)間邏輯：游戲時(shí)間的更新，以及Handler不斷的回調(diào)，時(shí)間超時(shí)后游戲狀態(tài)的處理，以及成功闖關(guān)后，游戲時(shí)間的變更。
7、游戲的結(jié)束與暫停：當(dāng)用戶返回主頁(yè)面的時(shí)候，游戲能夠暫停，當(dāng)用戶返回游戲的時(shí)候，游戲可以重新開始。
三、概要設(shè)計(jì)
1、**切圖工具類**ImagePiece和ImageSplitterUtil。其中ImagePiece對(duì)Bitmap圖片的塊號(hào)與每一塊圖片的位置進(jìn)行屬性的基本設(shè)置；在切圖工具類ImageSplitterUtil中，提供一個(gè)切圖方法splitImage,將傳入的Bitmap圖片分割成Piece*Piece塊，并設(shè)置每塊寬度，將分割好的圖片放入到List中。
2、自定義View:GamePintuLayout.java中運(yùn)用的主要工具有：
單位轉(zhuǎn)換：將傳入的數(shù)值進(jìn)行單位轉(zhuǎn)換成3PX,使得屏幕可識(shí)別。
//單位的轉(zhuǎn)換mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3, getResources().getDisplayMetrics());
/*獲取多個(gè)參數(shù)的最小值*/ private int min(int... params) { int min = params[0]; for (int param : params) { if (param < min) min = param; } return min; }3、圖片亂序的實(shí)現(xiàn)：
// 使用sort完成我們的亂序 Collections.sort(mItemBitmaps, new Comparator<ImagePiece>() { public int compare(ImagePiece a, ImagePiece b) { return Math.random() > 0.5 ? 1 : -1; } });4、圖片的交換：在監(jiān)聽事件中，當(dāng)用戶選中了兩張圖片，則對(duì)圖片進(jìn)行交換，并對(duì)第一次選中的圖片，進(jìn)行樣式的設(shè)置。如果用戶重復(fù)點(diǎn)擊一張圖片，則消除圖片的選中狀態(tài)。通過給圖片設(shè)置的Tag，找到Id, 然后找到Bitmap圖片的index，然后進(jìn)行交換同時(shí)交換Tag。
String firstTag = (String) mFirst.getTag();String secondTag = (String) mSecond.getTag();mFirst.setImageBitmap(secondBitmap);mSecond.setImageBitmap(firstBitmap);mFirst.setTag(secondTag);mSecond.setTag(firstTag);
5、圖片動(dòng)畫切換：構(gòu)造動(dòng)畫層，mAnimLayout并addView,然后在exchangeView中，先構(gòu)造動(dòng)畫層，復(fù)制兩個(gè)ImageView,為兩個(gè)ImageView設(shè)置動(dòng)畫，監(jiān)聽動(dòng)畫的開始，讓原本的View隱藏，結(jié)束以后，將圖片交換，將圖片顯示，移除動(dòng)畫層。
6、通過接口對(duì)關(guān)卡進(jìn)行回調(diào)：實(shí)現(xiàn)關(guān)卡進(jìn)階、時(shí)間控制、游戲結(jié)束接口。并利用Handler更新UI，在nextLevel方法中實(shí)現(xiàn)移除之前的View布局，以及將動(dòng)畫層設(shè)置為空，增加mColumn++,然后初始化initBitmap()進(jìn)行重新切圖亂序并InitItem()設(shè)置圖片的圖片寬高。
public interface GamePintuListener { void nextLevel(int nextLevel); void timechanged(int currentTime); void gameover(); }public GamePintuListener mListener; /* * 設(shè)置接口回調(diào) */public void setOnGamePintuListener(GamePintuListener mListener) { this.mListener = mListener; }7、根據(jù)當(dāng)前等級(jí)設(shè)置游戲的時(shí)間：mTime = (int)Math.pow(2, level)*60;進(jìn)而更行我們的Handler。mHandler.sendEmptyMessageDelayed(TIME_CHANGED, 1000)使得時(shí)間動(dòng)態(tài)的減一。
8、游戲暫停開始：
mHandler.removeMessages(TIME_CHANGED);
而重新開始游戲則是：mHandler.sendEmptyMessage(TIME_CHANGED);
四、系統(tǒng)實(shí)現(xiàn)
工具類：
自定義容器：
ImagePiece.java
package com.example.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; } public String toString() { return "ImagePiece [index=" + index + ", bitmap=" + bitmap + "]"; }}ImageSplitterUtil.java
//ImageSplitterUtil.javapackage com.example.utils;import java.util.ArrayList;import java.util.List;import android.graphics.Bitmap;public class ImageSplitterUtil { /* * 傳入Bitmap切成Piece*piece塊，返回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(); // 每一塊的寬度 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(); imagePiece.setIndex(j + i * piece); int x = j * pieceWidth; int y = i * pieceWidth; imagePiece.setBitmap(Bitmap.createBitmap(bitmap, x, y, pieceWidth, pieceWidth)); imagePieces.add(imagePiece); } } return imagePieces; }}GamePintuLayout.java
package com.example.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.Log;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.example.game_pintu.R;import com.example.utils.ImagePiece;import com.example.utils.ImageSplitterUtil;public class GamePintuLayout extends RelativeLayout implements OnClickListener { private int mColumn = 3; /* * 容器內(nèi)邊距 */ private int mPadding; /* * 每張小圖之間的距離（橫縱）dp */ private int mMargin = 3; private ImageView[] mGamePintuItems; private int mItemWidth; /* * 游戲的圖片 */ private Bitmap mBitmap; private List<ImagePiece> mItemBitmaps; private boolean once; /* * 游戲面板的寬度 */ private int mWidth; private boolean isGameSuccess; private boolean isGameOver; public interface GamePintuListener { void nextLevel(int nextLevel); void timechanged(int currentTime); void gameover(); } public GamePintuListener mListener; /* * 設(shè)置接口回調(diào) */ public void setOnGamePintuListener(GamePintuListener mListener) { this.mListener = mListener; } private int level = 1; private static final int TIME_CHANGED = 0x110; private static final int NEXT_LEVEL = 0x111; 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--; mHandler.sendEmptyMessageDelayed(TIME_CHANGED, 1000); break; case NEXT_LEVEL: level = level + 1; if (mListener != null) { mListener.nextLevel(level); } else { nextLevel(); } break; default: break; } }; }; private boolean isTimeEnabled = false; private int mTime; /* * 設(shè)置是否開啟時(shí)間 */ public void setTimeEnabled(boolean isTimeEnabled) { this.isTimeEnabled = isTimeEnabled; } public GamePintuLayout(Context context) { this(context, null); } public GamePintuLayout(Context context, AttributeSet attrs) { this(context, attrs, 0); } public GamePintuLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { /* * 單位的轉(zhuǎn)換3--px */ mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3, getResources().getDisplayMetrics()); mPadding = min(getPaddingLeft(), getPaddingRight(), getPaddingTop(), getPaddingBottom()); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 取寬和高的最小值 mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth()); if (!once) { // 進(jìn)行切圖，以及排序 initBitmap(); // 設(shè)置ImageView(Item)寬高等屬性 initItem(); //判斷是否開啟時(shí)間 checkTimeEnable(); once = true; } setMeasuredDimension(mWidth, mWidth); } private void checkTimeEnable() { if(isTimeEnabled){ //根據(jù)當(dāng)前等級(jí)設(shè)置時(shí)間 contTimeBaseLevel(); mHandler.sendEmptyMessage(TIME_CHANGED); } } private void contTimeBaseLevel() { mTime = (int)Math.pow(2, level)*60; } // 進(jìn)行切圖，以及排序 private void initBitmap() { // TODO Auto-generated method stub if (mBitmap == null) { mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image1); } mItemBitmaps = ImageSplitterUtil.splitImage(mBitmap, mColumn); // 使用sort完成我們的亂序 Collections.sort(mItemBitmaps, new Comparator<ImagePiece>() { public int compare(ImagePiece a, ImagePiece b) { return Math.random() > 0.5 ? 1 : -1; } }); } // 設(shè)置ImageView(Item)寬高等屬性 private void initItem() { mItemWidth = (mWidth - mPadding * 2 - mMargin * (mColumn - 1)) / mColumn; mGamePintuItems = new ImageView[mColumn * mColumn]; // 生成Item, 設(shè)置Rule; for (int i = 0; i < mGamePintuItems.length; i++) { ImageView item = new ImageView(getContext()); item.setOnClickListener(this); item.setImageBitmap(mItemBitmaps.get(i).getBitmap()); mGamePintuItems[i] = item; item.setId(i + 1); // item中tag存儲(chǔ)了index item.setTag(i + "_" + mItemBitmaps.get(i).getIndex()); RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams( mItemWidth, mItemWidth); // 設(shè)置item艱橫向間隙，通過RightMargin // 不是最后一列 if ((i + 1) % mColumn != 0) { lp.rightMargin = mMargin; } // 不是第一列 if (i % mColumn != 0) { lp.addRule(RelativeLayout.RIGHT_OF, mGamePintuItems[i - 1].getId()); } // 如果不是第一行，設(shè)置TopMargin and rule if ((i + 1) > mColumn) { lp.topMargin = mMargin; lp.addRule(RelativeLayout.BELOW, mGamePintuItems[i - mColumn].getId()); } addView(item, lp); } } 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); } } public void nextLevel() { this.removeAllViews(); mAnimLayout = null; mColumn++; isGameSuccess = false; checkTimeEnable(); initBitmap(); initItem(); } /* * 獲取多個(gè)參數(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; public void onClick(View v) { if (isAniming) return; // 兩次點(diǎn)擊同一個(gè)Item if (mFirst == v) { mFirst.setColorFilter(null); mFirst = null; return; } if (mFirst == null) { mFirst = (ImageView) v; mFirst.setColorFilter(Color.parseColor("#55FF0000")); } else { mSecond = (ImageView) v; // 交換我們的Item exchangeView(); } } /* * 動(dòng)畫層 */ private RelativeLayout mAnimLayout; private boolean isAniming; /* * 交換Item */ private void exchangeView() { mFirst.setColorFilter(null); // 構(gòu)造動(dòng)畫層 setUpAnimLayout(); ImageView first = new ImageView(getContext()); final Bitmap firstBitmap = mItemBitmaps.get( getImageIdByTag((String) mFirst.getTag())).getBitmap(); first.setImageBitmap(firstBitmap); LayoutParams lp = new LayoutParams(mItemWidth, mItemWidth); lp.leftMargin = mFirst.getLeft() - mPadding; lp.topMargin = mFirst.getTop() - mPadding; first.setLayoutParams(lp); mAnimLayout.addView(first); 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è)置動(dòng)畫 TranslateAnimation anim = new TranslateAnimation(0, mSecond.getLeft() - mFirst.getLeft(), 0, mSecond.getTop() - mFirst.getTop()); anim.setDuration(300); 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)聽動(dòng)畫 anim.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { mFirst.setVisibility(View.INVISIBLE); mSecond.setVisibility(View.INVISIBLE); isAniming = true; } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { String firstTag = (String) mFirst.getTag(); String secondTag = (String) mSecond.getTag(); mFirst.setImageBitmap(secondBitmap); mSecond.setImageBitmap(firstBitmap); mFirst.setTag(secondTag); mSecond.setTag(firstTag); mFirst.setVisibility(View.VISIBLE); mSecond.setVisibility(View.VISIBLE); mFirst = mSecond = null; // 判斷游戲用戶是否成功 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) { isGameSuccess = true; mHandler.removeMessages(TIME_CHANGED); Toast.makeText(getContext(), "Success, level up!", Toast.LENGTH_LONG).show(); mHandler.sendEmptyMessage(NEXT_LEVEL); } } public int getImageIdByTag(String tag) { String[] split = tag.split("_"); return Integer.parseInt(split[0]); } public int getImageIndexByTag(String tag) { String[] split = tag.split("_"); return Integer.parseInt(split[1]); } /** * 構(gòu)造我們的動(dòng)畫層 */ private void setUpAnimLayout() { if (mAnimLayout == null) { mAnimLayout = new RelativeLayout(getContext()); addView(mAnimLayout); } else { mAnimLayout.removeAllViews(); } }}MainActivity.java
package com.example.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.example.game_pintu.view.GamePintuLayout;import com.example.game_pintu.view.GamePintuLayout.GamePintuListener;public class MainActivity extends Activity { private GamePintuLayout mGamePintuLayout; private TextView mLevel; private TextView mTime; @Override protected 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() { @Override public void timechanged(int currentTime) { mTime.setText("" + currentTime); } @Override public void nextLevel(final int nextLevel) { new AlertDialog.Builder(MainActivity.this) .setTitle("GAME INFO").setMessage("LEVEL UP!!!") .setPositiveButton("NEXT LEVEL", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { mGamePintuLayout.nextLevel(); mLevel.setText("" + nextLevel); } }).show(); } @Override public void gameover() { new AlertDialog.Builder(MainActivity.this) .setTitle("GAME INFO").setMessage("GAME OVER!!!") .setPositiveButton("RESTART", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // mGamePintuLayout.nextLevel(); mGamePintuLayout.restart(); } }).setNegativeButton("QUIT", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { finish(); } }).show(); } }); } @Override protected void onPause() { super.onPause(); mGamePintuLayout.pause(); } @Override protected 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" tools:context="${relativePackage}.${activityClass}" > <com.example.game_pintu.view.GamePintuLayout android:id="@+id/id_gamepintu" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_centerInParent="true" android:padding="3dp" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_above="@id/id_gamepintu" > <TextView android:id="@+id/id_level" android:layout_width="40dp" android:layout_height="40dp" android:background="@drawable/textbg" android:gravity="center" android:padding="4dp" android:text="1" android:textColor="#EA7821" android:textSize="10sp" android:textStyle="bold" /> <TextView android:id="@+id/id_time" android:layout_width="40dp" android:layout_height="40dp" android:layout_alignParentRight="true" android:background="@drawable/textbg" android:gravity="center" android:padding="4dp" android:text="50" android:textColor="#EA7821" android:textSize="10sp" android:textStyle="bold" /> </RelativeLayout></RelativeLayout>in drawable new textbg.xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <stroke android:width="2px" android:color="#1579DB" /> <solid android:color="#B4CDE6"/></shape>
五、測(cè)試
開始游戲
成功
成功進(jìn)階
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
