[kira89]

[size=2]Hello, I need to make a simple tic tac toe game using Java. So far I have used JFrame to create a window, but I don't know what I should use to make the lines or the X's and O's.

Here is what I have so far:

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


public class TicTacToe
{
	public static void createAndShowGUI()
	{
		JFrame game = new JFrame("Tic Tac Toe");
		game.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		game.setSize(300, 300);
		
		JLabel label = new JLabel("");
		label.setPreferredSize(new Dimension(300, 300));
		game.getContentPane().add(label, BorderLayout.CENTER);
		
		game.pack();
		game.setVisible(true);
	}
   
	public static void main(String [] args) 
	{
		javax.swing.SwingUtilities.invokeLater(new Runnable()
		{
			public void run()
			{
				createAndShowGUI();
			}
		});
	}
}

[Martyr2]

Hi Kira,

This will give you a nice jump on your project and show you a bit of what you can do to make the game. I have modified your program to include drawing X's. A few things to note is the removal of pack() and the implementation of a null layout which will allow us to control the drawing by specifying pixel coordinates. It will also control the size of the panels we put on the screen. Great for drawing stuff!

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


public class TicTacToe
{
	public static void createAndShowGUI()
	{
		JFrame game = new JFrame("Tic Tac Toe");
		game.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		game.setSize(300, 300);
		
		// Setup a null layout, we will handle the coordinates for our drawing.
		game.setLayout(null);

		// Create an instance of our new drawing panel which will draw a red "X"
		DrawingPanel p = new DrawingPanel();

		// We set the size of the panel to set the size of the "X"
		// Here we are setting the X to be 50 by 50 pixels and at coordinates 10,10.
		p.setBounds(10,10,50,50);
		game.add(p);
		
		//game.pack();
		game.setVisible(true);
	}
  
	public static void main(String [] args)
	{
		javax.swing.SwingUtilities.invokeLater(new Runnable()
		{
			public void run()
			{
				createAndShowGUI();
			}
		});
	}
}


// This class will draw our red X markers for us.
class DrawingPanel extends JPanel {

	DrawingPanel () {} 

	public void paintComponent(Graphics g)   {
		// Paint background
		super.paintComponent(g);

		// Set current drawing color
		g.setColor (Color.RED);

		// Draw a line from top left to bottom right and
		// draw a line from top right to bottom left
		// For our "O's" we can use drawOval

		g.drawLine(5, 5, getWidth() - 5, getHeight() - 5);
		g.drawLine(getWidth() - 5, 5, 5, getHeight() - 5); 

	}

} 

You can read through the in code comments and run this demo to see that we place a nice neat little red X in the upper left corner. Just by adjusting the setBounds() function call we can move it around and resize it. All that would be left is for you to create an "O", draw your grid lines, and detect mouse area clicking as well as who's turn it is.

But this example should show you the basics of the drawing portion of this problem.

Enjoy!

"At DIC we be tic... tac... toe... code ninjas on the down low!"