13.1　移动迷宫——拼图游戏

13.1　移动迷宫——拼图游戏" level="2">13.1　移动迷宫——拼图游戏
- 13.1.1　准备工作" level="3">13.1.1　准备工作
  - 13.1.1.1　获取屏幕相关属性
  - 13.1.1.2　美化按钮
- 13.1.2　初始界面" level="3">13.1.2　初始界面
  - 13.1.2.1　点击事件
- 13.1.3　拼图界面" level="3">13.1.3　拼图界面
- 13.1.4　效果预览与功能进阶" level="3">13.1.4　效果预览与功能进阶

13.1　移动迷宫——拼图游戏" class="reference-link">13.1　移动迷宫——拼图游戏

本例要实现的是一个九宫格的拼图游戏。当初笔者想到制作这个App是因为看到同事在Web上玩的拼图程序，回想到了小时候玩的九宫格拼图游戏，于是便决定在Android上实现这样一个九宫格拼图游戏。确定好目标之后，就需要设计自己的拼图游戏了。要知道，在这些练手的程序里，你可以主宰一切。你希望程序是什么样的，它就可以是什么样的，不需要考虑别人的感受，只要自己用的舒服就可以了，毕竟它不是一个成熟的商业项目。当然，你也可以在后期对这些练手的程序进行优化，听取其他用户对这个App的评价与建议，以此修改、发布你的App。

首先，要设计这个App应该有哪些页面。既然要拼图，就选取一张图片。如果只有一张图片，就太单调了，因此设计的第一个页面，就是一个选择要拼图的图片的页面，大概的页面式样就如图13.1所示。

一般玩的拼图游戏都是3×3九宫格的拼图游戏，但是这样的拼图调试时间比较长，同时也为了增加游戏的可玩性、可拓展性，笔者设计了一个选择难度的界面，即可以选择2×2（调试时使用）、3×3（正常模式）、4×4（高手模式）这三个难度。那么首先，就来实现这图13.1中的界面，其他的功能都先不管，将目标分段实现的方法，可以让我们在学习、练手的时候更有成就感，也更有动力继续下去。

图13.1　选择图片界面

在开始之前，可以先创建一些常用的共通方法、共通资源，比如获取屏幕宽高、像素密度等功能，这些方法或者资源并不用每次都创建，你可以建一个代码仓库进行积累，这样每次使用的时候就可以很方便的拿来用了，当你积累得越来越多，再进行下架构的组织，一个Android开发框架就显露雏形了。

13.1.1　准备工作" class="reference-link">13.1.1　准备工作

13.1.1.1　获取屏幕相关属性

创建一个ScreenUtil用来帮助我们获取屏幕的宽高和像素密度等功能，代码如下所示。

    public class ScreenUtil {
 
        /**
         *获取屏幕相关参数
         *
         * @param context context
         * @return DisplayMetrics屏幕宽高
         */
        public static DisplayMetrics getScreenSize(Context context) {
            DisplayMetrics metrics = new DisplayMetrics();
            WindowManager wm = (WindowManager) context.getSystemService(
                    Context.WINDOW_SERVICE);
            Display display = wm.getDefaultDisplay();
            display.getMetrics(metrics);
            return metrics;
        }
 
        /**
         *获取屏幕density
         *
         * @param context context
         * @return density屏幕density
         */
        public static float getDeviceDensity(Context context) {
            DisplayMetrics metrics = new DisplayMetrics();
            WindowManager wm = (WindowManager) context.getSystemService(
                    Context.WINDOW_SERVICE);
            wm.getDefaultDisplay().getMetrics(metrics);
            return metrics.density;
        }
    }

这些方法基本在每个App中都会用到，所以非常适合作为工具类来使用。

13.1.1.2　美化按钮

通过定义shape和selector来对原生的按钮进行美化是一个非常重要的技巧。shape可以非常方便地实现流行的扁平化UI和圆角等效果，代码如下所示。

    <?xml version="1.0" encoding="UTF-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
 
        <item android:state_pressed="true">
            <shape android:shape="rectangle">
 
                <!--填充的颜色-->
                <solid android:color="#33444444" />
                <!--设置按钮的四个角为弧形-->
                <!-- android:radius弧形的半径-->
                <corners android:radius="5dip" />
 
                <!-- padding：Button里面的文字与Button边界的间隔-->
                <padding
                    android:bottom="10dp"
                    android:left="10dp"
                    android:right="10dp"
                    android:top="10dp" />
            </shape>
        </item>     <item>
            <shape android:shape="rectangle">
 
                <!--填充的颜色-->
                <solid android:color="@color/title_text" />
                <!--设置按钮的四个角为弧形-->
                <!-- android:radius弧形的半径-->
                <corners android:radius="5dip" />
 
                <!-- padding：Button里面的文字与Button边界的间隔-->
                <padding
                    android:bottom="10dp"
                    android:left="10dp"
                    android:right="10dp"
                    android:top="10dp" />
            </shape>
        </item>
    </selector>

这样一个美化过的圆角按钮，就可以在后面的代码中直接引用。当然，你还可以在资源文件中定义String、Dimens、Style等，但是由于这只是一个练手项目，所以读者朋友们可以添加，也可以在程序中暂时使用Hard Code，等后期优化时再提取这些资源到资源文件中。下面就可以开始实行程序的初始界面了。

13.1.2　初始界面" class="reference-link">13.1.2　初始界面

初始界面非常简单，分别有以下几个部分组成：标题、选择难度的提示和展示图片区域。对于标题可以使用TextView，选择难度的提示可以使用PopupWindow，展示图片的区域可以使用一个GridView显示。有了这样的思路，再来实现就比较简单了，代码如下所示。

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/main_bg">
 
        <LinearLayout
            android:id="@+id/ll_puzzle_main_spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_margin="10dip">
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/puzzle_main_type"
                android:textColor="@color/main_text"
                android:textSize="@dimen/text_title" />
 
            <TextView
                android:id="@+id/tv_puzzle_main_type_selected"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/textview_click"
                android:text="@string/puzzle_main_type_selected"
                android:textColor="@color/main_text"
                android:textSize="@dimen/text_title" />
        </LinearLayout>
 
        <GridView
            android:id="@+id/gv_xpuzzle_main_pic_list"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/ll_puzzle_main_spinner"
            android:layout_centerHorizontal="true"
            android:layout_margin="@dimen/padding"
            android:gravity="center_horizontal"
            android:horizontalSpacing="@dimen/padding"
            android:numColumns="4"
            android:padding="@dimen/padding"
            android:verticalSpacing="@dimen/padding"/>
 
    </RelativeLayout>

有了布局之后，先来实现点击选择难度的提示Popup。在主界面程序MainActivity中创建一个方法，用来显示Popup，代码如下所示。

    /**
     *显示popup window
     *
     * @param view popup window
     */
    private void popupShow(View view) {
        int density = (int) ScreenUtil.getDeviceDensity(this);
        //显示popup window
        mPopupWindow = new PopupWindow(mPopupView,
                200 * density, 50 * density);
        mPopupWindow.setFocusable(true);
        mPopupWindow.setOutsideTouchable(true);
        //透明背景
        Drawable transpent = new ColorDrawable(Color.TRANSPARENT);
        mPopupWindow.setBackgroundDrawable(transpent);
        //获取位置
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        mPopupWindow.showAtLocation(
                view,
                Gravity.NO_GRAVITY,
                location[0] - 40 * density,
                location[1] + 30 * density);
    }

使用PopupWindow没有什么太难的地方，只是有一点需要注意，就是PopupWindow的背景。如果不设置背景，有时候可能会导致PopupWindow出现一些比较奇怪的问题，所以这里给PopupWindow添加一个透明的背景。

下面就来创建用于展示图片的GridView。与ListView非常类似，第一步，先创建一个数据适配器，在getView()方法中动态生成一些ImageView用于展示要选择的图片，代码如下所示。

    @Override
    public View getView(int position, View convertView, ViewGroup arg2) {
        ImageView iv_pic_item = nul;
        int density = (int) ScreenUtil.getDeviceDensity(context);
        if (convertView == null) {
            iv_pic_item = new ImageView(context);
            //设置布局图片
            iv_pic_item.setLayoutParams(new GridView.LayoutParams(
                    80 * density,
                    100 * density));
            //设置显示比例类型
            iv_pic_item.setScaleType(ImageView.ScaleType.FIT_XY);
        } else {
            iv_pic_item = (ImageView) convertView;
        }
        iv_pic_item.setBackgroundColor(color.black);
        iv_pic_item.setImageBitmap(picList.get(position));
    return iv_pic_item;
    }

下面我们就可以在主界面程序MainActivity中来添加并展示这些图片了。这里定义一些固定的图片用于选择拼图的备选图，再添加一个按钮用于自定义图片，比如从相册选择或者通过拍照来设置拼图图片。

首先将所有要显示的图片保存到要传入数据适配器的List中，代码如下所示。

    mGvPicList = (GridView) findViewById(
            R.id.gv_xpuzzle_main_pic_list);
    //初始化Bitmap数据
    mResPicId = new int[]{
            R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
            R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
            R.drawable.pic7, R.drawable.pic8, R.drawable.pic9,
            R.drawable.pic10, R.drawable.pic11, R.drawable.pic12,
            R.drawable.pic13, R.drawable.pic14,
            R.drawable.pic15, R.mipmap.ic_launcher};
    Bitmap[] bitmaps = new Bitmap[mResPicId.length];
    for (int i = 0; i < bitmaps.length; i++) {
        bitmaps[i] = BitmapFactory.decodeResource(
                getResources(), mResPicId[i]);
        mPicList.add(bitmaps[i]);
    }

再通过数据适配器来将这些图片展示出来，代码如下所示。

    //数据适配器
    mGvPicList.setAdapter(new GridPicListAdapter(MainActivity.this, mPicList));

到目前为止，运行程序，显示效果如图13.2所示。

图13.2　选择拼图图片界面

13.1.2.1　点击事件

不过现在还没有设置图片的点击功能，我们希望点击默认的图片后，进入拼图界面，而点击最后一个ic_launcher的图片后，能够弹出对话框让用户选择本地图库或者进行拍照来设置图片。先来看看如何选择本地图库。使用本地图库，需要借助系统Intent Action来实现，代码如下所示。

    //返回码：本地图库
    private static final int RESULT_IMAGE = 100;
    // IMAGE TYPE
    private static final String IMAGE_TYPE = "image/*";
    ……
    //本地图库
    Intent intent = new Intent(Intent.ACTION_PICK, null);
    intent.setDataAndType(
            MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
            IMAGE_TYPE);
    startActivityForResult(intent, RESULT_IMAGE);

选择相机拍照同样也是使用Intent Action，代码如下所示。

    // Temp照片路径
    public static String TEMP_IMAGE_PATH;
    TEMP_IMAGE_PATH =
            Environment.getExternalStorageDirectory().getPath() +
                    "/temp.png";
    //返回码：相机
    private static final int RESULT_CAMERA = 200;
    ……
    //系统相机
    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    Uri photoUri = Uri.fromFile(new File(TEMP_IMAGE_PATH));
    intent.putExtra(
            MediaStore.EXTRA_OUTPUT,
            photoUri);
    startActivityForResult(intent, RESULT_CAMERA);

这里需要注意的是，由于要对ExternalStorage进行读写，所以必须在AndroidMainifest文件中申明所需要用到的权限，代码如下所示。

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

在调用系统本地图库或者相机拍照后，在程序主界面的onActivityResult()回调方法中来获取选择的图片、拍照的图片，代码如下所示。

    /**
     *调用图库相机回调方法
     */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK) {
            if (requestCode == RESULT_IMAGE && data != null) {
                //相册
                Cursor cursor = this.getContentResolver().query(
                        data.getData(), null, null, null, null);
                cursor.moveToFirst();
                String imagePath = cursor.getString(
                        cursor.getColumnIndex("_data"));
                Intent intent = new Intent(
                        MainActivity.this,
                        PuzzleMain.class);
                intent.putExtra("mPicPath ", imagePath);
                intent.putExtra("mType", mType);
                cursor.close();
                startActivity(intent);
            } else if (requestCode == RESULT_CAMERA) {
                //相机
                Intent intent = new Intent(
                        MainActivity.this,
                        PuzzleMain.class);
                intent.putExtra("mPicPath", TEMP_IMAGE_PATH);
                intent.putExtra("mType", mType);
                startActivity(intent);
            }
        }
    }

唯一比较复杂的是对选择图库图片的获取，需要通过ContentResolver来进行查询。不过，这些代码基本都可以作为通用代码集成到你的代码仓库中进行积累，并不需要每次使用都重新去想是如何实现的。最后，只要将选择的难度和选择图片的路径通过Intent传递到拼图界面即可。

再处理完了比较复杂的本地图库和相机拍照两种方式之后，剩下的选择默认图片的点击事件就非常简单了，只要将选择的难度等级和图片的资源ID通过Intent传递到拼图界面即可，代码如下所示。

    // Item点击监听
    mGvPicList.setOnItemClickListener(new OnItemClickListener() {
 
        @Override
        public void onItemClick(AdapterView<?> arg0, View view,
                                int position, long arg3) {
            if (position == mResPicId.length - 1) {
                //选择本地图库、相机
                showDialogCustom();
            } else {
                //选择默认图片
                Intent intent = new Intent(
                        MainActivity.this,
                        PuzzleMain.class);
                intent.putExtra("picSelectedID", mResPicId[position]);
                intent.putExtra("mType", mType);
                startActivity(intent);
            }
        }
    });

13.1.3　拼图界面" class="reference-link">13.1.3　拼图界面

拼图界面是游戏的主界面，我们将用户选择的图片根据选择的难度进行分割，并抽出一张图片用空白块代替，同时随机打乱顺序，作为拼图的初始游戏界面。当用户点击空白块周围上下左右相邻的图片时，可以移动该图片，当整个图片的位置都与原始图片一致时，拼图完成。

通过上面的分析，同样是先来实现界面的布局，简单的设计如图13.3所示。

图13.3　拼图界面

在图13.3所示的拼图界面中，我们将功能划分为以下几个部分：计时、记步提示，显示原图、重新开始游戏、返回按钮和拼图主界面。这个布局与程序主界面的布局类似，上面的计时、记步，可以使用TextView，并通过Handler来进行刷新显示。中间同样可以使用GridView来展示待拼图的界面，并完成点击的逻辑。而下面三个按钮，更加简单了，整个布局，代码如下所示。

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/rl_puzzle_main_main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/main_bg">
 
        <LinearLayout
            android:id="@+id/ll_puzzle_main_spinner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/padding"
            android:gravity="center_horizontal">
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/puzzle_main_steps"
                android:textColor="@color/title_text"
                android:textSize="@dimen/text_title" />
 
            <TextView
                android:id="@+id/tv_puzzle_main_counts"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:paddingRight="50dip"
                android:text="1"
                android:textColor="@color/title_text"
                android:textSize="@dimen/text_title" />
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/puzzle_main_time"
                android:textColor="@color/title_text"
                android:textSize="@dimen/text_title" />
 
            <TextView
                android:id="@+id/tv_puzzle_main_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="1"
                android:textColor="@color/title_text"
                android:textSize="@dimen/text_title" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/ll_puzzle_main_btns"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_margin="@dimen/padding">
 
            <Button
                android:id="@+id/btn_puzzle_main_img"
                style="@style/btn_style"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/padding"
                android:background="@drawable/white_button"
                android:text="@string/puzzle_main_img" />
 
            <Button
                android:id="@+id/btn_puzzle_main_restart"
                style="@style/btn_style"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/padding"
                android:background="@drawable/white_button"
                android:text="@string/puzzle_main_reset" />
 
            <Button
                android:id="@+id/btn_puzzle_main_back"
                style="@style/btn_style"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/padding"
                android:background="@drawable/white_button"
                android:text="@string/puzzle_main_back" />
        </LinearLayout>
 
        <GridView
            android:id="@+id/gv_puzzle_main_detail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/ll_puzzle_main_btns"
            android:layout_below="@id/ll_puzzle_main_spinner"
            android:layout_centerInParent="true"
            android:layout_margin="@dimen/padding" />
 
    </RelativeLayout>

在完成界面布局后，我们继续来创建游戏的实现逻辑。

13.1.3.1　拼图算法

大家可不要小看了这个简单的拼图游戏，它的算法可是人工智能领域的一个非常著名的算法——N Puzzle问题。随机交换图片的位置之后，生成的拼图游戏很多都是无解的，经测试，这个比例高达50%左右，所以必须先判断生成的拼图是否有解。

我们将图片暂时用数字来代替，这样整个拼图游戏就变成了一个数字矩阵，假设随机得到了这个矩阵，其中X用来代表空格的图片，如图13.4所示。

图13.4　拼图矩阵

对图片拼图的还原，与还原图13.4中的数字矩阵，其实是一个道理。现在，将这个矩阵写成一维数组的形式，并将其记为序列A，如下所示。

    A = {12, 1, 10, 2, 7, 11, 4, 14, 5, X, 9, 15, 8, 13, 6, 3}

再定义一个“倒置变量值”的算法——T。Ti表示序列A中位于第i位之后，比Ai小的元素的个数（不算X）。例如对上面的序列A中的每个元素进行“倒置变量值”的计算，其结果如下所示。

    11, 0, 8, 0, 4, 6, 1, 6, 1, 3, 4, 2, 2, 1

最后，求得所有“倒置变量值”的和SumT = 49。在N Puzzle算法中，使用如下两个原则来判断一个N Puzzle问题是否有解。

如果序列A的宽度为奇数，那么每个可解的问题所定义的“倒置变量值”的和——SumT必须是偶数。
如果序列A的宽度为偶数，那么当空格X位于从下往上数的奇数行中时，定义的“倒置变量值”的和——SumT必须是偶数；当空格X位于从下往上数的偶数行中时，定义的“倒置变量值”的和——SumT必须是奇数。

关于N Puzzle问题的证明，不是本实例的重点，所以这里就不详细证明了，感兴趣的读者可以去网上搜索相关的证明方法。

当我们知道了这样一个判断是否有解的算法后，就可以通过算法来生成一定有解的拼图游戏了。

13.1.3.2　图片Item实体类

在开始编写具体的图片处理逻辑前，需要将每个分割后的图片抽象为一个实体类。在这个实体类中封装一些关于这个Item的基本属性，比如对这个Item的编号（与算法中的编号类似），这个Item所要显示图片的ID等，代码如下所示。

    /**
     *拼图Item逻辑实体类：封装逻辑相关属性
     *
     * @author xys
     */
    public class ItemBean {
 
        // Item的ID
        private int mItemId;
        // Bitmap的ID
        private int mBitmapId;
        // mBitmap
        private Bitmap mBitmap;
 
        public ItemBean() {
        }
 
        public ItemBean(int mItemId, int mBitmapId, Bitmap mBitmap) {
            this.mItemId = mItemId;
            this.mBitmapId = mBitmapId;
            this.mBitmap = mBitmap;
    }
    ……
    get、set方法
    ……
    }

在后面在程序中，我们就可以以面向对象的方式来操纵每个小的拼图Item。

13.1.3.3　图片工具

在了解了算法和抽象出实体类后，我们继续完成拼图游戏。从程序主界面上通过Intent将要进行拼图的图片资源ID和难度Type传递到了拼图的主界面。在获取到图片后，需要对这个图片进行一下处理，将图片调整到合适的大小并进行分割，因此创建一个ImagesUtil工具类，代码如下所示。

    /**
     *图像工具类：实现图像的分割与自适应
     *
     * @author xys
     */
    public class ImagesUtil {
 
        public ItemBean itemBean;
 
        /**
         *切图、初始状态（正常顺序）
         *
         * @param type       游戏种类
         * @param picSelected选择的图片
         * @param context     context
         */
        public void createInitBitmaps(int type, Bitmap picSelected, Context context) {
            Bitmap bitmap = null;
            List<Bitmap> bitmapItems = new ArrayList<Bitmap>();
            //每个Item的宽高
            int itemWidth = picSelected.getWidth() / type;
            int itemHeight = picSelected.getHeight() / type;
            for (int i = 1; i <= type; i++) {
                for (int j = 1; j <= type; j++) {
                    bitmap = Bitmap.createBitmap(
                            picSelected,
                            (j - 1) * itemWidth,
                            (i - 1) * itemHeight,
                            itemWidth,
                            itemHeight);
                    bitmapItems.add(bitmap);
                    itemBean = new ItemBean(
                            (i - 1) * type + j,
                            (i - 1) * type + j,
                            bitmap);
                    GameUtil.mItemBeans.add(itemBean);
                }
            }
            //保存最后一个图片在拼图完成时填充
            PuzzleMain.mLastBitmap = bitmapItems.get(type * type - 1);
            //设置最后一个为空Item
            bitmapItems.remove(type * type - 1);
            GameUtil.mItemBeans.remove(type * type - 1);
            Bitmap blankBitmap = BitmapFactory.decodeResource(
                    context.getResources(), R.drawable.blank);
            blankBitmap = Bitmap.createBitmap(
                    blankBitmap, 0, 0, itemWidth, itemHeight);
 
            bitmapItems.add(blankBitmap);
            GameUtil.mItemBeans.add(new ItemBean(type * type, 0, blankBitmap));
            GameUtil.mBlankItemBean = GameUtil.mItemBeans.get(type * type - 1);
        }
 
        /**
         *处理图片放大、缩小到合适位置
         *
         * @param newWidth 缩放后Width
         * @param newHeight缩放后Height
         * @param bitmap    bitmap
         * @return bitmap
         */
        public Bitmap resizeBitmap(float newWidth, float newHeight, Bitmap bitmap) {
            Matrix matrix = new Matrix();
            matrix.postScale(
                    newWidth / bitmap.getWidth(),
                    newHeight / bitmap.getHeight());
            Bitmap newBitmap = Bitmap.createBitmap(
                    bitmap, 0, 0,
                    bitmap.getWidth(),
                    bitmap.getHeight(),
                    matrix, true);
            return newBitmap;
        }
    }

通过这两步处理，就把图片分割成了N×N个小的Item，并将最后一个图片剔除，用于显示要移动的空格图片（即数字X）。最后，通过类似主界面上的GridView的数据适配器，将这些图片通过数据适配器，添加到拼图游戏的GridView中显示出来。

接下来，我们就要打乱顺序，生成真正用于拼图的游戏界面。

13.1.3.4　生成游戏

前面我们获取了按顺序分割的图片，下面通过一个循环来随机交换Item中的图片，从而生成杂乱的拼图游戏。前面说了，随机生成的拼图游戏有将近50%都是无解的，所以还需要判断当前生成的游戏是否有解，这个算法已经在前面的学习中讲解过了，即倒置和算法。下面对这些方法进行逐个分析。

首先是生成随机的Item，代码如下所示。

    /**
     *生成随机的Item
     */
    public static void getPuzzleGenerator() {
        int index = 0;
        //随机打乱顺序
        for (int i = 0; i < mItemBeans.size(); i++) {
            index = (int) (Math.random() *
                    PuzzleMain.TYPE * PuzzleMain.TYPE);
            swapItems(mItemBeans.get(index), GameUtil.mBlankItemBean);
        }
        List<Integer> data = new ArrayList<Integer>();
 
        for (int i = 0; i < mItemBeans.size(); i++) {
            data.add(mItemBeans.get(i).getBitmapId());
        }
        //判断生成是否有解
        if (canSolve(data)) {
            return;
        } else {
            getPuzzleGenerator();
        }
    }

在这个方法中，需要用到另外三个方法，即swapItems()——交换图片，canSolve()——判断是否有解，getInversions()——计算倒置和，代码分别如下所示。

    /**
     *交换空格与点击Item的位置
     *
     * @param from 交换图
     * @param blank空白图
     */
    public static void swapItems(ItemBean from, ItemBean blank) {
        ItemBean tempItemBean = new ItemBean();
        //交换BitmapId
        tempItemBean.setBitmapId(from.getBitmapId());
        from.setBitmapId(blank.getBitmapId());
        blank.setBitmapId(tempItemBean.getBitmapId());
        //交换Bitmap
        tempItemBean.setBitmap(from.getBitmap());
        from.setBitmap(blank.getBitmap());
        blank.setBitmap(tempItemBean.getBitmap());
        //设置新的Blank
        GameUtil.mBlankItemBean = from;
    }
 
    /**
 
     *该数据是否有解
     *
     * @param data拼图数组数据
     * @return该数据是否有解
     */
    public static boolean canSolve(List<Integer> data) {
        //获取空格ID
        int blankId = GameUtil.mBlankItemBean.getItemId();
        //可行性原则
        if (data.size() % 2 == 1) {
            return getInversions(data) % 2 == 0;
        } else {
            //从下往上数,空格位于奇数行
            if (((blankId - 1) / PuzzleMain.TYPE) % 2 == 1) {
                return getInversions(data) % 2 == 0;
            } else {
                //从下往上数,空位位于偶数行
                return getInversions(data) % 2 == 1;
            }
        }
    }
 
    /**
     *计算倒置和算法
     *
     * @param data拼图数组数据
     * @return该序列的倒置和
     */
    public static int getInversions(List<Integer> data) {
        int inversions = 0;
        int inversionCount = 0;
        for (int i = 0; i < data.size(); i++) {
            for (int j = i + 1; j < data.size(); j++) {
                int index = data.get(i);
                if (data.get(j) != 0 && data.get(j) < index) {
                    inversionCount++;
                }
            }
            inversions += inversionCount;
            inversionCount = 0;
        }
        return inversions;
    }

swapItems()方法与交换任意两个变量的数的方法一样。canSolve()方法正是通过计算给定序列的倒置并通过在算法分析中所说的两个原则来进行判断是否有解。

13.1.3.5　移动图片

生成好游戏后，就可以给GridView的每个Item来响应点击事件了。当点击的图片是空格图片上下左右的图片时，就可以交换两个Item，实现移动的效果。如果点击的是其他图片，自然是不能移动。因此，创建一个方法来判断当前点击的Item能否移动，代码如下所示。

    /**
     *判断点击的Item是否可移动
     *
     * @param position position
     * @return能否移动
     */
    public static boolean isMoveable(int position) {
        int type = PuzzleMain.TYPE;
        //获取空格Item
        int blankId = GameUtil.mBlankItemBean.getItemId() - 1;
        //不同行相差为type
        if (Math.abs(blankId - position) == type) {
            return true;
        }
        //相同行相差为1
        if ((blankId / type == position / type) &&
                Math.abs(blankId - position) == 1) {
            return true;
        }
        return false;
    }

如果判断可以移动，则使用swapItems()方法进行交换。每次交换后，还需要对当前游戏进行判断。判断是否已经还原成功，即当前图片Item的ID与初始状态下图片的ID是否相同，代码如下所示。

    /**
     *是否拼图成功
     *
     * @return是否拼图成功
     */
    public static boolean isSuccess() {
        for (ItemBean tempBean : GameUtil.mItemBeans) {
            if (tempBean.getBitmapId() != 0 &&
                    (tempBean.getItemId()) == tempBean.getBitmapId()) {
                continue;
            } else if (tempBean.getBitmapId() == 0 &&
                    tempBean.getItemId() == PuzzleMain.TYPE * PuzzleMain.TYPE) {
                continue;
            } else {
                return false;
            }
        }
        return true;
    }

最后，如果返回true即表示还原成功，那么将最后缺失的那一块图片补齐，并提示“拼图成功！”。

到此为止，整个拼图游戏的核心逻辑就全部完成了。这时候再来添加计时、记步的功能，就非常简单了。在生成游戏界面后，通过Timer来进行计时，每隔一秒，刷新一下用于计时的TextView，代码如下所示。

    //启用计时器
    mTimer = new Timer(true);
    //计时器线程
    mTimerTask = new TimerTask() {
        @Override
        public void run() {
            Message msg = new Message();
            msg.what = 1;
            mHandler.sendMessage(msg);
        }
    };
    //每1000ms执行延迟0s
    mTimer.schedule(mTimerTask, 0, 1000);

记步就更简单了，只需要在GridView的点击事件中，增加一个变量来记录有效点击的次数即可，代码如下所示。

    //判断是否可移动
    if (GameUtil.isMoveable(position)) {
    ……
        //更新步数
        COUNT_INDEX++;
    mTvPuzzleMainCounts.setText("" + COUNT_INDEX);
    ……
    }

界面下面的三个按钮，重置和返回都非常简单。重置只要重新调用生成游戏的方法即可，而返回只需要finish()即可。那“原图”按钮呢？由于界面已经没有剩余的空间来显示原图供玩家参考了，所以通过浮动显示的方式来展示原图，动态创建一个ImageView加入到游戏界面中，并将其Visibility设置为View.GONE。当点击“显示原图”按钮时用一个动画的形式，将原图展示出来，整个过程代码如下所示。

    /**
     *添加显示原图的View
     */
    private void addImgView() {
        RelativeLayout relativeLayout = (RelativeLayout) findViewById(
                R.id.rl_puzzle_main_main_layout);
        mImageView = new ImageView(PuzzleMain.this);
        mImageView.setImageBitmap(mPicSelected);
        int x = (int) (mPicSelected.getWidth() * 0.9F);
        int y = (int) (mPicSelected.getHeight() * 0.9F);
        LayoutParams params = new LayoutParams(x, y);
        params.addRule(RelativeLayout.CENTER_IN_PARENT);
        mImageView.setLayoutParams(params);
        relativeLayout.addView(mImageView);
        mImageView.setVisibility(View.GONE);
    }
 
    /**
     * Button点击事件
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            //返回按钮点击事件
            case R.id.btn_puzzle_main_back:
                PuzzleMain.this.finish();
                break;
            //显示原图按钮点击事件
            case R.id.btn_puzzle_main_img:
                Animation animShow = AnimationUtils.loadAnimation(
                        PuzzleMain.this, R.anim.image_show_anim);
                Animation animHide = AnimationUtils.loadAnimation(
                        PuzzleMain.this, R.anim.image_hide_anim);
                if (mIsShowImg) {
                    mImageView.startAnimation(animHide);
                    mImageView.setVisibility(View.GONE);
                    mIsShowImg = false;
                } else {
                    mImageView.startAnimation(animShow);
                    mImageView.setVisibility(View.VISIBLE);
                    mIsShowImg = true;
                }
                break;
            //重置按钮点击事件
            case R.id.btn_puzzle_main_restart:
                cleanConfig();
                generateGame();
                recreateData();
                //通知GridView更改UI
                mTvPuzzleMainCounts.setText("" + COUNT_INDEX);
                mAdapter.notifyDataSetChanged();
                mGvPuzzleMainDetail.setEnabled(true);
                break;
            default:
                break;
        }
    }

13.1.4　效果预览与功能进阶" class="reference-link">13.1.4　效果预览与功能进阶

通过前面对整个拼图游戏的逻辑分析与编码，相信读者朋友们对这样一个小App的实现过程已经有了一定的认识。但是，无论怎么看、怎么听他人的实现过程，都不如自己真真正正地去实现一次，在实现的过程中，很多你觉得非常简单的问题，也许并没有你想的那么简单。下面来看看最后实现的程序运行效果，如图13.5到图13.9所示。


图13.5　程序运行效果	图13.6　本地图库与相机


图13.7　拼图主界面	图13.8　显示原图	图13.9　拼图成功

下面总结一下这个App的实现过程。实现这个小游戏，使用到了很多知识点，从XML绘图到Intent Action，从面向对象的设计到各种数据结构的使用，从拼图算法的分析到算法的实现，从动态布局到Handler刷新UI，从Bitmap的创建到分割等。

代码实现的过程必然是充满坎坷的，但是完成后的成就感，也是最值得人期待的。曾经有一位网友给笔者发邮件，说通过看了笔者的博客完成了这样一个拼图游戏给他的孩子玩，他的孩子非常喜欢，我想，这便是对自己努力的最好奖励了。

当然，这个小的例子还只是一个简单练手的例子，离商业化的项目还差得很远，大家可以在这个例子的基础上来优化整个项目。比如增加自动解题的算法，可以通过A*算法来实现，再比如增加SNS功能，添加多人对抗，成绩记录等功能。另外，还可以开发一些新的拼图模式，创新玩法等。这样，离一个商业化项目就越来越近了。

13.1 移动迷宫——拼图游戏