On the first day, realize the interface (chessboard, chess, chess) function

design:

1. How to draw a chessboard: you can regard the chessboard as horizontal and vertical intersecting line segments. Refer to the previous straight line drawing tutorial to draw 15 lines ✖️ 15 horizontal and vertical line segments to construct a chessboard
2. How to draw chess pieces: each chess piece is actually drawing a circle. For the specific drawing method, please refer to the previous drawing circle tutorial
3. Black and white players play chess in turn. Pay attention to the chess pieces must be placed at the intersection. See the following code for specific operations
4. Personalization function: add background image

public static final Image bgimg = new ImageIcon("img/bg1.jpg").getImage();

Error prone points:

1. Remember to override the paint method. Why?
   Because every time you drag or zoom the form, the paint method will be called again, resulting in the chess pieces you previously placed being erased. The purpose of rewriting the paint magnification is to re place the chess pieces when the paint method is called again

2. How to draw pieces at intersections:
   First, we get the coordinates of the current click through the mouse listener, and then we know that the first 1 / 2 before two points should be at the previous intersection, and if it is at the second half, it should be at the latter intersection. After the rule is determined, we can write the algorithm: chessX=(x+SIZE/2-X)/SIZE;
   chessY=(y+SIZE/2-Y)/SIZE;
   This SIZE refers to the space between chessboards and the diameter of chessmen

3. How to play chess in black and white
   This is very simple. We first define a chessflag =0; Then, after each chess game, change this value and judge it

Specific code implementation:

1. Draw form

    public void initGoBangMainUI(){
        //this refers to the object of the current class
        this.setTitle("Simple Gobang V1.0"); //name
        this.setSize(1200,1000);  //Form size
        this.setDefaultCloseOperation(this.EXIT_ON_CLOSE);
        this.setVisible(true);  //visualization
        //Add mouse listener
        this.addMouseListener(gl);
        this.addMouseMotionListener(gl);

        //Gets the object passed to the listener by the Graphics brush
        Graphics g =this.getGraphics();
        gl.setGraphics(g);
    }

1. Draw chess pieces, and play chess in black and white

    @Override
    @Override
    public void mousePressed(MouseEvent e) {
        int x=e.getX();
        int y=e.getY();// This is because some conditions may be added. X and y are not necessarily this x and y

        chessX=(x+SIZE/2-X)/SIZE;
        chessY=(y+SIZE/2-Y)/SIZE;  //Figure out the rows and columns of your pieces

        if(chessflag==0){
            g.setColor(Color.WHITE);
            chessArr[chessX][chessY]=1; //Save pieces
            chessflag++;
        }else{
            g.setColor(Color.BLACK);
            chessArr[chessX][chessY]=2; //Save pieces
            chessflag=0;
        } //Black and white take turns playing chess


        g.fillOval(chessX*SIZE+X-SIZE/2,chessY*SIZE+Y-SIZE/2,SIZE,SIZE);

        System.out.println("Press the mouse button");

    }

1. Override the paint method, which includes drawing chessboard and chess pieces

   @Override
    public void paint(Graphics g){
        super.paint(g);  //super refers to the parent object of the current class
        //Draw background map
        g.drawImage(bgimg,X,Y,ROW*SIZE,CLOUM*SIZE,null);
        //Draw chessboard
        for (int i =0; i<=15;i++){
            g.drawLine(X,Y+i*SIZE,X+ROW*SIZE,Y+i*SIZE);
            g.drawLine(X+i*SIZE,Y,X+i*SIZE,Y+CLOUM*SIZE);
        }

        //Draw chess pieces
        for (int i=0;i<chessArr.length;i++){
            for (int j=0;j<chessArr[0].length;j++){
                if(chessArr[i][j]==1){
                    g.setColor(Color.WHITE);
                    g.fillOval(i*SIZE+X-SIZE/2,j*SIZE+Y-SIZE/2,SIZE,SIZE);
                    System.out.println("White chess");
                }else if(chessArr[i][j]==2){
                    g.setColor(Color.BLACK);
                    g.fillOval(i*SIZE+X-SIZE/2,j*SIZE+Y-SIZE/2,SIZE,SIZE);
                    System.out.println("black ");
                }else{
                    System.out.println("blank");
                    continue;
                }
            }


        }

    }
}

The code is probably the above part:

Effect display

The function of the first day is probably like this. In the next step, we will continue to improve the function (judge win or lose, repent chess function)