Android realizes jigsaw puzzle

Time:2021-1-9

Students often ask, can we develop games with Android? What kind of games can we develop? Due to the limitation of operating system and development language, we seldom use its own language to develop Android mobile games. Instead, it uses the specified compiler and language to make the interface smoother and user experience better. But for some common games, it’s no problem to use java language to develop and run. In this blog, I will give you a brief introduction to the development process, basic logic and ideas of jigsaw puzzle. I will show them in the comments of the code.

Jigsaw puzzle, I believe you played when you were young. The general logic is to divide a picture into 9 parts in the way of 3 * 3, take out the small picture in the third row and three columns, disrupt the positions of the remaining 8 parts, and then start the game. Reset the disordered pictures in the way of moving left and right. After success, return the ninth picture to its original position, that is, the end of the game.

This logic is also used in programming. The cut small pictures are stored in the container, and then randomly visited. Click events are set for each small picture. After clicking, you can move according to the missing space until all of them are correctly returned. I introduced the timing function, which can record the time of completing the game.

Now, let’s get down to business and start writing code

First, the layout of the jigsaw puzzle interface is written

<LinearLayout 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:orientation="vertical">
 <TextView
  android:id="@+id/text_time"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:textSize="28sp"
  android:textStyle="bold"
  android:textColor="#C00"
  android:text= "Time consuming: 0 seconds" / >
 <LinearLayout
  android:id="@+id/liner_first"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:orientation="horizontal"
  android:layout_gravity="center">
  <ImageButton
   android:id="@+id/btn_00x00"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_00x00"
   android:padding="0dp"
   />
  <ImageButton
   android:id="@+id/btn_00x01"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_00x01"
   android:padding="0dp"
   />
  <ImageButton
   android:id="@+id/btn_00x02"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_00x02"
   android:padding="0dp"
   />
 </LinearLayout>
 <LinearLayout
  android:id="@+id/liner_second"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:orientation="horizontal"
  android:layout_gravity="center">
  <ImageButton
   android:id="@+id/btn_01x00"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_01x00"
   android:padding="0dp" />
  <ImageButton
   android:id="@+id/btn_01x01"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_01x01"
   android:padding="0dp" />
  <ImageButton
   android:id="@+id/btn_01x02"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_01x02"
   android:padding="0dp" />
 </LinearLayout>
 <LinearLayout
  android:id="@+id/liner_third"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:orientation="horizontal"
  android:layout_gravity="center">
  <ImageButton
   android:id="@+id/btn_02x00"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_02x00"
   android:padding="0dp" />
  <ImageButton
   android:id="@+id/btn_02x01"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_02x01"
   android:padding="0dp" />
  <ImageButton
   android:id="@+id/btn_02x02"
   android:layout_height="wrap_content"
   android:layout_width="wrap_content"
   android:onClick="onClick"
   android:src="@mipmap/img_xiaoxiong_02x02"
   android:padding="0dp"
   android:visibility="invisible" />
 </LinearLayout>
 <Button
  android:id="@+id/btn_restart"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:onClick="restart"
  android:layout_gravity="center"
  android:text= "Start over" / >
 <ImageView
  android:id="@+id/iv_yuantu"
  android:layout_gravity="center_horizontal"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@mipmap/yangtu" />
</LinearLayout>

The effect picture is as follows:

Next, we write the logic code of the jigsaw activity

import android.app.Activity;
import android.app.AlertDialog;
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 Activity{
 private ImageButton button00,button01,button02,button10,button11,button12,button20,button21,button22;
 private Button buttonrestart;
 private TextView textView;
 private int Imagex = 3;
 private int Imagey = 3;
 private int imgCount = Imagex * Imagey;
 private int length = imgCount;
 private int blankSwap = length - 1;
 private int blankImgid = R. id.btn_ 02x02; // the button ID of the blank area during initialization
 private int time;
 private boolean timeswitch = true;
 //Declare the subscript array of an image array and arrange the array randomly
 private int[] imageIndex = new int[length];
 private int[] image = { R.mipmap.img_xiaoxiong_00x00, R.mipmap.img_xiaoxiong_00x01, R.mipmap.img_xiaoxiong_00x02, R.mipmap.img_xiaoxiong_01x00,
   R.mipmap.img_xiaoxiong_01x01, R.mipmap.img_xiaoxiong_01x02, R.mipmap.img_xiaoxiong_02x00, R.mipmap.img_xiaoxiong_02x01,
   R.mipmap.img_xiaoxiong_02x02, };
 Handler handler = new Handler() {
  //In order to update the time, the handler is used to update textView.settext (time)
  public void handleMessage(Message msg){
   if (msg.what == 1) {
    textView.setText (time) + time);
    if (timeswitch){
     time++;
     handler.sendEmptyMessageDelayed(1,1000);
    }
   }
  };
 };
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  //Initialize these controls
  button00 = (ImageButton) findViewById(R.id.btn_00x00);
  button01 = (ImageButton) findViewById(R.id.btn_00x01);
  button02 = (ImageButton) findViewById(R.id.btn_00x02);
  button10 = (ImageButton) findViewById(R.id.btn_01x00);
  button11 = (ImageButton) findViewById(R.id.btn_01x01);
  button12 = (ImageButton) findViewById(R.id.btn_01x02);
  button20 = (ImageButton) findViewById(R.id.btn_02x00);
  button21 = (ImageButton) findViewById(R.id.btn_02x01);
  button22 = (ImageButton) findViewById(R.id.btn_02x02);
  textView = (TextView) findViewById(R.id.text_time);
  buttonrestart = (Button) findViewById(R.id.btn_restart);
  handler.sendEmptyMessageDelayed(1,1000);
  random();
 }
 //Monitoring method
 private void random() {
  timeswitch = true;
  for (int i = 0; i < imageIndex.length; i++) {
   //The value of 012345678 is stored in the circular array
   imageIndex[i] = i;
  }
  int rand1, rand2;
  for (int j = 0; j < 20; j++) {
   // math.random  A random number of 0-1 multiplied by 8 is a random number of 0-8
   rand1 = (int) (Math.random() * (length - 1));
   do {
    rand2 = (int) (Math.random() * (length - 1));
    if (rand1 != rand2) {
     break;
    }
   } while (true);
   swap(rand1, rand2);
  }
  //Random permutation
  button00.setImageDrawable(getResources().getDrawable(image[imageIndex[0]]));
  button01.setImageDrawable(getResources().getDrawable(image[imageIndex[1]]));
  button02.setImageDrawable(getResources().getDrawable(image[imageIndex[2]]));
  button10.setImageDrawable(getResources().getDrawable(image[imageIndex[3]]));
  button11.setImageDrawable(getResources().getDrawable(image[imageIndex[4]]));
  button12.setImageDrawable(getResources().getDrawable(image[imageIndex[5]]));
  button20.setImageDrawable(getResources().getDrawable(image[imageIndex[6]]));
  button21.setImageDrawable(getResources().getDrawable(image[imageIndex[7]]));
  button22.setImageDrawable(getResources().getDrawable(image[imageIndex[8]]));
 }
 public void swap(int rand1, int rand2){
  int temp = imageIndex[rand1];
  imageIndex[rand1] = imageIndex[rand2];
  imageIndex[rand2] = temp;
 }
 public void onClick(View view) {
  //ID is the ID of the button when you click the button
  int id = view.getId();
  //Executing conditional statement by ID
  switch (id) {
   case R.id.btn_00x00:
    move(R.id.btn_00x00, 0);
    break;
   case R.id.btn_00x01:
    move(R.id.btn_00x01, 1);
    break;
   case R.id.btn_00x02:
    move(R.id.btn_00x02, 2);
    break;
   case R.id.btn_01x00:
    move(R.id.btn_01x00, 3);
    break;
   case R.id.btn_01x01:
    move(R.id.btn_01x01, 4);
    break;
   case R.id.btn_01x02:
    move(R.id.btn_01x02, 5);
    break;
   case R.id.btn_02x00:
    move(R.id.btn_02x00, 6);
    break;
   case R.id.btn_02x01:
    move(R.id.btn_02x01, 7);
    break;
   case R.id.btn_02x02:
    move(R.id.btn_02x02, 8);
    break;
  }
 }
 //The method of exchanging the click image with the blank area
 public void move(int imagbtnId, int site) {
  Int sitex = site / imagex; // which picture is the site
  int sitey = site % Imagey;
  //Initializes the coordinates of the blank space
  int blankx = blankSwap / Imagex;
  int blanky = blankSwap % Imagey;
  //Take the absolute value
  int x = Math.abs(sitex - blankx);
  int y = Math.abs(sitey - blanky);
  //The two cases are either in different columns of the same row or in different rows of the same column
  if ( (x == 0 && y == 1) || (x == 1 && y == 0)) {
   //Defining a new imagebutton is equal to the image button ID that we sent
   ImageButton clickButton = (ImageButton) findViewById(imagbtnId);
   clickButton.setVisibility(View.INVISIBLE);
   //Define a new picture button, and then find viewbyid the ID of the blank control
   ImageButton blankButton = (ImageButton) findViewById(blankImgid);
   //Then reset the picture button to the second parameter we passed
   blankButton.setImageDrawable(getResources().getDrawable(image[imageIndex[site]]));
   //However, the control is still invisible and set to visible
   blankButton.setVisibility(View.VISIBLE);
   swap(site, blankSwap);
   //Update the new blank area position to the position of the passed button
   blankSwap = site;
   //Update the ID of the new blank area to the ID of the passed button
   blankImgid = imagbtnId;
  }
  gameOver();
 }
 //If we start all over again, we need to restore the image button that has been clicked and turn it into initialization
 public void restore() {
  handler.removeMessages(1);
  //Define a new imagebutton equal to our new blank image button ID, and set it visible,
  ImageButton clickButton = (ImageButton) findViewById(blankImgid);
  clickButton.setVisibility(View.VISIBLE);
  //Define a new picture button, and then find viewbyid the ID of the blank control这个id就是我们初始化的时候设置隐藏的第九章图片
  ImageButton blankButton = (ImageButton) findViewById(R.id.btn_02x02);
  //However, the control is still invisible, set to invisible
  blankButton.setVisibility(View.INVISIBLE);
  blankImgid = R. id.btn_ 02x02; // the button ID of the blank area during initialization
  blankSwap = length - 1;
 }
 //Judge whether the puzzle is successful
 public void gameOver() {
  boolean loop = true;
  for (int i = 0; i < imageIndex.length; i++) {
   if (imageIndex[i] != i) {
    loop = false;
   }
  }
  if (loop) {
   //After success, time stops
   timeswitch = false;
   //Player's jigsaw puzzle succeeded, no image button moving
   button00.setClickable(false);
   button01.setClickable(false);
   button02.setClickable(false);
   button10.setClickable(false);
   button11.setClickable(false);
   button12.setClickable(false);
   button20.setClickable(false);
   button21.setClickable(false);
   button22.setClickable(false);
   button22.setImageDrawable(getResources().getDrawable(image[8]));
   button22.setVisibility(View.VISIBLE);
   handler.removeMessages(1);
   AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
   builder.setMessage "Congratulations, the puzzle is successful! The time you spend is "+ time +" seconds "). Setpositivebutton (" confirm ", null);
   AlertDialog dialog = builder.create();
   dialog.show();
  }
 }
 public void restart(View view) {
  time = 0;
  restore();
  textView.setText (time) + time);
  timeswitch = true;
  handler.sendEmptyMessageDelayed(1,1000);
  button00.setClickable(true);
  button01.setClickable(true);
  button02.setClickable(true);
  button10.setClickable(true);
  button11.setClickable(true);
  button12.setClickable(true);
  button20.setClickable(true);
  button21.setClickable(true);
  button22.setClickable(true);
  random();
 }
}

Finally, run the project, you can carry out the jigsaw puzzle! The effect picture is as follows:

Well, this is the jigsaw puzzle, in my project, I will cut the picture of fairy sister, you can try to use the picture of fairy sister for programming, thank you for reading!

Click to download the relevant project code

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.