Android实战开发——拼图游戏

具体代码的实现托管到了GitHub：https://github.com/ydd997/Android_pintu
下面介绍重要的几个模块。

时间改变的实现

在 MainActivity.java 中的 onCreate 函数中添加如下内容：

//一进来每隔1s就发一条空消息出去，接收到这个空消息并让TextView发生改变，形成计数器的效果
//延迟1s发送一条空消息：发送消息的编号是1，延迟时间为1000ms=1s
handler.sendEmptyMessageDelayed(1,1000);

之后在 onCreate 函数外添加如下内容：

//定义计数时间的变量
int time=0;

//消息通信机制，重写handleMessag方法用来接收消息，形成时间累计的效果
Handler handler=new Handler(){
    @Override
    public void handleMessage(@NonNull Message msg) {
        if(msg.what==1){
            time++;
            timeTv.setText("时间："+time+"秒");
            handler.sendEmptyMessageDelayed(1,1000);
        }
    }
};

时间变化的情况有两种，一是当拼图游戏完成的时候时间要停止，二是重新开始的时候要重新计时，现在先实现点击重新开始按钮时重新计时：

public void restart(View view) {
    //中断之前的消息
    handler.removeMessages(1);
    //将时间重新归零并且重新开始计时
    time=0;
    timeTv.setText("时间："+time+"秒");
    handler.sendEmptyMessageDelayed(1,1000);
}

拼图打乱显示

思路：通过数组的随机排位来使图片随机排列

首先声明一些变量：

//存放碎片的数组，便于统一管理
private int[]image={R.mipmap.img_00x00,R.mipmap.img_00x01,R.mipmap.img_00x02,R.mipmap.img_01x00,R.mipmap.img_01x01,R.mipmap.img_01x02,R.mipmap.img_02x00,R.mipmap.img_02x01,R.mipmap.img_02x02};

//声明一个图片数组的下标数组，随机排列这个数组
private int[]imageIndex=new int[image.length];

接下来写一个打乱的方法，使得 onCreate 一进入就显示打乱的数组。
首先打乱角标，接着把乱序的角标设置到ImageButton中，保证一进入就是打乱的状态，具体代码如下：

    //随机打乱数组中的元素，以不规则的形式进行图片显示
    private void disruptRandom() {
        for (int i = 0; i < imageIndex.length; i++) {
            imageIndex[i]=i;
        }
        //规定20次，随机选择两个角标对应的值进行交换
        int rand1,rand2;
        for (int j = 0; j < 20; j++) {
            //随机生成第一个角标，生成0—8之间的随机数
            rand1=(int)(Math.random()*(imageIndex.length-1)); //Math.random()生成的是0—1之间的随机数，再乘以最大值减去最小值（即8-0），最后整体加上最小值0
            //第二次随机生成的角标不能和第一次相同，如果相同就不方便交换
            do {
                rand2=(int)(Math.random()*(imageIndex.length-1));
                if(rand1!=rand2)
                    break;
            }while (true);
            //交换数组两个角标上对应的值
            swap(rand1,rand2);
        }
        //随机排列到指定的控件上
        ib00.setImageResource(image[imageIndex[0]]);
        ib01.setImageResource(image[imageIndex[1]]);
        ib02.setImageResource(image[imageIndex[2]]);
        ib10.setImageResource(image[imageIndex[3]]);
        ib11.setImageResource(image[imageIndex[4]]);
        ib12.setImageResource(image[imageIndex[5]]);
        ib20.setImageResource(image[imageIndex[6]]);
        ib21.setImageResource(image[imageIndex[7]]);
        ib22.setImageResource(image[imageIndex[8]]);
    }

    //交换数组指定角标的数据
    private void swap(int rand1, int rand2) {
        int temp=imageIndex[rand1];
        imageIndex[rand2]=imageIndex[rand1];
        imageIndex[rand1]=temp;
    }

碎片位置切换

碎片移动的条件：空白区域只能和向同行或者相同列上并且是相邻的图片进行移动，否则不能完成。

需要判断空白位置和其他图的位置是否在同一行或同一列中。

移动的过程写在 onClick 中：

    public void onClick(View view) {
        int id = view.getId();
        //九个按钮执行点击事件的逻辑是相同的：如果有空格在周围则可以改变图片的位置，否则点击事件不响应
        switch (id){
            case R.id.pt_ib_00x00:
                move(R.id.pt_ib_00x00,0);
                break;
            case R.id.pt_ib_00x01:
                move(R.id.pt_ib_00x01,1);
                break;
            case R.id.pt_ib_00x02:
                move(R.id.pt_ib_00x02,2);
                break;
            case R.id.pt_ib_01x00:
                move(R.id.pt_ib_01x00,3);
                break;
            case R.id.pt_ib_01x01:
                move(R.id.pt_ib_01x01,4);
                break;
            case R.id.pt_ib_01x02:
                move(R.id.pt_ib_01x02,5);
                break;
            case R.id.pt_ib_02x00:
                move(R.id.pt_ib_02x00,6);
                break;
            case R.id.pt_ib_02x01:
                move(R.id.pt_ib_02x01,7);
                break;
            case R.id.pt_ib_02x02:
                move(R.id.pt_ib_02x02,8);
                break;
        }
    }

其中 move 函数具体实现过程：

    /*表示移动指定位置的按钮的函数：将图片和空白区域进行交换*/
    private void move(int imageButtonId, int site) {

        //判断选中的图片在第几行，取整来判断
        int sitex=site / imageX;

        //判断选中的图片在第几列，趋于来判断
        int sitey=site % imageY;

        //获取空白区域的坐标
        int blackx=blackSwap / imageX;
        int blacky=blackSwap % imageY;

        //可以移动的条件
        //1.在同一行，列数相减绝对值为1，可以移动；2.在同一列，行数相减绝对值为1，可以移动。
        int x=Math.abs(sitex-blackx);
        int y=Math.abs(sitey-blacky);
        if((x==0&&y==1)||(x==1&&y==0)){
            //通过id查找到这个可以移动的按钮
            ImageButton clickButton=findViewById(imageButtonId);
            //该可移动按钮不在显示图片
            clickButton.setVisibility(View.INVISIBLE);
            //查找空白区域的按钮
            ImageButton blackButton=findViewById(blackImgid);
            //将空白按钮设置为显示图片
            blackButton.setImageResource(image[imageIndex[site]]);
            //移动之前是不可见的，移动之后将控件设置为可见
            blackButton.setVisibility(View.VISIBLE);

            //上面的交换并没有存在数组之中，要调用swap函数，将改变角标的过程记录在存储图片位置的数组当中
            swap(site,blackSwap);

            //新的空白区域位置更新
            blackSwap=site;
            blackImgid=imageButtonId;
        }
    }

目前为止效果展示：

拼图成功的条件

每次拼图结束之后，要判断一下当前拼图顺序是否满足正确顺序。
这里是判断存放图片角标的数组的顺序。

    /*判断拼图是否成功*/
    private void judgeGameOver() {
        boolean loop=true; //定义标志位
        //对存放图片角标的数组imageIndex进行判断
        for (int i = 0; i < imageIndex.length; i++) {
            if (imageIndex[i]!=i) {
                loop=false;
                break;
            }
        }
        if (loop) {
            //拼图成功
            //停止计时
            handler.removeMessages(1); //移除消息
            //禁止玩家继续移动按钮
            ib00.setClickable(false);
            ib01.setClickable(false);
            ib02.setClickable(false);
            ib10.setClickable(false);
            ib11.setClickable(false);
            ib12.setClickable(false);
            ib20.setClickable(false);
            ib21.setClickable(false);
            ib22.setClickable(false);
            //显示之前隐藏的拼图
            ib22.setImageResource(image[8]);
            ib22.setVisibility(View.VISIBLE);
            //弹出对话框
            AlertDialog.Builder builder=new AlertDialog.Builder(this);
            builder.setMessage("拼图成功啦！您用的时间是"+time+"秒！")
                    .setPositiveButton("确认",null);
            AlertDialog dialog = builder.create();
            dialog.show();
        }
    }

游戏重新开始

现在需要将拼图重新打乱，重新打乱的函数 disruptRandom() 在前面已经写好，直接引用即可。
但是之前游戏成功已经禁止拼图继续移动，所以将打乱之前要恢复按钮可以移动的功能，同时还要还原被点击图片初始化的样子，具体代码如下：

    /*重新开始按钮的点击事件*/
    public void restart(View view) {
        //将状态还原
        restore();

        //将拼图重新打乱
        disruptRandom();

        //中断之前的消息
        handler.removeMessages(1);
        //将时间重新归零并且重新开始计时
        time=0;
        timeTv.setText("时间："+time+"秒");
        handler.sendEmptyMessageDelayed(1,1000);
    }

    private void restore() {
        //拼图游戏重新开始，允许玩家重新触碰按钮
        ib00.setClickable(true);
        ib01.setClickable(true);
        ib02.setClickable(true);
        ib10.setClickable(true);
        ib11.setClickable(true);
        ib12.setClickable(true);
        ib20.setClickable(true);
        ib21.setClickable(true);
        ib22.setClickable(true);

        //还原被点击的图片按钮变成初始化的模样
        //最后一次选中的空白区域显示出来
        ImageButton clickButton=findViewById(blackImgid);
        clickButton.setVisibility(View.VISIBLE);

        //定义一个新的图片按钮，设置为第九个，让其隐藏（默认隐藏第九张图片）
        ImageButton blackBtn=findViewById(R.id.pt_ib_02x02);
        blackBtn.setVisibility(View.INVISIBLE);

        //初始化空白区域的按钮id
        blackImgid=R.id.pt_ib_02x02;
        blackSwap=imageCount-1;
    }
}

最终效果：

思考

整个过程不是很难理解，只有一个页面，布局也比较简单，采用了最基本的线性布局。感觉比较适合入门。在打乱九个碎片的顺序时候采用了两个数组，第一先将九个碎片按照正确的顺序存储在一个数组中，第二用一个数组存储碎片存放的位置，通过打乱放置位置的数组来打乱图片。接着是切换点击，能够将碎片和空白位置进行交换，之后是要判断何时游戏成功，判断完成点击重新开始又可以重新打乱顺序进行游戏。