Tablero de juego interactivo Java

Crear un tablero de juego en java

En este artículo se muestra el código de una propuesta para crear un tablero de juego interactivo en Java. El tablero se ha creado como una subclase de JPanel que, a la vez, contiene una matriz de JPanels que son las casillas.

Si es un tablero activo (tipo==true) el usuario puede hacer clic en cada una de las casillas, se activa el evento y se cambia la imagen de fondo de la casilla.

Requerimientos Básicos

Para que el ejemplo se ejecute sin problemas (sin tener que modificar el código) se deben crear dos imagenes. Una llamada agua.gif y otra tocado.gif (tamaño 35px) y ponerlas en la misma carpeta que el código de las clases.

El Tablero

Tablero que contiene una matriz de casillas. Se utiliza una vista de GridLayout para que las casillas se coloquen automáticamente como en una cuadrícula.

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

public class TableroGUI extends javax.swing.JPanel {
private ImageIcon agua, tocado;
private boolean tipoTablero;
private CasillasGUI [] casillas ;

    public TableroGUI() {
        initComponents();
    }

    public TableroGUI(int size, boolean tipo) {
        initComponents();
        int x,y;
        setLayout(new java.awt.GridLayout(size, size));
        this.tipoTablero = tipo;
        cargarImagenes();
        casillas = new CasillasGUI[size][size];
        for (int i = 0; i < size; i++){
            for (int j = 0; j < size; j++){
                casillas[i][j] = new CasillasGUI(this);
                casillas[i][j].setFondo(agua);
                x = (i * 35)+1;
                y = (j * 35)+1;
                casillas[i][j].setBounds(x, y, 34, 34);
                this.add(casillas[i][j]);
            }
        }
    }

    public boolean getTipoTablero(){
        return this.isTipoTablero();
    }

    public void pintar(int x, int y){
        this.casillas[x][y].setFondo(tocado);
        this.repaint();
    }

    private void cargarImagenes() {
        this.agua = this.cargarFondo("agua.gif");
        this.tocado = this.cargarFondo("tocado.gif");
    }

    protected static ImageIcon cargarFondo(String ruta) {
        java.net.URL localizacion = TableroGUI.class.getResource(ruta);
        if (localizacion != null) {
            return new ImageIcon(localizacion);
        } else {
            System.err.println("No se ha encontrado el archivo: " + ruta);
            return null;
        }
    }

    public int[] getCoordenadas(CasillasGUI casilla) {
        int [] coordenadas = new int[2];
        for (int i=0; i < this.casillas.length; i++) {
            for (int j=0; j < this.casillas.length; j++) {
                if (this.casillas[i][j] == casilla) {
                    coordenadas[0] = i;
                    coordenadas[1] = j;
                }
            }
        }
        return coordenadas;
    }

    public CasillasGUI[] getCasillas() {
        return casillas;
    }

    public void setCasillas(CasillasGUI[] casillas) {
        this.casillas = casillas;
    }

    public boolean isTipoTablero() {
        return tipoTablero;
    }
    public void setTipoTablero(boolean tipoTablero) {
        this.tipoTablero = tipoTablero;
    }

    private void initComponents() {
        setLayout(null);
        setBackground(new java.awt.Color(0, 0, 0));
        setBorder(javax.swing.BorderFactory.createLineBorder(new java.awt.Color(0, 0, 0)));
        setPreferredSize(new java.awt.Dimension(351, 351));
    }
}

Las Casillas del Tablero

Clase que representa a una casilla del tablero. Si es un tablero de tipo activo, cuando el usuario hace clic sobre una casilla, ésta se marca y se repinta, cambiando su imagen de fondo.

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

public class CasillasGUI extends javax.swing.JPanel implements MouseListener {

    private TableroGUI tablero;
    private ImageIcon fondo;
    private static int [] casillaMarcada = new int[2];

    public CasillasGUI() {
        // este constructor no se usará, se deja para poder crear el bean.
    }

    public CasillasGUI(TableroGUI t) {
        initComponents();
        this.tablero = t;
        if(this.tablero.getTipoTablero() == true){ // tablero responde a clics?
            this.addMouseListener(this);
        }
    }

    public void setFondo(ImageIcon fondo){
        this.fondo = fondo;
    }

    public ImageIcon getFondo(){
        return this.fondo;
    }

    private void initComponents() {

        javax.swing.GroupLayout layout = new javax.swing.GroupLayout(this);
        this.setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 161, Short.MAX_VALUE)
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 193, Short.MAX_VALUE)
        );
    }

    public void paintComponent(Graphics g){
        super.paintComponent(g);
        g.drawImage(fondo.getImage(), 0,0,this.getWidth(),this.getHeight(),this);
    }

    public void mouseClicked(MouseEvent e){}
    public void mouseEntered(MouseEvent e){}
    public void mouseExited(MouseEvent e){}
    public void mousePressed(MouseEvent e){
            this.setCasillaMarcada(tablero.getCoordenadas((CasillasGUI)e.getComponent()));
            this.tablero.pintar(this.getCasillaMarcada()[0],this.getCasillaMarcada()[1]);
    }
    public void mouseReleased(MouseEvent e){}

    public static int[] getCasillaMarcada() {
        return casillaMarcada;
    }
    public static void setCasillaMarcada(int[] aCasillaMarcada) {
        casillaMarcada = aCasillaMarcada;
    }
}

Programa Principal

Ventana que contiene el tablero. Lo más importante de esta clase es la creación del tablero tableroGUI1 = new TableroGUI(10,true); de 10 posiciones y tipo activo (el usuario puede hacer clic en las casillas).

public class Main extends javax.swing.JFrame {

    public Main() {
        initComponents();
    }

    private void initComponents() {
        tableroGUI1 = new TableroGUI(10,true);

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
        javax.swing.GroupLayout tableroGUI1Layout = new javax.swing.GroupLayout(tableroGUI1);
        tableroGUI1.setLayout(tableroGUI1Layout);
        tableroGUI1Layout.setHorizontalGroup(
            tableroGUI1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 349, Short.MAX_VALUE)
        );
        tableroGUI1Layout.setVerticalGroup(
            tableroGUI1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGap(0, 349, Short.MAX_VALUE)
        );

        javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addContainerGap()
                .addComponent(tableroGUI1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addContainerGap(176, Short.MAX_VALUE))
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addComponent(tableroGUI1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addContainerGap(13, Short.MAX_VALUE))
        );
        pack();
    }

    public static void main(String args[]) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new Main().setVisible(true);
            }
        });
    }

    private TableroGUI tableroGUI1;

}