Android 實戰美女拼圖遊戲你能堅持到第幾關

時間 2019-11-06

原文原文鏈接

轉載請標明出處： http://blog.csdn.net/lmj623565791/article/details/40595385。本文出自：【張鴻洋的博客】

一、概述

繼2048以後，今天給你們帶來一個拼圖遊戲，固然了不是很是傳統那個缺一塊的拼圖。那遊戲我不會玩~~所有咱們換個方式玩拼圖。怎麼玩呢，把圖片且成很是多份。點擊交換拼成一張完整的。這樣關卡也很是容易設計，3*3；4*4；5*5；6*6；...一直下去....html

博客產生的緣由是。沒事在網上逛看到一個圖片切片的輔助類。類很是easy。上面說了一句，假設作拼圖遊戲的話可以用到。而後，咱們就用到了~~java

至於效果是這種：android

加了個切換動畫，效果仍是不錯的~~事實上游戲就是本身定義了一個控件。如下咱們開始本身定義之旅~~微信

二、遊戲的設計

首先咱們分析下怎樣設計這款遊戲：app

一、咱們需要一個容器，可以放這些圖片的塊塊，爲了方便，咱們準備使用RelativeLayout配合addRule實現dom

二、每個圖片的塊塊，咱們準備使用ImageViewide

三、點擊交換。咱們準備使用傳統的TranslationAnimation來實現佈局

有了初步的設計，感受這遊戲so easy~post

三、遊戲佈局的實現

首先。咱們準備實現可以把一張圖片，切成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);
	}

	public GamePintuLayout(Context context, AttributeSet attrs, int defStyle)
	{
		super(context, attrs, defStyle);

		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

@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天然就是準備圖片了：

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)
			{
				return Math.random() > 0.5 ?
 1 : -1;
			}
		});
	}

咱們這裏假設沒有設置mBitmap就準備一張備用圖片，而後調用ImageSplitter.split將圖片切成n * n 返回一個List<ImagePiece>

切完之後。咱們需要將順序打亂，因此咱們調用了sort方法，至於比較器，咱們使用random隨機比較大小~~這樣咱們就完畢了咱們的亂序操做，贊不讚~~

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;
	}
}

public class ImagePiece
{
	public int index = 0;
	public Bitmap bitmap = null;
}

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

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

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

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" >

    <com.zhy.gamePintu.view.GamePintuLayout
        android:id="@+id/id_gameview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true"
        android:padding="5dp" >
    </com.zhy.gamePintu.view.GamePintuLayout>

</RelativeLayout>

Activity裏面記得設置這個佈局~~

現在的效果是：

換了個風景圖，感受好清爽啊~~咱們的切圖。佈局已經完畢了，是否是很是easy；而且感受咱們的遊戲已經完畢了一大半了呀~~~剩下無非就是Item的click的處理。

四、遊戲的切換效果

一、初步的切換

還記得咱們都給Item加入了onClick的監聽麼~~

現在咱們需要實現，點擊兩個Item，他們的圖片可以發生交換~

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

	private ImageView mFirst;
	private ImageView mSecond;

	@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的圖片
	 */
	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的圖片
	 */
	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裏面~~

/**
	 * 推斷遊戲是否成功
	 */
	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]);
	}

很是easy。遍歷所有的Item。依據Tag拿到真正的索引和固然順序比較，全然一致則勝利~~勝利之後進入下一關。

至於下一關的代碼：

public void nextLevel()
	{
		this.removeAllViews();
		mAnimLayout = null;
		mColumn++;
		initBitmap();
		initItem();
	}

ok，到此咱們的遊戲結束了，我來帶你們闖個關：

特地留了一步，讓我 level up ~~但願你們不管是遊戲仍是技術都可以level up !!!

因爲篇幅緣由，時間的限制及顯示，就不帶你們作了，你們以爲有必要就本身加入下~~

源代碼點擊下載

----------------------------------------------------------------------------------------------------------

博主部分視頻已經上線，假設你不喜歡枯燥的文本，請猛戳（初錄，期待您的支持）：

一、高仿微信5.2.1主界面及消息提醒

二、高仿QQ5.0側滑

三、Android智能機器人「小慕」的實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Android 實戰美女拼圖遊戲 你能堅持到第幾關