类似的小游戏大家肯定都接触过，进入程序，图片会无序排列，共九张乱序图片，需要移动到给出模板图片相同方为成功，在游戏进行的过程中会有时间在计时，当拼图成功时时间停止，点击重新开始，图片会重新打乱，时间重新开始计时!
实现步骤：1.拼图游戏绘制，2.拼图游戏打乱设置，3.拼图游戏碎片位置切换，4.拼图成功条件，5.拼图游戏重新开始
本次只实现步骤1和步骤2
实现过程中用到的部分知识，时间计时用到handler线程机制，图片的无序排列实现原理是将其以数值形式写入，然后以两两数值进行交换在放在对应的控件上！
已在代码段中进行了对应的注释，如果有不明白的可以评论区留言或者私信，若文章内容有错误不足，还请各位包涵，指正！
代码如下：
xml拼图布局代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_marginTop="20dp"
android:textColor="#FF0000"
android:textSize="30sp"
android:layout_gravity="center"
android:id="@+id/pt_tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="时间：0" />
<LinearLayout
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/pt_line1"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageButton
android:src="@drawable/pt_id_00x00"
android:padding="0dp"
android:id="@+id/pt_id_00x00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
<ImageButton
android:src="@drawable/pt_id_00x01"
android:padding="0dp"
android:id="@+id/pt_id_00x01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
<ImageButton
android:src="@drawable/pt_id_00x02"
android:padding="0dp"
android:id="@+id/pt_id_00x02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/pt_line2"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageButton
android:src="@drawable/pt_tv_01x00"
android:padding="0dp"
android:id="@+id/pt_id_01x00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
<ImageButton
android:src="@drawable/pt_tv_01x01"
android:padding="0dp"
android:id="@+id/pt_id_01x01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
<ImageButton
android:src="@drawable/pt_tv_01x02"
android:padding="0dp"
android:id="@+id/pt_id_01x02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/pt_line3"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageButton
android:src="@drawable/p1"
android:padding="0dp"
android:id="@+id/pt_id_02x00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
<ImageButton
android:src="@drawable/p2"
android:padding="0dp"
android:id="@+id/pt_id_02x01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
<ImageButton
android:src="@drawable/p3"
android:padding="0dp"
android:id="@+id/pt_id_02x02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"/>
</LinearLayout>
<Button
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/pt_btn_restart"
android:onClick="restart"
android:text="重新开始"/>
<ImageView
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:src="@drawable/yuantu"
android:id="@+id/pt_iv"
android:layout_width="210dp"
android:layout_height="210dp"/>
</LinearLayout>
activity功能实现代码：
package com.example.jigsaw;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
ImageButton ib00,ib01,ib02,ib10,ib11,ib12,ib20,ib21,ib22;
Button restartBtn;
TextView timeTv;
//定义时间的变量
int time = 0;
//存放碎片的数组，便于进行统一的管理
private int[]image={R.drawable.pt_id_00x00,R.drawable.pt_id_00x01,R.drawable.pt_id_00x02,
R.drawable.pt_tv_01x00,R.drawable.pt_tv_01x01,R.drawable.pt_tv_01x02,R.drawable.p1,R.drawable.p2,R.drawable.p3};
//声明一个图片数组的下标数组，随机排列这个数组
private int[]imageIndex=new int[image.length];
Handler handler=new Handler(){
@Override
public void handleMessage(@NonNull Message msg) {
if (msg.what==1){
time++;
timeTv.setText("时间："+time+" 秒");
handler.sendEmptyMessageDelayed(1,1000);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//打乱碎片
disruptRandpm();
handler.sendEmptyMessageDelayed(1,1000);
}
//随机打乱不规则
private void disruptRandpm() {
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));
//第二次随机生成的角标，不能和第一次相同
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[rand1]=imageIndex[rand2];
imageIndex[rand2]=temp;
}
private void initView() {
ib00=findViewById(R.id.pt_id_00x00);
ib01=findViewById(R.id.pt_id_00x01);
ib02=findViewById(R.id.pt_id_00x02);
ib10=findViewById(R.id.pt_id_01x00);
ib11=findViewById(R.id.pt_id_01x01);
ib12=findViewById(R.id.pt_id_01x02);
ib20=findViewById(R.id.pt_id_02x00);
ib21=findViewById(R.id.pt_id_02x01);
ib22=findViewById(R.id.pt_id_02x02);
timeTv=findViewById(R.id.pt_tv_time);
restartBtn=findViewById(R.id.pt_btn_restart);
}
public void onClick(View view) {
}
public void restart(View view) {
//拼图打乱
handler.removeMessages(1);
//时间重新归0，并且重新?
time=0;
timeTv.setText("时间："+time+" 秒");
handler.sendEmptyMessageDelayed(1,1000);
}
}
效果截图：
