PDF de programación - Guión 5 - Construcción del juego del tetris con Netbeans 5.5

Gui ón 5

Construcción del juego del tetris
con Netbeans 5.5

Diciembre de 2006

Nuevas Tecnologías de la Programación

Curso 2006/2007

Índice

1.

Introducci ón
1.1. Creación del proyecto . . . . . . . . . . . . . . . . . . . . .
1.2. Creación del contenedor de objetos . . . . . . . . . . . . .
1.3. Definición de la clase principal del proyecto . . . . . . . . .

2. Construcci ón del men ú

3. Creaci ón del panel de juego

4. Pintar el tablero de juego en el JPanel

5. Movimiento de la figura del tetris

6. Movimiento a izquierda y derecha y rotaci ón de la figura

7. Asociar acciones a los items del men ú

8. Posibles mejoras del juego

9. Localizaci ón del programa ya terminado

5
5
6
8

9

10

13

18

19

21

21

22

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
Netbeans 5.5 5

1.

Introducci ón

La idea de este guión es que el alumno aprenda por sí sólo las princi-
pales utilidades que proporciona Netbeans para construir el interfaz gráfi-
co de una aplicación J2SDK. Nosotros utilizaremos la versión 5.5 de Net-
beans. Esto nos facilitará enormemente la tarea de construir la aplicación
Java, sobre todo en cuanto al interfaz gráfico.

Este guión muestra como construir un programa completo (una ver-
sión simple del juego del Tetris) usando Netbeans 5.5. El interfaz gráfico
será desarrollado de forma visual con Netbeans.

1.1. Creaci ón del proyecto

Crea un proyecto para la nueva aplicación:
1. Selecciona Men ú File → New Project (Ctrl + Shift + N), o bien

pulsa en el icono New Project de la barra de utilidades del IDE.

2. Seleccionamos General → Java Application y pulsa el botón Next.

5

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
Netbeans 5.5 6

3. Como nombre del proyecto introducimos TetrisSwing5.5. Como
carpeta (directorio) donde colocar el proyecto usaremos el directorio
ProjectsNB\TetrisSwing5.5. La carpeta ProjectsNB debe
estar previamente creada dentro de tu home. Para ayudarte a selec-
cionar esta carpeta puedes pinchar en el botón Browse.

4. Asegúrate que está seleccionada la opción Set as Main Project y no

seleccionada la opción Create Main Class.

5. Pulsa el botón Finish.

1.2. Creaci ón del contenedor de objetos

Crearemos un contenedor JFrame y lo colocaremos en un nuevo pa-

quete.

1. Pinchar con el botón derecho del ratón sobre el nodo TetrisSwing de

la ventana de proyectos, y elegir New → JFrame Form

2.

Introduce TetrisFrame como nombre para el nuevo JFrame. Co-
mo nombre del paquete introduce guitetris.

6

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
Netbeans 5.5 7

3. Pulsa el botón Finish.

El IDE crea el form TetrisFrame y la clase TetrisFrame dentro del fi-
chero TetrisFrame.java. El paquete guitetris sustituye ahora al
paquete <default package>, y el form TetrisFrame se abre en la ven-
tana Editor en la vista de diseño (Design) que muestra una vista gráfica
de los componentes GUI. Además se abre una ventana para la paleta de
componentes en la parte superior derecha del IDE, el inspector de compo-
nentes aparece en la parte izquierda debajo de la ventana de proyectos,
y la ventana de propiedades aparece en la parte derecha debajo de la
paleta de componentes.

Las versiones 5.5 y 5.0 de netbeans utilizan por defecto el nuevo gestor
de posicionamiento GroupLayout que facilita enormemente la tarea de
colocar los componentes en él. Para el JFrame que acabamos de crear
podemos comprobarlo pinchando con el botón derecho del ratón en el no-
do JFrame del inspector de componentes y seleccionar Set Layout en el

7

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
Netbeans 5.5 8

menú contextual. Podemos observar que aparece en negrita Free Design
que corresponde al layout GroupLayout. Podríamos seleccionar ahora
otro distinto pero no lo haremos, pues éste layout es el más adecuado.

1.3. Definici ón de la clase principal del proyecto

Debemos ahora definir la clase principal (Main Class) de forma que los
comandos de construcción y ejecución (Build y Run) funcionen de forma
correcta. En este caso lo que queremos es poner como clase principal, la
clase TetrisSwing que hemos creado en los pasos anteriores.

1. En la ventana de proyectos, pincha con el botón derecho en el nodo
del proyecto TetrisSwing5.5 y elige Properties. Aparecerá entonces
el siguiente diálogo:

2. En el panel de categorías (Categories) del diálogo de propiedades

del proyecto, selecciona el nodo Run.

8

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
Netbeans 5.5 9

3. En el panel derecho, pincha el botón Browse que está a la izquierda

del campo Main Class.

4. En el diálogo Browse Main Classes que aparece, selecciona guite-

tris.TetrisSwing, y pulsa Select Main Class.

5. Pincha Ok para salir del diálogo de propiedades del proyecto.

2. Construcci ón del men ú

Ahora añadiremos una barra de menús a nuestro form.

1. Seleccionar JMenuBar en la solapa Swing de la paleta de compo-

nentes.

2. Pinchar con el ratón en cualquier parte del panel del editor del form.

Inicialmente la barra de menús tendrá sólo un menú, sin ningún item.
Vamos a añadir otro menú, y le pondremos a cada uno sus opciones
(items).

1. Pinchar con el botón derecho del ratón en JMenu1.

9

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
10

Netbeans 5.5

2. Añadir dos JMenuItem a JMenu1 mediante Add → JMenuItem.
3. Renombrar el JMenu y los JMenuItem, modificando además algu-

nas propiedades según muestra la siguiente tabla:

Nombre original Nuevo nombre Text Tooltip text Mnemonic
jMenu1
jMenuItem1
jMenuItem2

File
File
New New
Exit Exit

FileMenu
NewItem
ExitItem

F
N
X

3. Creaci ón del panel de juego

A continuación crearemos una clase que herede de JPanel que nos
servirá para mostrar el panel de juego. Este nueva clase sobreescribirá el
método paintComponent(Graphics g) para que se encargue de di-
bujar el panel de juego con las figuras incluidas. Para ello realiza los si-
guientes pasos:

1. Selecciona el nodo TetrisSwing en la ventana de proyectos, y crea
un nuevo JPanel: Men ú File → New File → Java GUI Forms →
JPanel Form.

2. Nombraremos RejillaPanel a esta nueva clase y la incluiremos en el

paquete guitetris.

10

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
11

Netbeans 5.5

3. Modifica la propiedad preferredSize de RejillaPanel para que ten-
ga los valores [200,400]: Selecciona el nodo [JPanel] del form
RejillaPanel en el inspector de componentes y modifica la propiedad
en la ventana de propiedades.

4.

Incluye el dato miembro private TetrisFrame frame en la clase Rejilla-
Panel. Esta variable referencia será utilizada para poder acceder al
TetrisFrame donde será incluido este JPanel y así poder acce-
der a algunos métodos de tal clase que necesitaremos utilizar desde
esta clase.

5. Añade un nuevo constructor a la clase RejillaPanel que tenga un

parámetro de la clase TetrisFrame. El constructor utilizará este paráme-

11

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
12

Netbeans 5.5

tro para inicializar el dato miembro introducido en el paso anterior
(frame). El constructor debe quedar como sigue:

public RejillaPanel(TetrisFrame fr) {

this();
frame = fr;

}

6. Compila la clase RejillaPanel. Este paso es muy importante, ya

que de no hacerlo el siguiente paso no se podrá hacer.

7. Añade el panel RejillaPanel como componente del JFrame de

TetrisFrame. Para ello realiza los siguientes pasos:

Abre nodos del form TetrisFrame en el inspector de componen-
tes hasta que sea visible el nodo [JFrame].
Copia RejillaPanel al portapapeles (con el botón derecho
del ratón pincha el nodo RejillaPanel de la ventana de pro-
yectos y selecciona Copy en el menú contextual).
Pega el panel en el JFrame: Pincha con el botón derecho del
ratón el nodo [JFrame] de TetrisFrame en el inspector de
componentes, y selecciona Paste en el menú contextual. Este
paso hará que se añada al JFrame de TetrisFrame un RejillaPanel
llamado rejillaPanel1.

8. Cambiemos el código generado automáticamente por netbeans pa-
ra construir el objeto rejillaPanel1 para que haga uso del nuevo
constructor que hemos incluido anteriormente (RejillaPanel(TetrisFrame)).

a) En el inspector de componentes selecciona el componente rejillaPanel1.
b) Pincha el botón Code que hay en la parte derecha de la ventana

de propiedades.

12

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
13

Netbeans 5.5

c) Pincharemos en el botón etiquetado con ... de la propiedad

Custom Creation Code. Aparecerá el siguiente diálogo:

Incluye la siguiente línea de código y pulsa Ok.

new RejillaPanel(this);

Visualiza el código fuente de TetrisFrame, y comprueba co-
mo ahora el componente rejillaPanel1 se crea con:

rejillaPanel1 = new RejillaPanel(this);

4. Pintar el tablero de juego en el JPanel

En esta sección incluiremos el código necesario para que aparezca

dibujado el tablero de juego. Para ello realiza los siguientes pasos:

Crea un nuevo paquete en el proyecto llamado data.

Copia los ficheros Rejilla.java, Figura.java y Elemento.java
que puedes encontrar en http://decsai.ugr.es/~acu/NTP/
archivos/Guion5 en el directorio src/data de tu proyecto usando
el sistema de ficheros. La clase Rejilla es básicamente una clase que
contiene una matriz bidimensional donde cada celda puede contener
los valores VACIA, BLOQUE o PIEZA. La clase Figura representa la
figura que cae actualmente en el juego. La clase Elemento es utili-
zada por la clase Figura y representa una de las celdas ocupadas
por la Figura.

13

Nuevas Tecnologías de la Programación Construcción del juego del tetris con
14

Netbeans 5.5

Añade el dato miembro private int anchoCelda a la clase RejillaPa-
nel. Esta variable representa