Hi ive been working for a few days now trying to figure out how to make it so when a button is pressed in this game instead of just a simple X or O showing up an image of lets say a dog for X and a cat for O or something along these lines would show up instead- i cannot figure it out so would any one be able to help me? Ive got it so the words scr/x(or)o.jpg show up but no image :(

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import javax.swing.JButton;
import java.awt.Color;
import javax.swing.ImageIcon;





public class TicTacToe extends JPanel implements ActionListener
{



//Class constants how big ect the window will be

private static final int WINDOW_WIDTH = 400;
private static final int WINDOW_HEIGHT = 400;
private static final int TEXT_WIDTH = 10;
ImageIcon X =new ImageIcon("scr/x.jpg");
ImageIcon O= new ImageIcon("scr/o.jpg");



/*Sets up the a 3 by 3 playing grid used the supplied java help
 to figure this out*/
private static final GridLayout Layout_Style = new GridLayout(3,3);


//Button and window-how the frame and buttons or squares should look
private JFrame window = new JFrame("TicTacToe");

private JButton Square1 = new JButton("");

private JButton Square2 = new JButton("");
private JButton Square3 = new JButton("");
private JButton Square4 = new JButton("");
private JButton Square5 = new JButton("");
private JButton Square6 = new JButton("");
private JButton Square7 = new JButton("");
private JButton Square8 = new JButton("");
private JButton Square9 = new JButton("");



String mark =  "scr/x.jpg";
boolean win = false;




public TicTacToe()
{

    window.setSize(WINDOW_WIDTH,WINDOW_HEIGHT);
    window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// exits the application once the game has been won
    window.setLocationRelativeTo(null);//Centers the window


    //Add to window the internet helped me to see what this should look like
    window.getContentPane().setLayout(Layout_Style);
    window.getContentPane().add(Square1);
    window.getContentPane().add(Square2);
    window.getContentPane().add(Square3);
    window.getContentPane().add(Square4);
    window.getContentPane().add(Square5);
    window.getContentPane().add(Square6);
    window.getContentPane().add(Square7);
    window.getContentPane().add(Square8);
    window.getContentPane().add(Square9);
    //Add listener
    Square1.addActionListener(this);
    Square2.addActionListener(this);
    Square3.addActionListener(this);
    Square4.addActionListener(this);
    Square5.addActionListener(this);
    Square6.addActionListener(this);
    Square7.addActionListener(this);
    Square8.addActionListener(this);
    Square9.addActionListener(this);

    window.setVisible(true);
}
    //ActionPerformed
public void actionPerformed(ActionEvent e)
{
// counts one click of the mouse and then searches for which button has been pressed
    int count=1;

do
{

if (e.getSource()==Square1)
/*If user marks Square 1 then it will set a mark or it will continue on
searching until a Square is marked, prob  cleaner way to do this tho..*/
{
    Square1.setText(mark);
    Square1.setEnabled(false);
}
else if (e.getSource()==Square2)
{
    Square2.setText(mark);
    Square2.setEnabled(false);
}
else if (e.getSource()==Square3)
{
    Square3.setText(mark);
    Square3.setEnabled(false);
}
else if (e.getSource()==Square4)
{
    Square4.setText(mark);
    Square4.setEnabled(false);
}
else if (e.getSource()==Square5)
{
    Square5.setText(mark);
    Square5.setEnabled(false);
}
else if (e.getSource()==Square6)
{
    Square6.setText(mark);
    Square6.setEnabled(false);
}
else if (e.getSource()==Square7)
{
    Square7.setText(mark);
    Square7.setEnabled(false);
}
else if (e.getSource()==Square8)
{
    Square8.setText(mark);
    Square8.setEnabled(false);
}
else if (e.getSource()==Square9)
{
    Square9.setText(mark);
    Square9.setEnabled(false);
}

//Checks to see if 3 corresponding X's or O's Match-up
if (Square1.getText().equals(Square2.getText()) && Square2.getText().equals
        (Square3.getText()) && Square1.getText().equals("")==false)
{
    Square1.setBackground(Color.BLACK);// i don't think this colour thing actually works but i can't see why
    Square2.setBackground(Color.BLACK);
    Square3.setBackground(Color.BLACK);
    win=true;
}
else if (Square4.getText().equals(Square5.getText()) && Square5.getText().equals
        (Square6.getText())&& Square4.getText().equals("")==false)
{
    Square4.setBackground(Color.BLACK);
    Square5.setBackground(Color.BLACK);
    Square6.setBackground(Color.BLACK);
    win=true;
}
else if (Square7.getText().equals(Square8.getText()) && Square8.getText().equals
        (Square9.getText())&& Square7.getText().equals("")==false)
{
    Square7.setBackground(Color.BLACK);
    Square8.setBackground(Color.BLACK);
    Square9.setBackground(Color.BLACK);
    win=true;
}
else if (Square1.getText().equals(Square4.getText()) && Square4.getText().equals
        (Square7.getText())&& Square1.getText().equals("")==false)
{
    Square1.setBackground(Color.BLACK);
    Square4.setBackground(Color.BLACK);
    Square7.setBackground(Color.BLACK);
    win=true;
}
else if (Square2.getText().equals(Square5.getText()) && Square5.getText().equals
        (Square8.getText())&& Square2.getText().equals("")==false)
{
    Square2.setBackground(Color.BLACK);
    Square5.setBackground(Color.BLACK);
    Square8.setBackground(Color.BLACK);
    win=true;
}
else if (Square3.getText().equals(Square6.getText()) && Square6.getText().equals
        (Square9.getText())&& Square3.getText().equals("")==false)
{
    Square3.setBackground(Color.BLACK);
    Square6.setBackground(Color.BLACK);
    Square9.setBackground(Color.BLACK);
    win=true;
}
else if (Square1.getText().equals(Square5.getText()) && Square5.getText().equals
        (Square9.getText())&& Square1.getText().equals("")==false)
{
    Square1.setBackground(Color.BLACK);
    Square5.setBackground(Color.BLACK);
    Square9.setBackground(Color.BLACK);
    win=true;
}
else if (Square3.getText().equals(Square5.getText()) && Square5.getText().equals
        (Square7.getText())&& Square3.getText().equals("")==false)
{
    Square3.setBackground(Color.BLACK);
    Square5.setBackground(Color.BLACK);
    Square7.setBackground(Color.BLACK);
    win=true;
}

 if (count==9 && win== false)
{
    JOptionPane.showMessageDialog(null, mark + "Too bad its a tie");//at the moment this isn't working but i cannot see why
    System.exit(1);
    win=false;
}

System.out.println("Button Pressed");
if (count!=9 && win==true)
{
    JOptionPane.showMessageDialog(null, mark + " You Win!!!");
    System.exit(1);
}
    if (mark.equals("scr/x.jpg"))
{
    mark="scr/o.jpg";
}
else
{
    mark="scr/x.jpg";
}

}

    while(win=false);

    }
public static void main(String[] args)

{
TicTacToe gui = new TicTacToe();


}



}

Recommended Answers

All 11 Replies

Replace button.setText(some string) with button.setIcon(some icon)

Ok thanks for that i changed it so it says
Square1.setIcon(mark);
Square1.setEnabled(false);
However now i have an error message- is there anything else i might need to change to get it to work?- it runs but when the button is pressed nothing happens

so am I supposed to guess what the error message is? ;-)

But, if you are trying to pass a String to setIcon that's not going to work. You need some kind of Icon object that you can get from the file name/path... probably an ImageIcon in this case. See
http://java.sun.com/docs/books/tutorial/uiswing/components/icon.html

No sorry but i've played around with it a little more but now i can only get the O's to show up but no X's :( heres the code at the moment:

import java.awt.*;
import java.awt.event.*;
import javax.swing.JButton;
import java.awt.Color;
import javax.swing.ImageIcon;
import javax.swing.Icon;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JPanel;







public class TicTacToe extends JPanel implements ActionListener
{



    //Class constants how big ect the window will be

    private static final int WINDOW_WIDTH = 400;
    private static final int WINDOW_HEIGHT = 400;
    private static final int TEXT_WIDTH = 10;




    /*Sets up the a 3 by 3 playing grid used the supplied java help
     to figure this out*/
    private static final GridLayout Layout_Style = new GridLayout(3,3);


    //Button and window-how the frame and buttons or squares should look
    private JFrame window = new JFrame("TicTacToe");

    private JButton Square1 = new JButton("");

    private JButton Square2 = new JButton("");
    private JButton Square3 = new JButton("");
    private JButton Square4 = new JButton("");
    private JButton Square5 = new JButton("");
    private JButton Square6 = new JButton("");
    private JButton Square7 = new JButton("");
    private JButton Square8 = new JButton("");
    private JButton Square9 = new JButton("");




    ImageIcon mark = new ImageIcon("src/x.jpg");
    boolean win = false;




    public TicTacToe()
    {

        window.setSize(WINDOW_WIDTH,WINDOW_HEIGHT);
        window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// exits the application once the game has been won
        window.setLocationRelativeTo(null);//Centers the window


        //Add to window the internet helped me to see what this should look like
        window.getContentPane().setLayout(Layout_Style);
        window.getContentPane().add(Square1);
        window.getContentPane().add(Square2);
        window.getContentPane().add(Square3);
        window.getContentPane().add(Square4);
        window.getContentPane().add(Square5);
        window.getContentPane().add(Square6);
        window.getContentPane().add(Square7);
        window.getContentPane().add(Square8);
        window.getContentPane().add(Square9);
        //Add listener
        Square1.addActionListener(this);
        Square2.addActionListener(this);
        Square3.addActionListener(this);
        Square4.addActionListener(this);
        Square5.addActionListener(this);
        Square6.addActionListener(this);
        Square7.addActionListener(this);
        Square8.addActionListener(this);
        Square9.addActionListener(this);

        window.setVisible(true);
    }
        //ActionPerformed
    public void actionPerformed(ActionEvent e)
    {
// counts one click of the mouse and then searches for which button has been pressed
        int count=1;

    do
    {

    if (e.getSource()==Square1)
/*If user marks Square 1 then it will set a mark or it will continue on
searching until a Square is marked, prob  cleaner way to do this tho..*/
    {
        Square1.setIcon(new ImageIcon("src/x.jpg"));
        Square1.setEnabled(false);
           if (Square1.isEnabled()==false)Square1.setDisabledIcon(new ImageIcon("src/o.jpg"));

    }
    else if (e.getSource()==Square2)
    {
        Square2.setIcon(new ImageIcon("src/x.jpg"));
        Square2.setEnabled(false);
                if (Square2.isEnabled()==false)Square2.setDisabledIcon(new ImageIcon("src/o.jpg"));
    }
    else if (e.getSource()==Square3)
    {
        Square3.setIcon(new ImageIcon("src/x.jpg"));
        Square3.setEnabled(false);
                if (Square3.isEnabled()==false)Square3.setDisabledIcon(new ImageIcon("src/o.jpg"));
    }
    else if (e.getSource()==Square4)
    {
        Square4.setIcon(new ImageIcon("src/x.jpg"));
        Square4.setEnabled(false);
                if (Square4.isEnabled()==false)Square4.setDisabledIcon(new ImageIcon("src/o.jpg"));
    }
    else if (e.getSource()==Square5)
    {
        Square5.setIcon(new ImageIcon("src/x.jpg"));
        Square5.setEnabled(false);
                if (Square5.isEnabled()==false)Square5.setDisabledIcon(new ImageIcon("src/o.jpg"));
    }
    else if (e.getSource()==Square6)
    {
        Square6.setIcon(new ImageIcon("src/x.jpg"));
        Square6.setEnabled(false);
                if (Square6.isEnabled()==false)Square6.setDisabledIcon(new ImageIcon("src/o.jpg"));
    }
    else if (e.getSource()==Square7)
    {
        Square7.setIcon(new ImageIcon("src/x.jpg"));
        Square7.setEnabled(false);
                if (Square7.isEnabled()==false)Square7.setDisabledIcon(new ImageIcon("src/o.jpg"));
    }
    else if (e.getSource()==Square8)
    {
        Square8.setIcon(new ImageIcon("src/x.jpg"));
        Square8.setEnabled(false);
                if (Square8.isEnabled()==false)Square8.setDisabledIcon(new ImageIcon("src/o.jpg"));
    }
    else if (e.getSource()==Square9)
    {
        Square9.setIcon(new ImageIcon("src/x.jpg"));
        Square9.setEnabled(false);
                if (Square9.isEnabled()==false)Square9.setDisabledIcon(new ImageIcon("src/o.jpg"));
    }

    //Checks to see if 3 corresponding X's or O's Match-up
    if (Square1.getText().equals(Square2.getText()) && Square2.getText().equals
            (Square3.getText()) && Square1.getText().equals("")==false)
    {
        Square1.setBackground(Color.BLACK);// i don't think this colour thing actually works but i can't see why
        Square2.setBackground(Color.BLACK);
        Square3.setBackground(Color.BLACK);
        win=true;
    }
    else if (Square4.getText().equals(Square5.getText()) && Square5.getText().equals
            (Square6.getText())&& Square4.getText().equals("")==false)
    {
        Square4.setBackground(Color.BLACK);
        Square5.setBackground(Color.BLACK);
        Square6.setBackground(Color.BLACK);
        win=true;
    }
    else if (Square7.getText().equals(Square8.getText()) && Square8.getText().equals
            (Square9.getText())&& Square7.getText().equals("")==false)
    {
        Square7.setBackground(Color.BLACK);
        Square8.setBackground(Color.BLACK);
        Square9.setBackground(Color.BLACK);
        win=true;
    }
    else if (Square1.getText().equals(Square4.getText()) && Square4.getText().equals
            (Square7.getText())&& Square1.getText().equals("")==false)
    {
        Square1.setBackground(Color.BLACK);
        Square4.setBackground(Color.BLACK);
        Square7.setBackground(Color.BLACK);
        win=true;
    }
    else if (Square2.getText().equals(Square5.getText()) && Square5.getText().equals
            (Square8.getText())&& Square2.getText().equals("")==false)
    {
        Square2.setBackground(Color.BLACK);
        Square5.setBackground(Color.BLACK);
        Square8.setBackground(Color.BLACK);
        win=true;
    }
    else if (Square3.getText().equals(Square6.getText()) && Square6.getText().equals
            (Square9.getText())&& Square3.getText().equals("")==false)
    {
        Square3.setBackground(Color.BLACK);
        Square6.setBackground(Color.BLACK);
        Square9.setBackground(Color.BLACK);
        win=true;
    }
    else if (Square1.getText().equals(Square5.getText()) && Square5.getText().equals
            (Square9.getText())&& Square1.getText().equals("")==false)
    {
        Square1.setBackground(Color.BLACK);
        Square5.setBackground(Color.BLACK);
        Square9.setBackground(Color.BLACK);
        win=true;
    }
    else if (Square3.getText().equals(Square5.getText()) && Square5.getText().equals
            (Square7.getText())&& Square3.getText().equals("")==false)
    {
        Square3.setBackground(Color.BLACK);
        Square5.setBackground(Color.BLACK);
        Square7.setBackground(Color.BLACK);
        win=true;
    }

     if (count==9 && win== false)
    {
        JOptionPane.showMessageDialog(null, mark + "Too bad its a tie");//at the moment this isn't working but i cannot see why
        System.exit(1);
        win=false;
    }

    System.out.println("Button Pressed");
    if (count!=9 && win==true)
    {
        JOptionPane.showMessageDialog(null, mark + " You Win!!!");
        System.exit(1);
    }
        if (mark.equals(new ImageIcon("src/x.jpg")))
    {

    mark = new ImageIcon("src/o.jpg");
    }
    else
    {

    mark = new ImageIcon("src/x.jpg");
    }

    }

        while(win=false);

        }
public static void main(String[] args)

    {
    TicTacToe gui = new TicTacToe();


}


    }

Thank you for all of your help by the way.

Check out if (mark.equals(new ImageIcon("src/x.jpg")))
mark is an existing icon, new... is a new icon, they're not equal.

ps please post code in tags[code=java] tags

ok so that makes sense- im really new to java so what part do i need to change so the X shows up? the new image icon or the mark part?

I would keep the state of the botton (x/o) as a separate variable (boolean), then set the icon according to that. That way you separate the logic from the way you happen to show things in the GUI.

boolean isX = true;
ImageIcon xIcon =  new ImageIcon("src/x.jpg");
ImageIcon oIcon =  new ImageIcon("src/o.jpg");
...
isX = !isX; // change state of button
...
mark = isX?xIcon:oIcon;  // set corresponding icon

so there is nothing i can just simply change or add that would fix this annoying issue? like i said new to java and its all just very mind boggling at the moment

See sample code that edited intio my previous post just now.
Believe me, you don't want to "just fix it" - you may end up with a program, but you may have leaned nothing (or even worse learned a bad idea). Take the effort to do it "right", and you'll be grateful later.

Yes ok that is true- can i copy paste that sample code or do i need to change it? and if i need to change it how would i go about doing that?
thanks

I don't have the time to do a full analysis of your code, so I can't gauarantee what will work exactly. Once you understand the sample code you should be able to see whether it needs any changes begore pasting it in. My guess is that it will fit in pretty much as-is.
If you declare the two icons once up-front then you will be able to go back to testing for equality, as in
if (mark == xIcon) or
if (square1.getIcon() == xIcon)
... that may reduce the needed changes.

ps
the whole code

if (e.getSource()==Square1)
{
Square1.setText(mark);
Square1.setEnabled(false);
}
else if (e.getSource()==Square2)
{
Square2.setText(mark);
... 9 times

is a very long way of saying

(e.getSource().setText(mark);
(e.getSource().setEnabled(false);
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.