Trouble with Java Applet repainting

Question

The following program is supposed to place X strings in a tic tac toe board on a java applet so that they will remain after consecutive placements. However, when the user clicks to place an X , the X will disappear and draw elsewhere. How can I overcome this issue?

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

/**
 * Class TicTacToe - write a description of the class here
 * 
 * @author (your name) 
 * @version (a version number)
 */
public class TicTacToe extends JApplet implements MouseListener
{
    // instance variables - replace the example below with your own
    private boolean[][] board = new boolean[3][3];
    int j; int h;
    /**
     * Called by the browser or applet viewer to inform this JApplet that it
     * has been loaded into the system. It is always called before the first 
     * time that the start method is called.
     */
    public void init()
    {
        // this is a workaround for a security conflict with some browsers
        // including some versions of Netscape & Internet Explorer which do 
        // not allow access to the AWT system event queue which JApplets do 
        // on startup to check access. May not be necessary with your browser. 
        JRootPane rootPane = this.getRootPane();    
        rootPane.putClientProperty("defeatSystemEventQueueCheck", Boolean.TRUE);

        addMouseListener(this);
        // provide any initialisation necessary for your JApplet
    }

    public void mouseExited(MouseEvent e){}

    public void mouseEntered(MouseEvent e){}

    public void mouseReleased(MouseEvent e){}

    public void mousePressed(MouseEvent e){}

    public void mouseClicked(MouseEvent e){
        int x = e.getX();  int y = e.getY();
        j = x; h = y;

        x -= 50;
        y-= 50;
        x/=50;
        y/=50;

        board[x][y] = true;

        repaint();
    }

    /**
     * Called by the browser or applet viewer to inform this JApplet that it 
     * should start its execution. It is called after the init method and 
     * each time the JApplet is revisited in a Web page. 
     */
    public void start()
    {
        // provide any code requred to run each time 
        // web page is visited
    }

    /** 
     * Called by the browser or applet viewer to inform this JApplet that
     * it should stop its execution. It is called when the Web page that
     * contains this JApplet has been replaced by another page, and also
     * just before the JApplet is to be destroyed. 
     */
    public void stop()
    {
        // provide any code that needs to be run when page
        // is replaced by another page or before JApplet is destroyed 
    }

    /**
     * Paint method for applet.
     * 
     * @param  g   the Graphics object for this applet
     */
    public void paint(Graphics g)
    {
        // background color
        g.setColor(Color.white);
        g.fillRect(0, 0, 150, 150);
        //draw board
        g.setColor(Color.BLACK);
        //draw vertical line
        for(int i = 50; i <= 100; i = i + 50){
            g.drawLine(i,0,i,150);
        }
        //draw horizontal lines
        for(int i = 50; i <= 100; i = i + 50){
            g.drawLine(0,i,150,i);
        }
        //paint x values when applicable
        g.setColor(Color.RED);

        for(int i = 0; i < 3; i ++){
            for(int r = 0; r < 3; r ++){
                if(board[i][r] == true) g.drawString("X",j ,h );
            }
        }

    }
    /**
     * Called by the browser or applet viewer to inform this JApplet that it
     * is being reclaimed and that it should destroy any resources that it
     * has allocated. The stop method will always be called before destroy. 
     */
    public void destroy()
    {
        // provide code to be run when JApplet is about to be destroyed.
    }

    /**
     * Returns information about this applet. 
     * An applet should override this method to return a String containing 
     * information about the author, version, and copyright of the JApplet.
     *
     * @return a String representation of information about this JApplet
     */
    public String getAppletInfo()
    {
        // provide information about the applet
        return "Title:   \nAuthor:   \nA simple applet example description. ";
    }

    /**
     * Returns parameter information about this JApplet. 
     * Returns information about the parameters than are understood by this JApplet.
     * An applet should override this method to return an array of Strings 
     * describing these parameters. 
     * Each element of the array should be a set of three Strings containing 
     * the name, the type, and a description.
     *
     * @return a String[] representation of parameter information about this JApplet
     */
    public String[][] getParameterInfo()
    {
        // provide parameter information about the applet
        String paramInfo[][] = {
                {"firstParameter",    "1-10",    "description of first parameter"},
                {"status", "boolean", "description of second parameter"},
                {"images",   "url",     "description of third parameter"}
            };
        return paramInfo;
    }
}

Answer 1

j and h contain the position of the last mouse click. What you have done here is wrong

if(board[i][r] == true) g.drawString("X",j ,h );

because you are trying to draw all the X s at the same position.

So to solve your problem, we need to store the position of the X s already drawn. We need to create a table of Position

add this class

class Position{

    private int x;
    private int y;

    public Position(int x,int y){
        this.x=x;
        this.y=y;
    }

    public int getX() {
        return x;
    }
    public void setX(int x) {
        this.x = x;
    }
    public int getY() {
        return y;
    }
    public void setY(int y) {
        this.y = y;
    }

}

Then add new attribute in your TicTacToe class containing all positions

private Position[][] positions =  new Position[3][3];

Finally, here is mouseClicked method

public void mouseClicked(MouseEvent e){
        int x = e.getX();  int y = e.getY();
                j=x/50;
                h=y/50;
                board[j][h] = true;
                if(positions[j][h]==null){
                    positions[j][h]=new Position(x,y);
                }
                positions[j][h].setX(x);
                positions[j][h].setY(y);
                repaint();
    }

And the paint method

 public void paint(Graphics g)
    {
      // background color
            g.setColor(Color.white);
            g.fillRect(0, 0, 150, 150);
            //draw board
            g.setColor(Color.BLACK);
            //draw vertical line
            for(int i = 50; i <= 100; i = i + 50){
                g.drawLine(i,0,i,150);
            }
            //draw horizontal lines
            for(int i = 50; i <= 100; i = i + 50){
                g.drawLine(0,i,150,i);
            }
            //paint x values when applicable
            g.setColor(Color.RED);

            for(int i = 0; i < 3; i ++){
                for(int r = 0; r < 3; r ++){
                    if(board[i][r] == true) g.drawString
                            ("X",positions[i][r].getX() ,positions[i][r].getY() );
                }
            }

    }

Now your code should work according to your need. But, most of the time, i really don't want to delegate all work to one single class JApplet . Instead, i prefer to separate the logic into a separate component like JPanel which i can easily add to either JApplet or JFrame .

Here i used a JPanel inside a JFrame to get the cleanest code you need.

package example;

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;

class Position{

    private int x;
    private int y;

    public Position(int x,int y){
        this.x=x;
        this.y=y;
    }

    public int getX() {
        return x;
    }
    public void setX(int x) {
        this.x = x;
    }
    public int getY() {
        return y;
    }
    public void setY(int y) {
        this.y = y;
    }

}

public class NewTicTacToe {

    public static void main(String[] args) {
        new NewTicTacToe();
    }

    public NewTicTacToe() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (Exception ex) {
                }

                JFrame frame = new JFrame("NewTicTacToe");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new PaintTicTacToe());
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public class PaintTicTacToe extends JPanel {

        // instance variables - replace the example below with your own
        private boolean[][] board = new boolean[3][3];
        private Position[][] positions =  new Position[3][3];
        int j; int h;

        public PaintTicTacToe() {            
            super();
            addMouseListener(new MouseAdapter() {
                @Override
                public void mouseClicked(MouseEvent e) { 
                    int x = e.getX();  int y = e.getY();
                    j=x/50;
                    h=y/50;
                    board[j][h] = true;
                    if(positions[j][h]==null){
                        positions[j][h]=new Position(x,y);
                    }
                    positions[j][h].setX(x);
                    positions[j][h].setY(y);
                    repaint();
                }
            });
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(200, 200);
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponents(g);
            // background color
            g.setColor(Color.white);
            g.fillRect(0, 0, 150, 150);
            //draw board
            g.setColor(Color.BLACK);
            //draw vertical line
            for(int i = 50; i <= 100; i = i + 50){
                g.drawLine(i,0,i,150);
            }
            //draw horizontal lines
            for(int i = 50; i <= 100; i = i + 50){
                g.drawLine(0,i,150,i);
            }
            //paint x values when applicable
            g.setColor(Color.RED);

            for(int i = 0; i < 3; i ++){
                for(int r = 0; r < 3; r ++){
                    if(board[i][r] == true) g.drawString
                            ("X",positions[i][r].getX() ,positions[i][r].getY() );
                }
            }
        }

    }

}