Android 美女拼圖遊戲
概述
把圖片切分不少份，點擊交換拼成一張完整的；這樣關卡也很容易設計，33；44；55；66；一直下去git
效果：github
加了個切換動畫，效果仍是不錯的，其實遊戲就是自定義了一個控件，下面咱們開始自定義之旅。app
<!-- more -->dom
遊戲的設計
首先咱們分析下如何設計這款遊戲：ide
咱們須要一個容器，能夠放這些圖片的塊塊，爲了方便，咱們準備使用RelativeLayout配合addRule實現函數
每一個圖片的塊塊，咱們準備使用ImageView佈局
點擊交換，咱們準備使用傳統的TranslationAnimation來實現
有了初步的設計，感受這遊戲so easy~
遊戲佈局的實現
首先，咱們準備實現可以把一張圖片，切成n*n份，放在指定的位置；咱們只須要設置n這個數字，而後根據佈局的寬或者高其中的小值，除以n，減去一些邊距就能夠獲得咱們ImageView的寬和高了~~
構造方法
/**
* 設置Item的數量n*n；默認爲3
*/
private int mColumn = 3;
/**
* 佈局的寬度
*/
private int mWidth;
/**
* 佈局的padding
*/
private int mPadding;
/**
* 存放全部的Item
*/
private ImageView[] mGamePintuItems;
/**
* Item的寬度
*/
private int mItemWidth;
/**
* Item橫向與縱向的邊距
*/
private int mMargin = 3;
/**
* 拼圖的圖片
*/
private Bitmap mBitmap;
/**
* 存放切完之後的圖片bean
*/
private List<ImagePiece> mItemBitmaps;
private boolean once;
public GamePintuLayout(Context context) {
this(context, null);
}
public GamePintuLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
/**
* 構造函數，用來初始化
* @param context the context
* @param attrs the attrs
* @param defStyle the def style
* @author qiu 博客：www.qiuchengjia.cn 時間：2016-09-12
*/
public GamePintuLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
//把設置的margin值轉換爲dp
mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
mMargin, getResources().getDisplayMetrics());
// 設置Layout的內邊距，四邊一致，設置爲四內邊距中的最小值
mPadding = min(getPaddingLeft(), getPaddingTop(), getPaddingRight(),
getPaddingBottom());
}
構造方法裏面，咱們獲得把設置的margin值轉化爲dp；得到佈局的padding值；總體是個正方形，因此咱們取padding四個方向中的最小值；至於margin，做爲Item之間的橫向與縱向的間距，你喜歡的話能夠抽取爲自定義屬性~~
onMeasure
/**
* 用來設置設置自定義的View的寬高，
* @param widthMeasureSpec the width measure spec
* @param heightMeasureSpec the height measure spec
* @author qiu 博客：www.qiuchengjia.cn 時間：2016-09-12
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 得到遊戲佈局的邊長
mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());
if (!once) {
initBitmap();
initItem();
}
once = true;
setMeasuredDimension(mWidth, mWidth);
}
onMeasure裏面主要就是得到到佈局的寬度，而後進行圖片的準備，以及初始化咱們的Item，爲Item設置寬度和高度
initBitmap天然就是準備圖片了：
/**
* 初始化bitmap
* @author qiu 博客：www.qiuchengjia.cn 時間：2016-09-12
*/
private void initBitmap() {
if (mBitmap == null)
mBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.aa);
mItemBitmaps = ImageSplitter.split(mBitmap, mColumn);
//對圖片進行排序
Collections.sort(mItemBitmaps, new Comparator<ImagePiece>(){
@Override
public int compare(ImagePiece lhs, ImagePiece rhs){
//咱們使用random隨機比較大小
return Math.random() > 0.5 ? 1 : -1;
}
});
}
咱們這裏若是沒有設置mBitmap就準備一張備用圖片，而後調用ImageSplitter.split將圖片切成n * n 返回一個List<ImagePiece>。切完之後，咱們須要將順序打亂，因此咱們調用了sort方法，至於比較器，咱們使用random隨機比較大小，這樣咱們就完成了咱們的亂序操做，贊不讚~~
/**
* Description: 圖片切片類
* Data：2016/9/11-19:53
* Blog：www.qiuchengjia.cn
* Author: qiu
*/
public class ImageSplitter {
/**
* 將圖片切成 , piece *piece
* @param bitmap
* @param piece
* @return
*/
public static List<ImagePiece> split(Bitmap bitmap, int piece){
List<ImagePiece> pieces = new ArrayList<ImagePiece>(piece * piece);
int width = bitmap.getWidth();
int height = bitmap.getHeight();
Log.e("TAG", "bitmap Width = " + width + " , height = " + height);
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.index = j + i * piece;
int xValue = j * pieceWidth;
int yValue = i * pieceWidth;
imagePiece.bitmap = Bitmap.createBitmap(bitmap, xValue, yValue,
pieceWidth, pieceWidth);
pieces.add(imagePiece);
}
}
return pieces;
}
}
/**
* Description: 圖片bean
* Data：2016/9/11-19:54
* Blog：www.qiuchengjia.cn
* Author: qiu
*/
public class ImagePiece
{
public int index = 0;
public Bitmap bitmap = null;
}
撒說的就是一個根據寬度高度，和n，來切圖保存的過程~~
ImagePiece保存的圖片以及索引，話說這兩個類仍是我無心中在網上發現的~~
圖片到此就準備好了，如今看Item的生成已經設置寬高，即initItems
/**
* 初始化每個item
* @author qiu 博客：www.qiuchengjia.cn 時間：2016-09-12
*/
private void initItem() {
// 得到Item的寬度
int childWidth = (mWidth - mPadding * 2 - mMargin *
(mColumn - 1)) / mColumn;
mItemWidth = childWidth;
mGamePintuItems = new ImageView[mColumn * mColumn];
// 放置Item
for (int i = 0; i < mGamePintuItems.length; i++) {
ImageView item = new ImageView(getContext());
item.setOnClickListener(this);
item.setImageBitmap(mItemBitmaps.get(i).bitmap);
mGamePintuItems[i] = item;
item.setId(i + 1);
item.setTag(i + "_" + mItemBitmaps.get(i).index);
RelativeLayout.LayoutParams lp =
new LayoutParams(mItemWidth,
mItemWidth);
// 設置橫向邊距,不是最後一列
if ((i + 1) % mColumn != 0) {
lp.rightMargin = mMargin;
}
// 若是不是第一列
if (i % mColumn != 0) {
lp.addRule(RelativeLayout.RIGHT_OF,//
mGamePintuItems[i - 1].getId());
}
// 若是不是第一行，//設置縱向邊距，非最後一行
if ((i + 1) > mColumn) {
lp.topMargin = mMargin;
lp.addRule(RelativeLayout.BELOW,//
mGamePintuItems[i - mColumn].getId());
}
addView(item, lp);
}
}
能夠看到咱們的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）
到此，咱們遊戲的佈局的代碼就結束了~~~
而後咱們在佈局文件裏面聲明下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<game.qiu.com.beautygame.GamePintuLayout
android:id="@+id/id_gameview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:padding="5dp" >
</game.qiu.com.beautygame.GamePintuLayout>
</RelativeLayout>
Activity裏面記得設置這個佈局~~
如今的效果是：
遊戲的切換效果
初步的切換
還記得咱們都給Item添加了onClick的監聽麼~~
如今咱們須要實現，點擊兩個Item，他們的圖片可以發生交換~
那麼，咱們須要兩個成員變量來存儲這兩個Item，而後再去交換
/**
* 記錄第一次點擊的ImageView
*/
private ImageView mFirst;
/**
* 記錄第二次點擊的ImageView
*/
private ImageView mSecond;
/**
* 點擊事件
* @param view the view
* @author qiu 博客：www.qiuchengjia.cn 時間：2016-09-12
*/
@Override
public void onClick(View v) {
/**
* 若是兩次點擊是同一個
*/
if (mFirst == v) {
mFirst.setColorFilter(null);
mFirst = null;
return;
}
//點擊第一個Item
if (mFirst == null) {
mFirst = (ImageView) v;
mFirst.setColorFilter(Color.parseColor("#55FF0000"));
} else//點擊第二個Item
{
mSecond = (ImageView) v;
exchangeView();
}
}
點擊第一個，經過setColorFilter設置下選中效果，再次點擊另外一個，那咱們就準備調用exchangeView進行交換圖片了，固然這個方法咱們還沒寫，先放着~
若是兩次點擊同一個，去除選中效果，咱們就當什麼都沒發生
接下來，咱們來實現exchangeView：
/**
* 交換兩個Item圖片
* @author qiu 博客：www.qiuchengjia.cn 時間：2016-09-12
*/
private void exchangeView() {
mFirst.setColorFilter(null);
String firstTag = (String) mFirst.getTag();
String secondTag = (String) mSecond.getTag();
//獲得在list中索引位置
String[] firstImageIndex = firstTag.split("_");
String[] secondImageIndex = secondTag.split("_");
mFirst.setImageBitmap(mItemBitmaps.get(Integer
.parseInt(secondImageIndex[0])).bitmap);
mSecond.setImageBitmap(mItemBitmaps.get(Integer
.parseInt(firstImageIndex[0])).bitmap);
mFirst.setTag(secondTag);
mSecond.setTag(firstTag);
mFirst = mSecond = null;
}
應該還記得咱們以前的setTag吧，忘了，返回去看看，咱們還說注意來着~
經過getTag，拿到在List中是索引，而後獲得bitmap進行交換設置，最後交換tag；
到此咱們的交換效果寫完了，咱們的遊戲能夠完了~~效果是這樣的：
能夠看到咱們已經能夠玩了，至於爲何不用清爽的風景圖，是由於，實在是看不出來那塊對那塊，仍是妹子直觀~
你們確定會吐槽，我擦，動畫切換呢，明明不是兩個飛過去交換位置麼，尼瑪這算什麼
也是，對與程序咱們要有追求，下面咱們來添加動畫切換效果~~
無縫的動畫切換
咱們先聊聊怎麼添加，我準備使用TranslationAnimation，而後兩個Item的top，left也很容器獲取；
可是，要明白，咱們實際上，Item只是setImage發生了變化，Item的位置沒有變；
咱們如今須要動畫移動效果，好比A移動到B，沒問題，移動完成之後，Item得回去吧，可是圖片並無發生變化，咱們仍是須要手動setImage
這樣形成了一個現象，動畫切換效果有了，可是最後仍是會有一閃，是咱們切換圖片形成的；
爲了不上述現象，可以完美的作到切換效果，這裏咱們引入一個動畫圖層，專門作動畫效果，有點相似ps的圖層，下面看咱們怎麼作；
/**
* 動畫運行的標誌位
*/
private boolean isAniming;
/**
* 動畫層
*/
private RelativeLayout mAnimLayout;
/**
* 交換兩個Item圖片
* @author qiu 博客：www.qiuchengjia.cn 時間：2016-09-12
*/
private void exchangeView(){
mFirst.setColorFilter(null);
setUpAnimLayout();
// 添加FirstView
ImageView first = new ImageView(getContext());
first.setImageBitmap(mItemBitmaps
.get(getImageIndexByTag((String) mFirst.getTag())).bitmap);
LayoutParams lp = new LayoutParams(mItemWidth, mItemWidth);
lp.leftMargin = mFirst.getLeft() - mPadding;
lp.topMargin = mFirst.getTop() - mPadding;
first.setLayoutParams(lp);
mAnimLayout.addView(first);
// 添加SecondView
ImageView second = new ImageView(getContext());
second.setImageBitmap(mItemBitmaps
.get(getImageIndexByTag((String) mSecond.getTag())).bitmap);
LayoutParams lp2 = new LayoutParams(mItemWidth, mItemWidth);
lp2.leftMargin = mSecond.getLeft() - mPadding;
lp2.topMargin = mSecond.getTop() - mPadding;
second.setLayoutParams(lp2);
mAnimLayout.addView(second);
// 設置動畫
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,
mFirst.getLeft() - mSecond.getLeft(), 0, mFirst.getTop()
- mSecond.getTop());
animSecond.setDuration(300);
animSecond.setFillAfter(true);
second.startAnimation(animSecond);
// 添加動畫監聽
anim.setAnimationListener(new AnimationListener(){
@Override
public void onAnimationStart(Animation animation){
isAniming = true;
mFirst.setVisibility(INVISIBLE);
mSecond.setVisibility(INVISIBLE);
}
@Override
public void onAnimationRepeat(Animation animation){
}
@Override
public void onAnimationEnd(Animation animation){
String firstTag = (String) mFirst.getTag();
String secondTag = (String) mSecond.getTag();
String[] firstParams = firstTag.split("_");
String[] secondParams = secondTag.split("_");
mFirst.setImageBitmap(mItemBitmaps.get(Integer
.parseInt(secondParams[0])).bitmap);
mSecond.setImageBitmap(mItemBitmaps.get(Integer
.parseInt(firstParams[0])).bitmap);
mFirst.setTag(secondTag);
mSecond.setTag(firstTag);
mFirst.setVisibility(VISIBLE);
mSecond.setVisibility(VISIBLE);
mFirst = mSecond = null;
mAnimLayout.removeAllViews();
//checkSuccess();
isAniming = false;
}
});
}
/**
* 建立動畫層
*/
private void setUpAnimLayout(){
if (mAnimLayout == null){
mAnimLayout = new RelativeLayout(getContext());
addView(mAnimLayout);
}
}
private int getImageIndexByTag(String tag){
String[] split = tag.split("_");
return Integer.parseInt(split[0]);
}
開始交換時，咱們建立一個動畫層，而後在這一層上添加上兩個如出一轍的Item，把原來的Item隱藏了，而後盡情的進行動畫切換，setFillAfter爲true~
動畫完畢，咱們已經悄悄的把Item的圖片交換了，直接顯示出來。這樣就完美的切換了：
大體過程：
A ，B隱藏
A副本動畫移動到B的位置；B副本移動到A的位置
A把圖片設置爲B，把B副本移除，A顯示，這樣就完美切合了，用戶感受是B移動過去的
B同上
如今咱們的效果：
如今效果滿意了把~~爲了防止用戶狂點，在onClick裏面添加一句：
@Override
public void onClick(View v)
{
// 若是正在執行動畫，則屏蔽
if (isAniming)
return;
到此咱們的動畫的切換，已經完美結束了~~
切換時，咱們是否是應該判斷是否成功了~~
遊戲勝利的判斷
咱們在切換完成，進行checkSuccess();的判斷；好在咱們把圖片的正確的順序存在tag裏面~~
/**
* 用來判斷遊戲是否成功
* @author qiu 博客：www.qiuchengjia.cn 時間：2016-09-12
*/
private void checkSuccess(){
boolean isSuccess = true;
for (int i = 0; i < mGamePintuItems.length; i++){
ImageView first = mGamePintuItems[i];
Log.e("TAG", getIndexByTag((String) first.getTag()) + "");
if (getIndexByTag((String) first.getTag()) != i){
isSuccess = false;
}
}
if (isSuccess){
Toast.makeText(getContext(), "Success , Level Up !",
Toast.LENGTH_LONG).show();
// nextLevel();
}
}
/**
* 得到圖片的真正索引
* @param tag
* @return
*/
private int getIndexByTag(String tag){
String[] split = tag.split("_");
return Integer.parseInt(split[1]);
}
很簡單，遍歷全部的Item，根據Tag拿到真正的索引和固然順序比較，徹底一致則勝利~~勝利之後進入下一關
至於下一關的代碼：
public void nextLevel(){
this.removeAllViews();
mAnimLayout = null;
mColumn++;
initBitmap();
initItem();
}
總結
ok，到此咱們的遊戲結束了，我來帶你們闖個關：
源碼下載：傳送門
參考資料
相關文章
- 1. 拼圖遊戲
- 2. 拼圖小遊戲
- 3. javase拼圖遊戲
- 4. 拼圖遊戲 v1.1
- 5. C# 拼圖遊戲
- 6. C語言小遊戲：拼圖遊戲
- 7. java swing 拼圖遊戲
- 8. JAVA實現拼圖遊戲
- 9. Javascript: 實現拼圖遊戲
- 10. c#拼圖小遊戲
- 更多相關文章...
- • Kotlin Android 環境搭建 - Kotlin 教程
- • R 繪圖 - 餅圖 - R 語言教程
- • Flink 數據傳輸及反壓詳解
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 拼圖遊戲
- 2. 拼圖小遊戲
- 3. javase拼圖遊戲
- 4. 拼圖遊戲 v1.1
- 5. C# 拼圖遊戲
- 6. C語言小遊戲：拼圖遊戲
- 7. java swing 拼圖遊戲
- 8. JAVA實現拼圖遊戲
- 9. Javascript: 實現拼圖遊戲
- 10. c#拼圖小遊戲