How can I make a grid of 50 by 50 labels?

Question

I'm recreating the classic game 'Snake'. My idea is to firstly make a grid of 50 x 50 cells where each cell is a label of 10 x 10 pixels.

However, I can't get this to work. I'm using GridLayout but somehow this doesn't really work, as I apparently can't set the site of each grid.

I watched a video on Youtube where a guy made a tic tac toe game in which each the size of each grid automatically adapted to the size of the added images. What should I do if I use labels instead of images?

Basically, what should I do to make each cell 10 by 10 pixels big, and put them in a grid of 50x50 cells?

import java.awt.*;
import javax.swing.*;

public class MainSnake {
    JFrame frame;
    JLabel[][] cells;

MainSnake() {
    //Frame initializion
    frame = new JFrame("Snake");
    frame.getContentPane().setBackground(Color.BLACK);
    frame.setSize(500, 500);
    frame.setVisible(true);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setResizable(false);
    frame.setLayout(new GridLayout(50, 50));

    createCells();

} //End MainSnake

public static void main(String[]a) {
    new MainSnake();
} //End main

public void createCells(){
    int a = 0;
    int i;
    cells = new JLabel[50][50];
    for (i = 0; i < 50; i++){
        if(i < 50){
            cells[i][a] = new JLabel("");
            cells[i][a].setOpaque(true);
            cells[i][a].setBackground(Color.white);
            cells[i][a].setBorder(BorderFactory.createLineBorder(Color.BLUE, 1));
            cells[i][a].setPreferredSize(new Dimension(10,10));
            frame.add(cells[i][a]);
        } if(i==49){
              i = 0;
              aa++;
        }
    } //End for
}

} //End Class

This is what I get (I only added the borders to ble able to see how each cell looks like):

Answer 1

There's two things that appear to be incorrect with this code.

First, your for loop does not exit properly, nor does it exit properly. This is your code:

for (i = 0; i < 50; i++){
    if(i < 50){
        cells[i][a] = new JLabel("");
        cells[i][a].setOpaque(true);
        cells[i][a].setBackground(Color.white);
        cells[i][a].setBorder(BorderFactory.createLineBorder(Color.BLUE, 1));
        cells[i][a].setPreferredSize(new Dimension(10,10));
        frame.add(cells[i][a]);
    } if(i==49){
          i = 0; //the i++ is applied after this is complete in the for loop, resulting in skipping row 0!!!
          aa++; //This should be a++
    }
} //End for

Traditionally, I prefer embedded for loops. This is your code, fixed, using your style:

public void createCells() {
    int a = 0;
    int i;
    cells = new JLabel[50][50];
    for (i = 0; i < 50; i++) {
        if (i < 50) {
            cells[i][a] = new JLabel("");
            cells[i][a].setOpaque(true);
            cells[i][a].setBackground(Color.white);
            cells[i][a].setBorder(BorderFactory.createLineBorder(
                    Color.BLUE, 1));
            cells[i][a].setPreferredSize(new Dimension(10, 10));
            frame.add(cells[i][a]);
        }
        if (i == 49) {
            i = -1;
            a++;
        }
        if (a == 50) {
            return;
        }
    } // End for
}

This is the way that is normally preferred to be written:

for(int a = 0; a < 50; a++) {
    for (i = 0; i < 50; i++) {
            cells[i][a] = new JLabel("");
            cells[i][a].setOpaque(true);
            cells[i][a].setBackground(Color.white);
            cells[i][a].setBorder(BorderFactory.createLineBorder(
                    Color.BLUE, 1));
            cells[i][a].setPreferredSize(new Dimension(10, 10));
            frame.add(cells[i][a]);
    }
}

Take note, this is still columns-first. Normally, most people do rows-first insertion.

The second issue is your use of createCells at the very end, after making the frame visible.

frame = new JFrame("Snake");
frame.getContentPane().setBackground(Color.BLACK);
frame.setSize(500, 500);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setResizable(false);
frame.setLayout(new GridLayout(50, 50));

createCells();

The draw is obviously malformed. The correct way to deal with this is that you actually need a repaint using validate()

frame.validate(); 

This will redraw your screen, though you will see it flicker with the old image before it is ready.

Preferably, you should draw everything onto the frame, then make it visible.

frame = new JFrame("Snake");
frame.getContentPane().setBackground(Color.BLACK);
frame.setSize(500, 500);
frame.setLayout(new GridLayout(50, 50));
createCells();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setResizable(false);
frame.setVisible(true);

The last issue becomes that the size doesn't work properly, but it'll be easier for you to fix that when you can see everything.

Answer 2

Ken, can you try this solution when you have time?

import java.awt.*;

import javax.swing.*;

public class MainSnake {
    JFrame frame;
    JPanel panel;
    JLabel[][] cells;

    MainSnake() {
        // Frame initializion
        frame = new JFrame("Snake");
        frame.setLayout(new BorderLayout());
        frame.getContentPane().setBackground(Color.BLACK);
        frame.setSize(700, 700);
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);   
        //frame.setResizable(false);
        panel = new JPanel();
        panel.setLayout(new GridLayout(50, 50));        
        frame.add(panel);

        createCells();

        panel.revalidate();
        panel.repaint();




    } // End MainSnake

    public static void main(String[] a) {
        new MainSnake();
    } // End main

    public void createCells() {
        int i;
        cells = new JLabel[50][50];
        for (i = 0; i < 50; i++) {
            for (int j = 0; j < cells.length; j++) {
                cells[i][j] = new JLabel(i+"");
                cells[i][j].setOpaque(true);
                cells[i][j].setBackground(Color.white);
                cells[i][j].setBorder(BorderFactory.createLineBorder(Color.BLUE, 1));
                //cells[i][j].setPreferredSize(new Dimension(10, 10));
                panel.add(cells[i][j]);
            }           
        } // End for
    }

}