Android拼图游戏的设计逻辑，从切图到交互动画，从关卡到倒计时，实例提高！

群英传的最后一章，我大致的看了一下这个例子，发现鸿洋大神也做过，就参考两个人的设计逻辑，感觉都差不多，就这样实现起来了

一.切图工具类

我们九宫格嘛，肯定要一个切图的工具，把一个图片给切成九张，那具体是怎么实现呢？我们先写一个bean来存储一切的状态

ImagePiece

package com.lgl.ninegame.utils;

import android.graphics.Bitmap;

/**
 *
 * Created by LGL on 2016/5/2.
 */
public class ImagePiece {

    private int index;
    private Bitmap bitmap;

    //构造方法
    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;
    }

}

然后就可以实现我们的切图工具类了

ImageSplitterUtil

package com.lgl.ninegame.utils;

import android.graphics.Bitmap;

import java.util.ArrayList;
import java.util.List;

/**
 * 切图工具
 * Created by LGL on 2016/5/2.
 */
public class ImageSplitterUtil {

    /**
     * 静态方法
     * 传递bitmap切成piece*piece块，返回List
    
    
     
     *
     *
     
      @param bitmap
     *
     
      @param piece
     *
     
      @return
     */
    
    
    public static List
   
    
    
    splitImage(Bitmap bitmap, 
    
    int piece) {

        
    
    //作为返回值传递
        List
    
    
      imagePieces = 
     
     new ArrayList<>();

        
     
     //获取图片的宽高
        
     
     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;

                
     
     //第一次循环为0,0,
                imagePiece.setBitmap(Bitmap.createBitmap(bitmap, x, y, pieceWidth, pieceWidth));
                
     
     /**
                 * 保存到list中进行返回
                 */
                imagePieces.add(imagePiece);
            }
        }
        
     
     return imagePieces;
    }


}

二.自定义容器

工具有了，就需要容器了，我们需要自定义一个，这里我们就继承相对布局,我们这个是一个游戏布局，所以我实现准备好了一张妹子的图片，分辨率是800*80

这里写图片描述

GameView

package com.lgl.ninegame.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.lgl.ninegame.R;
import com.lgl.ninegame.utils.ImagePiece;
import com.lgl.ninegame.utils.ImageSplitterUtil;

import java.util.Collections;
import java.util.Comparator;
import java.util.List;

/**
 * 自定义容器
 * Created by LGL on 2016/5/2.
 */
public class GameView extends RelativeLayout implements View.OnClickListener {


    //默认3*3
    private int mColumn = 3;
    //容器的内边距
    private int mPadding;
    //小图的距离 dp
    private int mMagin = 3;
    //存储图片的，宽高 都是固定的，所以使用数组
    private ImageView[] mGameOintuItems;
    //宽度
    private int mItemWidth;
    //图片
    private Bitmap mBitmap;
    //切图后存储
    private List
   
   
     mItemBitmaps;
    
    
    //标记
    
    
    private 
    
    boolean once;

    
    
    //容器的一个宽度
    
    
    private 
    
    int mWidth;


    
    
    public 
    
    GameView(Context context) {

        
    
    this(context, 
    
    null);
    }

    
    
    public 
    
    GameView(Context context, AttributeSet attrs) {

        
    
    this(context, attrs, 
    
    0);
    }

    
    
    public 
    
    GameView(Context context, AttributeSet attrs, 
    
    int defStyleAttr) {
        
    
    super(context, attrs, defStyleAttr);

        init();
    }

    
    
    /**
     * 初始化
     */
    
    
    private 
    
    void 
    
    init() {
        
    
    //单位转换——dp-px
        mMagin = (
    
    int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 
    
    3, getResources().getDisplayMetrics());

        mPadding = min(getPaddingLeft(), getPaddingRight(), getPaddingTop(), getPaddingBottom());
    }

    
    
    /**
     * 确定当前布局的大小，我们要设置成正方形
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    
    
    @Override
    
    
    protected 
    
    void 
    
    onMeasure(
    
    int widthMeasureSpec, 
    
    int heightMeasureSpec) {
        
    
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        
    
    //拿到容器的高宽最小值
        mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());

        
    
    if (!once) {
            
    
    //进行切图和排序
            initBitmap();

            
    
    //设置imageview(item)的宽高等属性
            initItem();

            once = 
    
    true;

        }
        setMeasuredDimension(mWidth, mWidth);
    }

    
    
    /**
     * 进行切图和排序
     */
    
    
    private 
    
    void 
    
    initBitmap() {
        
    
    //判断是否存在这张图片
        
    
    if (mBitmap == 
    
    null) {
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.img);
        }
        
    
    //进行裁剪
        mItemBitmaps = ImageSplitterUtil.splitImage(mBitmap, mColumn);

        
    
    //裁剪玩后需要进行顺序打乱sort
        Collections.sort(mItemBitmaps, 
    
    new Comparator
    
    
     () {
            
     
     @Override
            
     
     public 
     
     int 
     
     compare(ImagePiece lhs, ImagePiece rhs) {

                
     
     //生成随机数，如果》0.5返回1否则返回-1
                
     
     return Math.random() > 
     
     0.5 ? 
     
     1 : -
     
     1;
            }
        });

    }

    
     
     /**
     * 设置imageview(item)的宽高等属性
     */
    
     
     private 
     
     void 
     
     initItem() {
        
     
     //（ 容器的宽度 - 内边距 * 2  - 间距  ） /  裁剪的数量
        mItemWidth = (mWidth - mPadding * 
     
     2 - mMagin * (mColumn - 
     
     1)) / mColumn;
        
     
     //几 * 几
        mGameOintuItems = 
     
     new ImageView[mColumn * mColumn];

        
     
     //开始排放
        
     
     for (
     
     int i = 
     
     0; i < mGameOintuItems.length; i++) {
            ImageView item = 
     
     new ImageView(getContext());
            item.setOnClickListener(
     
     this);
            
     
     //设置图片
            item.setImageBitmap(mItemBitmaps.get(i).getBitmap());
            
     
     //保存
            mGameOintuItems[i] = item;
            
     
     //设置ID
            item.setId(i + 
     
     1);
            
     
     //设置Tag
            item.setTag(i + 
     
     "_" + mItemBitmaps.get(i).getIndex());

            RelativeLayout.LayoutParams lp = 
     
     new RelativeLayout.LayoutParams(mItemWidth, mItemWidth);

            
     
     //判断不是最后一列
            
     
     if (i + 
     
     1 % mColumn != 
     
     0) {
                lp.rightMargin = mMagin;
            }

            
     
     //判断不是第一列
            
     
     if (i % mColumn != 
     
     0) {
                lp.addRule(RelativeLayout.RIGHT_OF, mGameOintuItems[i - 
     
     1].getId());
            }

            
     
     //判断如果不是第一行
            
     
     if ((i + 
     
     1) > mColumn) {
                lp.topMargin = mMagin;
                lp.addRule(RelativeLayout.BELOW, mGameOintuItems[i - mColumn].getId());
            }
            addView(item, lp);
        }
    }

    
     
     /**
     * 获取多个参数的最小值
     */
    
     
     private 
     
     int 
     
     min(
     
     int... params) {
        
     
     int min = params[
     
     0];
        
     
     //遍历
        
     
     for (
     
     int param : params) {
            
     
     if (param < min) {
                min = param;
            }
        }
        
     
     return min;
    }

    
     
     /**
     * 点击事件
     *
     * @param v
     */
    
     
     @Override
    
     
     public 
     
     void 
     
     onClick(View v) {

    }
}

代码的逻辑十分的简单，这点不假，而且注释也是相对来讲清晰易懂，这样，我们先测试一下，在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"
    android:padding="10dp">

    <com.lgl.ninegame.view.GameView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />



    RelativeLayout>

我们运行一下看看现在裁剪后的效果

这里写图片描述

可以的，那我们继续

三.实现图片交互

这里大家应该都知道，要用我们的点击事件了，我们继续在GameView里面编写

 /**
     * 点击的第一张图和第二张图，他们进行交换
     */
    private ImageView mFirst;
    private ImageView mSecond;

    /**
     * 点击事件
     *
     * @param v
     */
    @Override
    public void onClick(View v) {

        //重复点击
        if (mFirst == v) {
            //去掉颜色
            mFirst.setColorFilter(null);
            mFirst = null;
            return;
        }

        if (mFirst == null) {
            mFirst = (ImageView) v;
            //设置选中效果
            mFirst.setColorFilter(Color.parseColor("#55FF0000"));
            //第二次点击
        } else {
            mSecond = (ImageView) v;
            //交换
            exchangeView();
        }
    }

这里我们需要去写一个图片交换的方法

 /**
     * 图片交换
     */
    private void exchangeView() {
        //先去掉颜色
        mFirst.setColorFilter(null);

        String firstTag = (String) mFirst.getTag();
        String secondTag = (String) mSecond.getTag();

        String[] firstParams = firstTag.split("_");
        String[] scendParams = secondTag.split("_");

        //获取到bitmap并且替换
        mSecond.setImageBitmap(mItemBitmaps.get(Integer.parseInt(firstParams[0])).getBitmap());
        mFirst.setImageBitmap(mItemBitmaps.get(Integer.parseInt(scendParams[0])).getBitmap());

        //回到最初始的状态
        mFirst = mSecond = null;

    }

这样，我们就可以运行了

这里写图片描述

但是，大家有没有发现，他的小bitmap排序是错误的，这就需要我们去处理了

实际上是因为我们虽然交换了，但是tag没改，我们在回到最初始的状态之前加上以下代码：

//改变tag
 mFirst.setTag(secondTag);
 mSecond.setTag(firstTag);

四.交互动画

既然我们卡片已经实现了，那么接下来，我们怎么的也要去加点动画呀，开搞，我们先把公用的东西抽取出来

 /**
     * 获取tag
     *
     * @param tag
     * @return
     */
    public int getImageIdByTag(String tag) {
        String[] split = tag.split("_");
        return Integer.parseInt(split[0]);
    }

    /**
     * 获取图片的tag
     *
     * @param tag
     * @return
     */
    public int getImageIndex(String tag) {
        String[] split = tag.split("_");
        return Integer.parseInt(split[1]);
    }

    /**
     * 动画层，覆盖在viewGroup中
     */
    private RelativeLayout mAnimLayout;


    /**
     * 交互动画
     */
    private void setUpAnimLayout() {
        if (mAnimLayout == null) {
            mAnimLayout = new RelativeLayout(getContext());
            //添加到整体
            addView(mAnimLayout);
        }
    }

接着，我们需要修改以下图片交换的方法，添加一层动画层

/**
     * 图片交换
     */
    private void exchangeView() {
        mFirst.setColorFilter(null);
        // 构造我们的动画层
        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);

        // 设置动画
        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);

        // 监听动画
        anim.setAnimationListener(new Animation.AnimationListener()
        {
            @Override
            public void onAnimationStart(Animation animation)
            {
                mFirst.setVisibility(View.INVISIBLE);
                mSecond.setVisibility(View.INVISIBLE);

            }

            @Override
            public void onAnimationRepeat(Animation animation)
            {
                // TODO Auto-generated method stub

            }

            @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;
                mAnimLayout.removeAllViews();
            }
        });
    }

这样，我们就可以有动画效果了，我们来运行一下

这里写图片描述

到现在，我们就已经可以玩了，但是这样子就不叫游戏了，我们应该这样添加一些过关的逻辑

五.过关逻辑

其实过关的逻辑很简单的，只要我们在每次移动之后去判断是不是过关了就行，如下代码

 /**
     * 判断是否过关
     */
    private void checkSuccess() {
        boolean isSuccess = true;

        for (int i = 0; i < mGameOintuItems.length; i++) {
            //拿到所有的图片
            ImageView imageView  = mGameOintuItems[i];

            if(getImageIndex((String) imageView.getTag()) != i){
                isSuccess = false;
            }
        }
        if(isSuccess){
            Log.i("tag","成功");
            Toast.makeText(getContext(),"成功,进入下一关！",Toast.LENGTH_LONG).show();
        }
    }

OK，但是这个不是重点，重点是我们要下一关，而且要把相应的数据传递给MainActivity，这就要实现接口了

 private static final int TIME_CHANGED = 10;
    private static final int NEXT_LEVEL = 11;

    /**
     * 设置接口回调
     *
     * @param mListener
     */
    public void setOnGamemListener(GamePintuListener mListener) {

        this.mListener = mListener;
    }

    public GamePintuListener mListener;

    /**
     * 关数
     */
    private int level = 1;

    /**
     * 设置开启时间
     *
     * @param timeEnabled
     */
    public void setTimeEnabled(boolean timeEnabled) {
        isTimeEnabled = timeEnabled;
    }

    //接口
    private interface GamePintuListener {
        //关卡
        void nextLevel(int nextLevel);

        //时间
        void timechanged(int time);

        //游戏结束
        void gameOver();
    }

同时要实现下一关的方法

 /**
     * 下一关
     */
    public void nextLevel() {
        this.removeAllViews();
        mAnimLayout = null;
        mColumn++;
        isGameSuccess = false;
        initBitmap();
        initItem();
    }

这样，我们就可以在handler中操作了

//子线程操作
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case TIME_CHANGED:

                    break;
                case NEXT_LEVEL:

                    level = level + 1;

                    if(mListener!=null){

                        mListener.nextLevel(level);
                    }else{
                        nextLevel();
                    }
                    break;
            }
            super.handleMessage(msg);
        }
    };

这边的逻辑OK了之后，我们需要回到MainActivity去操作显示UI

gameview = (GameView) findViewById(R.id.gameview);
        gameview.setOnGamemListener(new GameView.GamePintuListener() {
            @Override
            public void nextLevel(int nextLevel) {

                new AlertDialog.Builder(MainActivity.this).setTitle("拼图完成").setMessage("美女抱回家").setPositiveButton("下一关", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        gameview.nextLevel();
                    }
                }).show();
            }

            @Override
            public void timechanged(int time) {

            }

            @Override
            public void gameOver() {

            }
        });

这样，我们再来演示一遍

这里写图片描述

六.记录时间

开发也到了最后了，我们把时间记录给实现了，我们还是的创建几个方法

/**
     * 是否显示时间
     */
    private void checkTimeEnable() {
        //如果我们开启了
        if (isTimeEnabled) {
            countTimeBaseLevel();
            handler.sendEmptyMessage(TIME_CHANGED);
        }
    }

    /**
     * 根据当前等级设置时间
     */
    private void countTimeBaseLevel() {
        mTime = (int) Math.pow(2, level) * 60;
    }

然后发送handler

                 case TIME_CHANGED:
                    if (isGameSuccess || isGameOver) {
                        return;
                    }

                    if (mListener != null) {
                        mListener.timechanged(mTime);
                        if (mTime == 0) {
                            isGameOver = true;
                            mListener.gameOver();
                            return;
                        }
                    }
                    mTime--;
                    handler.sendEmptyMessageDelayed(TIME_CHANGED, 1000);

                    break;

现在我们可以去MainActivityity实现逻辑了，这里的gameover逻辑可以这样下

@Override
            public void gameOver() {
                new AlertDialog.Builder(MainActivity.this).setTitle("游戏结束").setMessage("很遗憾没有成功抱到美女！").setPositiveButton("重新开始", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        //先不考虑
                    }
                }).setNegativeButton("退出", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                }).show();
            }
        });

时间

          @Override
            public void timechanged(int time) {
                //设置时间
                tv_time.setText("倒计时："+time);
            }

这里要记住设置显示效果

 //显示时间
 gameview.setTimeEnabled(true);

现在就可以倒计时了，同时，也可以监听到结束了

这里写图片描述

七.最后的补充

我们gameover以后也是需要操作的，我们有一个重新开始，我们只要写一个初始化的方法就可以了

    /**
     * 重新开始
     */
    public void restartGame() {
        isGameOver = false;
        mColumn--;
        nextLevel();

    }

这样就可以了

当然，我们游戏一般都是有暂停的，这个我们也加上，我们在GameView中新建方法

 /**
     * 暂停
     */
    public void pauseGame() {
        isPause = true;
        handler.removeMessages(TIME_CHANGED);
    }


    /**
     * 恢复
     */
    public void resumeGame() {
        if (isPause) {
            isPause = false;
            handler.sendEmptyMessage(TIME_CHANGED);
        }
    }

不过我们的目的是他后台时=不记录时间，所以只要和生命周期绑定就可以了


    @Override
    protected void onPause() {
        super.onPause();
        gameview.pauseGame();
    }

    @Override
    protected void onResume() {
        super.onResume();
        gameview.resumeGame();
    }

到这里，整个游戏算是正式的开发完整了，贴上完整的代码

MainActivity

package com.lgl.ninegame;

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

import com.lgl.ninegame.view.GameView;

public class MainActivity extends AppCompatActivity {

    private GameView gameview;

    private TextView tv_level, tv_time;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv_level = (TextView) findViewById(R.id.tv_level);
        tv_time = (TextView) findViewById(R.id.tv_time);

        gameview = (GameView) findViewById(R.id.gameview);

        //显示时间
        gameview.setTimeEnabled(true);

        gameview.setOnGamemListener(new GameView.GamePintuListener() {
            @Override
            public void nextLevel(final int nextLevel) {

                new AlertDialog.Builder(MainActivity.this).setTitle("拼图完成").setMessage("美女抱回家").setPositiveButton("下一关", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        gameview.nextLevel();
                        tv_level.setText("当前关卡" + nextLevel);
                    }
                }).show();
            }

            @Override
            public void timechanged(int time) {
                //设置时间
                tv_time.setText("倒计时：" + time);
            }

            @Override
            public void gameOver() {
                new AlertDialog.Builder(MainActivity.this).setTitle("游戏结束").setMessage("很遗憾没有成功抱到美女！").setPositiveButton("重新开始", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        gameview.restartGame();
                    }
                }).setNegativeButton("退出", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                }).show();
            }
        });
    }


    @Override
    protected void onPause() {
        super.onPause();
        gameview.pauseGame();
    }

    @Override
    protected void onResume() {
        super.onResume();
        gameview.resumeGame();
    }
}

GameView

package com.lgl.ninegame.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.lgl.ninegame.R;
import com.lgl.ninegame.utils.ImagePiece;
import com.lgl.ninegame.utils.ImageSplitterUtil;

import java.util.Collections;
import java.util.Comparator;
import java.util.List;

/**
 * 自定义容器
 * Created by LGL on 2016/5/2.
 */
public class GameView extends RelativeLayout implements View.OnClickListener {


    //默认3*3
    private int mColumn = 3;
    //容器的内边距
    private int mPadding;
    //小图的距离 dp
    private int mMagin = 3;
    //存储图片的，宽高 都是固定的，所以使用数组
    private ImageView[] mGameOintuItems;
    //宽度
    private int mItemWidth;
    //图片
    private Bitmap mBitmap;
    //切图后存储
    private List
   
   
     mItemBitmaps;
    
    
    //标记
    
    
    private 
    
    boolean once;

    
    
    //记录时间
    
    
    private 
    
    int mTime;

    
    
    //容器的一个宽度
    
    
    private 
    
    int mWidth;

    
    
    //判断游戏是否成功
    
    
    private 
    
    boolean isGameSuccess;

    
    
    //是否显示时间
    
    
    private 
    
    boolean isTimeEnabled = 
    
    false;

    
    
    /**
     * 动画层，覆盖在viewGroup中
     */
    
    
    private RelativeLayout mAnimLayout;

    
    
    private 
    
    boolean isGameOver;
    
    
    /**
     * 动画限制
     */
    
    
    private 
    
    boolean isAniming;

    
    
    private 
    
    static 
    
    final 
    
    int TIME_CHANGED = 
    
    10;
    
    
    private 
    
    static 
    
    final 
    
    int NEXT_LEVEL = 
    
    11;

    
    
    /**
     * 设置接口回调
     *
     * @param mListener
     */
    
    
    public 
    
    void 
    
    setOnGamemListener(GamePintuListener mListener) {

        
    
    this.mListener = mListener;
    }

    
    
    public GamePintuListener mListener;

    
    
    /**
     * 关数
     */
    
    
    private 
    
    int level = 
    
    1;

    
    
    /**
     * 设置开启时间
     *
     * @param timeEnabled
     */
    
    
    public 
    
    void 
    
    setTimeEnabled(
    
    boolean timeEnabled) {
        isTimeEnabled = timeEnabled;
    }

    
    
    //接口
    
    
    public 
    
    interface GamePintuListener {
        
    
    //关卡
        
    
    void nextLevel(
    
    int nextLevel);

        
    
    //时间
        
    
    void timechanged(
    
    int time);

        
    
    //游戏结束
        
    
    void gameOver();
    }

    
    
    //子线程操作
    
    
    private Handler handler = 
    
    new Handler() {
        
    
    @Override
        
    
    public 
    
    void 
    
    handleMessage(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--;
                    handler.sendEmptyMessageDelayed(TIME_CHANGED, 
    
    1000);

                    
    
    break;
                
    
    case NEXT_LEVEL:

                    level = level + 
    
    1;

                    
    
    if (mListener != 
    
    null) {

                        mListener.nextLevel(level);
                    } 
    
    else {
                        nextLevel();
                    }
                    
    
    break;
            }
            
    
    super.handleMessage(msg);
        }
    };


    
    
    public 
    
    GameView(Context context) {

        
    
    this(context, 
    
    null);
    }

    
    
    public 
    
    GameView(Context context, AttributeSet attrs) {

        
    
    this(context, attrs, 
    
    0);
    }

    
    
    public 
    
    GameView(Context context, AttributeSet attrs, 
    
    int defStyleAttr) {
        
    
    super(context, attrs, defStyleAttr);

        init();
    }

    
    
    /**
     * 初始化
     */
    
    
    private 
    
    void 
    
    init() {
        
    
    //单位转换——dp-px
        mMagin = (
    
    int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 
    
    3, getResources().getDisplayMetrics());

        mPadding = min(getPaddingLeft(), getPaddingRight(), getPaddingTop(), getPaddingBottom());
    }

    
    
    /**
     * 确定当前布局的大小，我们要设置成正方形
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    
    
    @Override
    
    
    protected 
    
    void 
    
    onMeasure(
    
    int widthMeasureSpec, 
    
    int heightMeasureSpec) {
        
    
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        
    
    //拿到容器的高宽最小值
        mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());

        
    
    if (!once) {
            
    
    //进行切图和排序
            initBitmap();

            
    
    //设置imageview(item)的宽高等属性
            initItem();

            
    
    //根据关卡设置时间
            checkTimeEnable();

            once = 
    
    true;

        }
        setMeasuredDimension(mWidth, mWidth);
    }

    
    
    /**
     * 是否显示时间
     */
    
    
    private 
    
    void 
    
    checkTimeEnable() {
        
    
    //如果我们开启了
        
    
    if (isTimeEnabled) {
            countTimeBaseLevel();
            handler.sendEmptyMessage(TIME_CHANGED);
        }
    }

    
    
    /**
     * 根据当前等级设置时间
     */
    
    
    private 
    
    void 
    
    countTimeBaseLevel() {
        mTime = (
    
    int) Math.pow(
    
    2, level) * 
    
    60;
    }

    
    
    /**
     * 进行切图和排序
     */
    
    
    private 
    
    void 
    
    initBitmap() {
        
    
    //判断是否存在这张图片
        
    
    if (mBitmap == 
    
    null) {
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.img);
        }
        
    
    //进行裁剪
        mItemBitmaps = ImageSplitterUtil.splitImage(mBitmap, mColumn);

        
    
    //裁剪玩后需要进行顺序打乱sort
        Collections.sort(mItemBitmaps, 
    
    new Comparator
    
    
     () {
            
     
     @Override
            
     
     public 
     
     int 
     
     compare(ImagePiece lhs, ImagePiece rhs) {

                
     
     //生成随机数，如果》0.5返回1否则返回-1
                
     
     return Math.random() > 
     
     0.5 ? 
     
     1 : -
     
     1;
            }
        });

    }

    
     
     /**
     * 设置imageview(item)的宽高等属性
     */
    
     
     private 
     
     void 
     
     initItem() {
        
     
     //（ 容器的宽度 - 内边距 * 2  - 间距  ） /  裁剪的数量
        mItemWidth = (mWidth - mPadding * 
     
     2 - mMagin * (mColumn - 
     
     1)) / mColumn;
        
     
     //几 * 几
        mGameOintuItems = 
     
     new ImageView[mColumn * mColumn];

        
     
     //开始排放
        
     
     for (
     
     int i = 
     
     0; i < mGameOintuItems.length; i++) {
            ImageView item = 
     
     new ImageView(getContext());
            item.setOnClickListener(
     
     this);
            
     
     //设置图片
            item.setImageBitmap(mItemBitmaps.get(i).getBitmap());
            
     
     //保存
            mGameOintuItems[i] = item;
            
     
     //设置ID
            item.setId(i + 
     
     1);
            
     
     //设置Tag
            item.setTag(i + 
     
     "_" + mItemBitmaps.get(i).getIndex());

            RelativeLayout.LayoutParams lp = 
     
     new RelativeLayout.LayoutParams(mItemWidth, mItemWidth);

            
     
     //判断不是最后一列
            
     
     if (i + 
     
     1 % mColumn != 
     
     0) {
                lp.rightMargin = mMagin;
            }

            
     
     //判断不是第一列
            
     
     if (i % mColumn != 
     
     0) {
                lp.addRule(RelativeLayout.RIGHT_OF, mGameOintuItems[i - 
     
     1].getId());
            }

            
     
     //判断如果不是第一行
            
     
     if ((i + 
     
     1) > mColumn) {
                lp.topMargin = mMagin;
                lp.addRule(RelativeLayout.BELOW, mGameOintuItems[i - mColumn].getId());
            }
            addView(item, lp);
        }
    }

    
     
     /**
     * 获取多个参数的最小值
     */
    
     
     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;

    
     
     /**
     * 点击事件
     *
     * @param v
     */
    
     
     @Override
    
     
     public 
     
     void 
     
     onClick(View v) {
        
     
     //如果点击了一次，你还点击，则无效
        
     
     if (isAniming) {
            
     
     return;
        }

        
     
     //重复点击
        
     
     if (mFirst == v) {
            
     
     //去掉颜色
            mFirst.setColorFilter(
     
     null);
            mFirst = 
     
     null;
            
     
     return;
        }

        
     
     if (mFirst == 
     
     null) {
            mFirst = (ImageView) v;
            
     
     //设置选中效果
            mFirst.setColorFilter(Color.parseColor(
     
     "#55FF0000"));
            
     
     //第二次点击
        } 
     
     else {
            mSecond = (ImageView) v;
            
     
     //交换
            exchangeView();
        }
    }

    
     
     /**
     * 图片交换
     */
    
     
     private 
     
     void 
     
     exchangeView() {
        mFirst.setColorFilter(
     
     null);
        
     
     // 构造我们的动画层
        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);

        
     
     // 设置动画
        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);

        
     
     // 监听动画
        anim.setAnimationListener(
     
     new Animation.AnimationListener() {
            
     
     @Override
            
     
     public 
     
     void 
     
     onAnimationStart(Animation animation) {
                mFirst.setVisibility(View.INVISIBLE);
                mSecond.setVisibility(View.INVISIBLE);

                isAniming = 
     
     true;
            }

            
     
     @Override
            
     
     public 
     
     void 
     
     onAnimationRepeat(Animation animation) {
                
     
     // TODO Auto-generated method stub

            }

            
     
     @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;
                mAnimLayout.removeAllViews();

                
     
     //每次移动完成判断是否过关
                checkSuccess();

                isAniming = 
     
     false;
            }
        });
    }

    
     
     /**
     * 判断是否过关
     */
    
     
     private 
     
     void 
     
     checkSuccess() {
        
     
     boolean isSuccess = 
     
     true;

        
     
     for (
     
     int i = 
     
     0; i < mGameOintuItems.length; i++) {
            
     
     //拿到所有的图片
            ImageView imageView = mGameOintuItems[i];

            
     
     if (getImageIndex((String) imageView.getTag()) != i) {
                isSuccess = 
     
     false;
            }
        }
        
     
     if (isSuccess) {

            isGameSuccess = 
     
     true;

            handler.removeMessages(TIME_CHANGED);

            Log.i(
     
     "tag", 
     
     "成功");
            Toast.makeText(getContext(), 
     
     "成功,进入下一关！", Toast.LENGTH_LONG).show();
            handler.sendEmptyMessage(NEXT_LEVEL);

        }
    }


    
     
     /**
     * 获取tag
     *
     * @param tag
     * @return
     */
    
     
     public 
     
     int 
     
     getImageIdByTag(String tag) {
        String[] split = tag.split(
     
     "_");
        
     
     return Integer.parseInt(split[
     
     0]);
    }

    
     
     /**
     * 获取图片的tag
     *
     * @param tag
     * @return
     */
    
     
     public 
     
     int 
     
     getImageIndex(String tag) {
        String[] split = tag.split(
     
     "_");
        
     
     return Integer.parseInt(split[
     
     1]);
    }

    
     
     /**
     * 交互动画
     */
    
     
     private 
     
     void 
     
     setUpAnimLayout() {
        
     
     if (mAnimLayout == 
     
     null) {
            mAnimLayout = 
     
     new RelativeLayout(getContext());
            
     
     //添加到整体
            addView(mAnimLayout);
        }
    }

    
     
     /**
     * 下一关
     */
    
     
     public 
     
     void 
     
     nextLevel() {
        
     
     this.removeAllViews();
        mAnimLayout = 
     
     null;
        mColumn++;
        isGameSuccess = 
     
     false;
        checkTimeEnable();
        initBitmap();
        initItem();
    }

    
     
     /**
     * 重新开始
     */
    
     
     public 
     
     void 
     
     restartGame() {
        isGameOver = 
     
     false;
        mColumn--;
        nextLevel();

    }

    
     
     //暂停状态
    
     
     private 
     
     boolean isPause;

    
     
     /**
     * 暂停
     */
    
     
     public 
     
     void 
     
     pauseGame() {
        isPause = 
     
     true;
        handler.removeMessages(TIME_CHANGED);
    }


    
     
     /**
     * 恢复
     */
    
     
     public 
     
     void 
     
     resumeGame() {
        
     
     if (isPause) {
            isPause = 
     
     false;
            handler.sendEmptyMessage(TIME_CHANGED);
        }
    }
}

我们最终的运行结果

这里写图片描述

Android拼图游戏的设计逻辑，从切图到交互动画，从关卡到倒计时，实例提高！

Android拼图游戏的设计逻辑，从切图到交互动画，从关卡到倒计时，实例提高！

一.切图工具类

ImagePiece

ImageSplitterUtil

二.自定义容器

GameView

三.实现图片交互

四.交互动画

五.过关逻辑

六.记录时间

七.最后的补充

MainActivity

GameView

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Android拼图游戏的设计逻辑，从切图到交互动画，从关卡到倒计时，实例提高！

Android拼图游戏的设计逻辑，从切图到交互动画，从关卡到倒计时，实例提高！

一.切图工具类

ImagePiece

ImageSplitterUtil

二.自定义容器

GameView

三.实现图片交互

四.交互动画

五.过关逻辑

六.记录时间

七.最后的补充

MainActivity

GameView

热门文章

最新文章

相关课程

相关电子书

相关实验场景