You must have come into contact with similar mini-games. When you enter the program, the pictures will be arranged out of order. There are a total of nine random pictures. You need to move to the same picture as the given template to be successful. There will be time during the game. When the puzzle is successful, the time stops, click to restart, the picture will be scrambled again, and the time will start counting again!
Implementation steps: 1. Jigsaw puzzle drawing, 2. Jigsaw puzzle scrambling settings, 3. Jigsaw puzzle fragment position switching, 4. Jigsaw puzzle success conditions, 5. Jigsaw puzzle restart
Only step 1 and step 2 are implemented this time
Part of the knowledge used in the implementation process, the handler thread mechanism is used for time measurement, and the realization principle of the disordered arrangement of pictures is to write them in numerical form, and then exchange them in pairs and place them on the corresponding controls!
Corresponding comments have been made in the code segment. If there is anything you don’t understand, you can leave a message in the comment area or send a private message. If there are any mistakes in the content of the article, please bear with me and correct me!
code show as below:
xml puzzle layout code:
<?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="Time: 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="restart"/>
<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 function implementation code:
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;
//Define time variables
int time = 0;
//Store the array of fragments for unified management
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};
// Declare an array of subscripts for an image array, and randomly arrange the array
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: "+time+" seconds");
handler.sendEmptyMessageDelayed(1,1000);
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//scramble fragments
disruptRandpm();
handler.sendEmptyMessageDelayed(1,1000);
}
// randomly shuffle the irregular
private void disruptRandpm() {
for(int i=0;i<imageIndex.length;i++){
imageIndex[i]=i;
}
//Specify 20 times, randomly select the values corresponding to the two subscripts to exchange
int rand1,rand2;
for(int j=0;j<20;j++){
// Randomly generate a corner mark, the value of 0-8
rand1=(int)(Math.random()*(imageIndex.length-1));
//The second randomly generated corner mark cannot be the same as the first time
do{
rand2=(int)(Math.random()*(imageIndex.length-1));
if(rand1!=rand2){
break;
}
}while (true);
//Exchange the corresponding values on the two corner marks
swap(rand1,rand2);
}
//Randomly arranged on the specified control
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]]);
}
//exchange
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) {
// jigsaw puzzle
handler.removeMessages(1);
//The time returns to 0, and re-⏲
time=0;
timeTv.setText("Time: "+time+" seconds");
handler.sendEmptyMessageDelayed(1,1000);
}
}
Effect screenshot:
