Every time I pressed Roll(JButton) it left a picture of roll button on

Question

I'm trying to make a snakes and ladders game. It doesn't done yet(no swap turn, no use of ladder and snake) and have so many bug.

But My point is that

I found a problem that make me very curious(Picture Below). It about making a token move. My strategy is that I add a[10][10] array of JPanal(I named it class as Cell) on a big JPanel(I named it class as Board) whose I set its bg as a picture of snakes and ladders game from google and set the layout to gridlayout(10,10). And on every Cell there's one token which is hiding and will only reveal when press the roll button and the output point to that Cell.

This is where the problem happened.

Image of the program when execute

When I press roll button for sometimes

There's a button appear every time I press!(They are not clickable though.)

I know that my start point doesn't even on the left bottom square but where is all that jbutton came from!

This is my main class

public class Main extends JFrame {
    TextField text = new TextField();
    Dice dice = new Dice();
    int tempi = -1, tempj = -1,sum =0;

    //Main Method
    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                Main mPage = new Main();
                mPage.setVisible(true);
            }
        });
    }

    //Constructor
    public Main(){
        super("Snakes and Ladders");
        setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        setSize(1280,768);
        setLocation(400,150);
        setLayout(new FlowLayout(FlowLayout.LEFT,30,100));
        Board board = new Board();
        getContentPane().add(board);
        getContentPane().add(dice);
        getContentPane().add(text);

        //my problem is here.
        dice.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                int score = Dice.rollDice();
                text.setText(String.valueOf(score));
                if (tempi != -1 || tempj != -1){
                    board.cell[9-tempi][9-tempj].fade();
                }
                if (tempi == -1 && tempj == -1){
                    sum = sum + score - 1;
                }
                else sum = sum + score;

                tempj = sum%10;
                tempi = (sum - tempj)/10;
                board.cell[9-tempi][9-tempj].reveal();

            }
        });        

        pack();
        setMinimumSize(this.getSize());
    }
}

This is Cell class

public class Cell extends JPanel implements Cloneable {

    private Token pl1 = new Token();

    //constructor
    public Cell(){
        setOpaque(true);
        setBackground(new Color(0,0,0,0));
        setLayout(new GridLayout(2,2));

        this.fade();
        this.add(pl1);
    }

    public void fade(){
        pl1.setVisible(false);
    }

    public void reveal(){
        pl1.setVisible(true);
    }
}

This is Token class

public class Token extends JLabel {
    private BufferedImage image = null;

    public Token(){
        try {
            image = ImageIO.read(new File("C:\\Users\\myacc\\IdeaProjects\\Snakes and Ladders\\src\\Token.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }

        Image player = image.getScaledInstance(20,20,Image.SCALE_SMOOTH);

        this.setIcon(new ImageIcon(player));

    }
}

Answer 1

setBackground(new Color(0,0,0,0));

Don't use backgrounds with transparency. Swing does not know how to paint transparent backgrounds properly.

For full transparency you just make the component non-opaque:

    //setOpaque(true);
    //setBackground(new Color(0,0,0,0));
    setOpaque(false);

If you need semi-transparency, then you need to do custom painting yourself. Check out Background With Transparency for more information on this topic.

Also don't use a TextField. That is an AWT component. Use a JTextField which is the Swing component.