En este post vemos una manera de como crear un juego de rompecabezas en java sin el uso de java2d, ademas, las piezas del puzzle no serán las típicas rectangulares sino tendrán una forma irregular, para esto lo mejor es utilizar imágenes con el fondo transparente, ademas para poder mover fácilmente las piezas, emplearemos Absolute Layout, es un ejemplo sencillo, no habrá nivel de complejidad, no habrá score ni nada parecido, es un simple juego de rompecabezas.
Herramientas
– Netbeans 7.3
– Editor de imágenes Photoshop, Gimp , etc
– Liberia AbsoluteLayout.jar
Las piezas del puzzle
Para crear el rompecabezas partiremos de una imagen *.PNG de 500×450 pixeles el cual utilizando un editor de imágenes, dividiremos en 9 partes con forma irregular (las dimensiones de cada pieza no nos interesa), guardaremos las 9 piezas en disco con formato *.PNG y fondo transparente, por ejemplo «asuka1.png, asuka2.png, etc».
A mi me quedaron las 9 piezas de la siguiente manera:
El rompecabezas en netbeans
1. Crea un nuevo proyecto (nombre: puzzle) con la siguiente estructura:
Podemos ver que las 9 imágenes que creamos más arriba, las añadimos al paquete RESOURCES, ademas añadimos la librería Absolute Layout, tenemos PrincipalView que es un JFrame, y dos clases más que son Pieza y Tablero.
El funcionamiento del juego es muy simple, tenemos una clase Pieza que se extiende de un JLabel la cual, sera implementada en la clase Tablero donde crearemos una matriz 3×3, la clase Tablero se extiende de un JPanel. Se hará uso de la librería Absolute Layout para poder posicionar las piezas en cualquier lugar del tablero, inclusive una encima de otra.
Todas las clases están debidamente comentadas, ademas que el proyecto es pequeño y sera fácilmente entendible 🙂
2. Clase Pieza.java .
import java.awt.Dimension; import java.awt.Point; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import java.awt.event.MouseMotionListener; import javax.swing.ImageIcon; import javax.swing.JLabel; /** * @web https://www.jc-mouse.net/ * @author Mouse */ public class Pieza extends JLabel implements MouseListener, MouseMotionListener { //para el movimiento de la pieza private Point start_drag; private Point start_loc; /** * Constructor de clase * @param pieza numero de pieza * @param location Point coordenas de la pieza sobre su contenedor */ public Pieza( int pieza, Point location ){ this.setText(""); this.setVisible(true); ImageIcon icon = new ImageIcon( getClass().getResource("/org/game/resources/asuka"+pieza+".png")); this.setIcon( icon ); Dimension d = new Dimension( icon.getIconWidth(), icon.getIconHeight() ); this.setPreferredSize( d ); this.setSize( d ); this.setLocation( location ); //Listener this.addMouseListener(this); this.addMouseMotionListener(this); } @Override public void mouseClicked(MouseEvent e) { } @Override public void mousePressed(MouseEvent e) { this.start_drag = getScreenLocation(e); this.start_loc = this.getLocation(); } @Override public void mouseReleased(MouseEvent e) { } @Override public void mouseEntered(MouseEvent e) { } @Override public void mouseExited(MouseEvent e) { } @Override public void mouseDragged(MouseEvent e) { Point current = this.getScreenLocation(e); Point offset = new Point((int) current.getX() - (int) start_drag.getX(),(int) current.getY() - (int) start_drag.getY()); Point new_location = new Point((int) (this.start_loc.getX() + offset.getX()), (int) (this.start_loc.getY() + offset.getY())); this.setLocation(new_location); this.repaint(); } @Override public void mouseMoved(MouseEvent e) { } /** * metodo para obtener la posicion del frame en la pantalla * @param evt Evento del raton * @return Point obtiene las coordenadas del objeto sobre el tablero */ public Point getScreenLocation( MouseEvent evt ) { Point cursor = evt.getPoint(); Point target_location = this.getLocationOnScreen(); return new Point((int) (target_location.getX() + cursor.getX()), (int) (target_location.getY() + cursor.getY())); } }//--> end class
Nota: el código para mover la pieza no es mio :), es un código ya bastante conocido por internet así que no se quien es el autor 🙂
3. Clase Tablero.java .
import java.awt.Dimension; import java.awt.Point; import java.util.Random; import javax.swing.JPanel; import org.netbeans.lib.awtextra.AbsoluteLayout; /** * @web https://www.jc-mouse.net/ * @author Mouse */ public class Tablero extends JPanel{ private int fila = 3; private int columna = 3; Pieza [][] matriz = new Pieza[fila][columna]; /** * COnstructor de clase */ public Tablero(){ Dimension dt = new Dimension(500,450); this.setPreferredSize(dt); this.setSize(dt); this.setVisible(true); this.setBorder( javax.swing.BorderFactory.createLineBorder( new java.awt.Color(0, 0, 0) ) ); //Se añaden las piezas al tablero int p = 1; for( int i=0 ; i< fila; i++) { for( int j=0 ; j<columna; j++) { //coordenas aleatorias de pieza int x = 50 + ( new Random()).nextInt(400-10); int y = 50 + ( new Random()).nextInt(300-10); Point location = new Point(x,y); matriz[i][j] = new Pieza( p , location ); this.add( matriz[i][j] ); p++; } } //se asigna Layout this.setLayout( new AbsoluteLayout() ); } }//--> end class
4. JFrame PrincipalView. La interfaz se reduce a un JPanel de dimensión 500×450
Debemos implementar la clase Tablero de la siguiente forma:
package org.game.gui; import org.game.models.Tablero; /** * @web https://www.jc-mouse.net/ * @author Mouse */ public class PrincipalView extends javax.swing.JFrame { //instancia de tablero private Tablero tablero = new Tablero(); /** * Creates new form principal */ public PrincipalView() { initComponents(); this.setLocationRelativeTo(null); this.setTitle("Puzzle Kawaii - https://www.jc-mouse.net/"); this.jPanel1.add( tablero ); }
Y ejecutando tenemos:
Descargate el ejemplo del post en este LINK pobre
Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d[...]
Me llego la siguiente duda por facebook que me pareció interesante: «Se quiere desarrollar una tabla en java que haga us[...]
Si queremos añadir un enlace web a una aplicación en java, podemos hacer uso de botones o etiquetas, incluso se puede añ[...]
En este post vamos a crear una aplicación sencilla para conectar C# con MySQL. Manos a la obra 🙂 Necesitamos – Con[...]
El patrón de desbloqueo es una medida de seguridad que tienen algunos teléfonos inteligentes para evitar el acceso al di[...]
En este tutorial crearemos un interesante efecto de explosión al momento de abrir un JPanel, este efecto puede extenders[...]
