Paso 1: Crear un proyecto y agregar un

panel al formulario
Visual Studio 2010
Este contenido fue traducido manualmente para obtener un nivel de calidad más alto.
Para ver esta página y el contenido original en inglés al mismo tiempo, haga clic en
“Preferencias” y elija Clásica como su preferencia de vista.

El primer paso para crear un juego de laberinto es crear el proyecto y agregar un

contenedor Panel al formulario.

Para crear un proyecto y agregar un contenedor Panel

1. En el menú Archivo, haga clic en Nuevo proyecto.

2. Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. En la
lista Plantillas instaladas, seleccione C# o Visual Basic.
3. Haga clic en el icono Aplicación de Windows Forms y, a continuación, escriba
el nombre Laberinto.
4. Establezca las propiedades del formulario.
a. Cambie el tamaño del formulario utilizando el puntero para arrastrar la
esquina inferior derecha. Observe la esquina inferior derecha del entorno
de desarrollo integrado (IDE). El tamaño del formulario aparece en la
barra de estado. Siga arrastrando hasta que el formulario tenga 650
píxeles de ancho y de alto. Puede construir un laberinto menor o mayor,
así que puede crear el formulario con el tamaño que desee.

Tamaño en la barra de estado

 b. Cuando el formulario tenga el tamaño adecuado, establezca la propiedad
Text en Laberinto.
c. Para que el usuario no pueda cambiar el tamaño del formulario,
establezca la propiedad FormBorderStyle en Fixed3D.
d. Deshabilite el botón Maximizar de la barra de título del formulario
estableciendo la propiedad MaximizeBox en False.

Ahora tiene un formulario de tamaño fijo, que el usuario no puede maximizar.

Nota
Cuando se crea un formulario nuevo, de manera predeterminada está configurado de
modo que el usuario pueda cambiar el tamaño de dos maneras: el usuario puede
arrastrar los lados o las esquinas del formulario, o hacer clic el botón Maximizar para
maximizar el formulario. Para asegurarse de que un usuario no pueda cambiar el
tamaño del formulario, deshabilite estas dos opciones. Establecer la propiedad
FormBorderStyle en cualquiera de los estilos fijos evita que el usuario cambie su
tamaño, pero todavía hacer clic en el botón Maximizar. Por ello, también hay que
deshabilitar la propiedad MaximizeBox.

Luego, es preciso crear la pista de juegos, donde se construirá el laberinto. Para

ello, utilice un control Panel. Un panel es un tipo de control contenedor que
permite disponer un grupo de controles. A diferencia de algunos de los otros
contenedores (como el contenedor TableLayoutPanel y el contenedor
FlowLayoutPanel), un panel no reorganiza los controles que contiene. Esto le
ofrece libertad para colocar los controles donde desee, pero un panel no resulta
útil cuando el usuario cambia el tamaño de la ventana (al contrario que con los
controles TableLayoutPanel o FlowLayoutPanel).

5. Vaya al grupo Contenedores del Cuadro de herramientas y haga doble clic en

Panel para agregar un panel al formulario. Cuando el panel está seleccionado,
debería aparecer un icono de desplazamiento en su esquina superior izquierda,
como se muestra a continuación.

Icono de desplazamiento

6. Arrastre el panel hasta que se encuentre muy cerca de la esquina superior

izquierda del formulario. Al arrastrarlo, observará una característica muy útil del
IDE: en cuanto el panel se encuentre a una distancia determinada de la parte
superior o del borde izquierdo del formulario, se coloca automáticamente en su
lugar y una línea de separación azul entre el borde del panel y el borde del
formulario. Puede utilizar esto para alinear fácilmente el panel de modo que
todos sus bordes estén exactamente a la misma distancia de los bordes del
formulario. En cuanto vea las líneas de separación azules superior e izquierda,
suelte el botón del mouse para colocar el panel en su lugar. Las líneas de
separación aparecen como sigue.
 Líneas de separación azules

Arrastre el controlador de arrastre inferior derecho hasta que el panel se coloque

en su lugar respecto de los bordes derecho e inferior.

7. Como desea que el usuario vea el perímetro del laberinto, es preciso que tenga
un borde visible. Seleccione el panel y establezca su propiedad BorderStyle en
Fixed3D.
8. Guarde el proyecto haciendo clic en el botón Guardar todo de la barra de
herramientas, que se muestra a continuación.

Botón Guardar todo

9. Para ejecutar el programa, presione F5 o haga clic en el botón de Iniciar

depuración de la barra de herramientas, que se muestra a continuación.

Botón de la barra de herramientas Iniciar depuración

Al ejecutarse, el formulario se debería parecer la siguiente imagen.

Formulario de laberinto inicial

 10. Antes de seguir al próximo paso del tutorial, detenga el programa cerrando el
formulario o haciendo clic en el botón Detener depuración de la barra de
herramientas Depuración. (Mientras el programa está en ejecución, el IDE
permanece en modo de solo lectura.)

Paso 2: Compilar el laberinto mediante

etiquetas
Visual Studio 2010
Este contenido fue traducido manualmente para obtener un nivel de calidad más alto.
Para ver esta página y el contenido original en inglés al mismo tiempo, haga clic en
“Preferencias” y elija Clásica como su preferencia de vista.

Ahora es el momento de construir el laberinto. Para construir el laberinto, se agregan

muchos controles Label al formulario. Normalmente, una etiqueta se utiliza para mostrar
texto. Sin embargo, en este proyecto las utilizaremos para dibujar rectángulos
coloreados en el formulario, que serán los muros del laberinto.

Para construir el laberinto mediante etiquetas

1. En el Diseñador de Windows Forms, vaya al grupo Controles comunes en el

Cuadro de herramientas y haga doble clic en Label para que el IDE agregue una
etiqueta al formulario.
2. Establezca varias propiedades para que la etiqueta se convierta en un
rectángulo, cuyo tamaño pueda modificar:
• Establezca la propiedad AutoSize en False.
• Establezca la propiedad BackColor en cualquier color que le guste. (Para
este tutorial, se ha seleccionado RoyalBlue en la pestaña Color web).
• Cambie la propiedad Text para que esté vacía, seleccionando el texto
label1 y eliminándolo.

Etiqueta convertida en un rectángulo relleno

 El control Label debería ser ahora un rectángulo relleno.

Nota
Esto puede parecer inusual porque un control Label está diseñado para utilizarse como
una etiqueta. En este caso, utilizamos la etiqueta como bloque de dibujo, porque
funciona. Una parte importante de la programación consiste en reconocer cuándo una
herramienta del cuadro de herramientas (o, en este caso, del Cuadro de herramientas
del IDE) funciona para la tarea que se desea realizar, aunque no se haya diseñado
originalmente para ello.

3. Ahora, puede ser creativo al construir el laberinto. Para copiar la etiqueta,

selecciónela y haga clic en Copiar en el menú Edición (o presione Ctrl+C). A
continuación, péguela varias veces. Seleccione Pegar en el menú Edición (o
presione Ctrl+V). Así deberían crearse los muros horizontales del laberinto.
Tome uno de los muros y arrástrelo para que quede alto y estrecho. Cópielo y
péguelo varias veces para crear los muros verticales.
4. Arrastre las etiquetas por el panel y cree el laberinto. No deje demasiado
estrechos los pasadizos, pues resultaría demasiado difícil jugar. Deja espacio
adicional en la esquina superior izquierda, porque es donde el jugador empieza a
recorrer el laberinto.

Nota
Como recordará, el tamaño del formulario aparece en la barra de estado del IDE al
cambiar su tamaño. El IDE hace lo mismo al cambiar el tamaño de las etiquetas o de
cualquier otro control. Si lo desea, puede utilizar esta característica para asegurarse de
que todos los muros del laberinto tienen el mismo ancho.
Las barras de alineación del IDE que utilizó para colocar el panel también resultan útiles
para colocar los muros del laberinto. También puede utilizar las teclas de dirección del
teclado para ajustar con precisión la posición del control que está seleccionado
actualmente. En la siguiente imagen se muestra el tamaño en la barra de estado.

5. Tamaño en la barra de estado

6.

7. Después de diseñar el laberinto, vaya al grupo Controles comunes del Cuadro

de herramientas y haga doble clic en Label una vez más. Utilice la línea (Name)
de la ventana Propiedades para denominarla finishLabel y cambie su
propiedad Text a Meta.
8. Arrastre la nueva etiqueta Meta al final del laberinto. Este es el objetivo que
usuario debe alcanzar.
9. Cierre el proyecto y ejecute el programa de nuevo. A continuación se muestra un
ejemplo de un formulario de laberinto finalizado. (Su laberinto tendrá un aspecto
diferente.)

Formulario de laberinto finalizado

Paso 3: Finalizar el juego
Visual Studio 2010
Este contenido fue traducido manualmente para obtener un nivel de calidad más alto.
Para ver esta página y el contenido original en inglés al mismo tiempo, haga clic en
“Preferencias” y elija Clásica como su preferencia de vista.

Para que el juego finalice, hay que hacer que funcione la etiqueta Meta. Para ello, se
agrega un controlador de eventos para el evento MouseEnter de la etiqueta.

Nota
Si ha completado el tutorial 1: Crear un visor de imagen, ya sabe qué son los
controladores de eventos. La mayoría de los controles tienen muchos eventos
diferentes que pueden generar. En el visor de imagen se utilizan el evento Click del
control Button y el evento CheckChanged del control CheckBox. En este tutorial, se
utiliza el evento MouseEnter del control Label, que se genera cada vez que el puntero
del mouse entra en el control. El control Label tiene más de cuatro docenas de eventos.
La mayoría de ellos tiene nombres intuitivos, como DoubleClick, Resize y TextChanged.
Más adelante en este tutorial se proporciona una lista de nombres de evento.

Para finalizar el juego

1. Seleccione el control finishLabel y, a continuación, haga clic en el icono Evento

en la parte superior de la ventana Propiedades, que representa un rayo. Al
hacer clic en él, aparecen los eventos del control en lugar de sus propiedades.
Puede volver a la lista de propiedades haciendo clic en el icono de propiedad.
Por ahora, mantenga la ventana Propiedades como está, de modo que muestre
todos los eventos del control finishLabel. Desplácese hacia abajo hasta el evento
MouseEnter. Los iconos y el evento MouseEnter aparecen como sigue.
 Icono de evento

Icono de propiedad

Evento MouseEnter

2. Haga doble clic en el palabra MouseEnter. Después de hacerlo, el IDE agrega

automáticamente un método de control de eventos al formulario y muestra el
editor de código, como sigue.

VB

Private Sub finishLabel_MouseEnter() Handles finishLabel.MouseEnter

End Sub

Este método de control de eventos se ejecuta cada vez que el puntero del
mouse entra en la etiqueta.

3. Queremos que el programa abra un cuadro de mensaje que felicite al usuario y

que, a continuación, se cierre el programa. Para ello, se agregan líneas de código
(con un comentario), como sigue.
 VB

Private Sub finishLabel_MouseEnter() Handles finishLabel.MouseEnter

' Show a congratulatory MessageBox, then close the form.

MessageBox.Show("Congratulations!")
Close()
End Sub

Nota
El método finishLabel_MouseEnter() tiene dos instrucciones. La primera instrucción
consiste en llamar a un método denominado Show(), que abre un cuadro de mensaje
que contiene cualquier texto que haya escrito entre los paréntesis.

4. Puede obtener más información sobre lo que sucede utilizando el IDE para
explorar el código. Coloque el puntero del mouse de modo que se encuentre
encima de la palabra MessageBox. Debería aparecer la siguiente información
sobre herramientas.

Tooltip

Nota
El IDE muestra que hay una clase denominada
System.Windows.Forms.MessageBox, y que el método Show() al que ha llamado
se encuentra dentro de esa clase. No se requieren conocimientos completos para que el
cuadro de mensaje funcione, pero la información adicional puede resultar útil.
Con respecto a la segunda instrucción, cada formulario tiene un método integrado
denominado Close() que hace que el formulario se cierre. Algunos programas tienen
varias ventanas entre las que el usuario puede alternar. Cuando se trabaja en un
programa de ese tipo, este cierra la ventana activa pero en ejecución el resto del
programa. (Por ejemplo, si tiene varios documentos de Microsoft Office Word abiertos al
mismo tiempo, al cerrar una ventana de documento se cierra ese documento, pero
Office Word permanece abierto.) Sin embargo, en un programa como este, donde hay
una sola ventana, al cerrarla se deja de ejecutar el programa; por consiguiente, al cerrar
el formulario, se cierra el programa.

5. Guarde y ejecute el programa. Mueva el puntero del mouse sobre la etiqueta

Meta. Debería abrir el mensaje y, a continuación, cerrar el programa.