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, Archivo, haga clic en Nuevo proyecto. proyecto. 2. Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. En la lista Plantillas instaladas, instaladas , seleccione C# o Visual Basic. 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 ca mbiar 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 e n 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.
