11/10/09 - Adding graphics to the TicTacToe game

21

11/10/09 - Adding graphics to the TicTacToe game

			The TicTacToe class has all the logic to manage a game of TicTacToe, but the output is rather uninspired.

			Modifying the output:

			Modifying the input:

			The DrawingPanel class also has an event handler that is aware of the mouse position. By adding a single method to the DrawingPanel class to make it a new class called DrawingPanelT, we can use it to detect mouse clicks in the graphics panel and have our TicTacToe game respond with X's or O's at that position. The following code demonstrates the basic idea, but you need to add additional code to make it function properly in your TicTacToe game.

			Sample output:

			Modified DrawingPanelT class code to handle mouse clicks

			// A simple interface for drawing persistent images. // Final version with events, pp. 773-775, Building Java Programs, Reges/Stepp. import java.awt.; import java.awt.event.; import java.awt.image.; import javax.swing.; import javax.swing.event.*; public class DrawingPanelT extends MouseInputAdapter implements ActionListener { private JFrame frame; // overall window frame private JPanel panel; // drawing surface private JLabel statusBar; // status bar private Graphics g; // drawing pen private TicTac ticTac; // constructs a drawing panel of given size public DrawingPanelT(int width, int height, TicTac tic) { ticTac = tic; // set up the empty image onto which we will draw BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB); g = image.getGraphics(); g.setColor(Color.BLACK); // enclose the image in a label inside a panel JLabel label = new JLabel(); label.setIcon(new ImageIcon(image)); panel = new JPanel(new FlowLayout()); panel.setBackground(Color.WHITE); panel.setPreferredSize(new Dimension(width, height)); panel.add(label); // the status bar that shows the mouse position statusBar = new JLabel(" "); // attach listener to observe mouse movement panel.addMouseListener(this); panel.addMouseMotionListener(this); // set up the JFrame frame = new JFrame( "Drawing Panel"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setResizable(false); frame.setLayout(new BorderLayout()); frame.add(panel, BorderLayout.CENTER); frame.add(statusBar, BorderLayout.SOUTH); frame.pack(); frame.setVisible(true); // start a repaint timer to refresh the screen Timer timer = new Timer(250, this); timer.start(); } // obtains the Graphics object to draw on the panel public Graphics getGraphics() { return g; } // sets the background color of the drawing panel public void setBackground(Color c) { panel.setBackground(c); } // shows or hides the drawing panel on the screen public void setVisible(boolean visible) { frame.setVisible(visible); } // used for timer that repeatedly repaints screen public void actionPerformed(ActionEvent e) { panel.repaint(); } public void mouseClicked(MouseEvent e) { ticTac.setRowCol(e); } // draws status bar text when mouse moves public void mouseMoved(MouseEvent e) { statusBar.setText("(" + e.getX() + ", " + e.getY() + ")"); } }

			TicTac class to respond to mouse clicks on the graphics panel

			/** * Demo of program to add mouse-clicks to TicTacToe game * * @author Chuck Iverson * @version 11/11/09 / import java.awt.; import java.awt.event.; public class TicTac { public static final int X_OFFSET = 75; public static final int Y_OFFSET = 125; public static final int STEP = 100; private char [][] table = {{'-','-','-'},{'-','-','-'},{'-','-','-'}}; private DrawingPanelT panel = new DrawingPanelT(400,400,this);// create drawing panel object private Graphics g = panel.getGraphics();// get its graphics tool public static final Font font = new Font("Serif",Font.BOLD+Font.ITALIC,72); private char symbol; public TicTac() { symbol = 'X'; g.setFont(font); // set large font g.setColor(Color.black); g.drawLine(150,50,150,350); g.drawLine(250,50,250,350); g.drawLine(50,150,350,150); g.drawLine(50,250,350,250); g.setColor(Color.red); } public void setRowCol(MouseEvent e) { int x = e.getX(); int y = e.getY(); int row = (y-50)/100; int col = (x-50)/100; if (row >= 0 && row <= 2 && col >= 0 && col <= 2 && table[row][col] == '-') { table[row][col] = symbol; if (symbol == 'X') { symbol = 'O'; } else if (symbol == 'O') { symbol = 'X'; } display(); } } public void display() { for (int row = 0; row < table.length; ++row) { for (int col = 0; col < table[row].length; ++col) { if (table[row][col] != '-') { g.drawString(""+table[row][col],X_OFFSET+colSTEP,Y_OFFSET+row*STEP); } } } } }

			Homework