Laberinto 121e1

Paso 1: Crear un proyecto y agregar un 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 al formulario.

Para crear un proyecto y agregar un contenedor

1. 2. 3. 4.

En el menú Archivo, haga clic en Nuevo proyecto. Si no usa Visual Studio Express, primero debe seleccionar un lenguaje. En la lista Plantillas instaladas, seleccione C# o Visual Basic. Haga clic en el icono Aplicación de Windows Forms y, a continuación, escriba el nombre Laberinto. 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. c. d.

Cuando el formulario tenga el tamaño adecuado, establezca la propiedad Text en Laberinto. Para que el no pueda cambiar el tamaño del formulario, establezca la propiedad FormBorderStyle en Fixed3D. 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 no puede maximizar.

Nota Cuando se crea un formulario nuevo, de manera predeterminada está configurado de modo que el pueda cambiar el tamaño de dos maneras: el 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 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 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 . Un es un tipo de control contenedor que permite disponer un grupo de controles. A diferencia de algunos de los otros contenedores (como el contenedor TableLayout y el contenedor FlowLayout), un no reorganiza los controles que contiene. Esto le ofrece libertad para colocar los controles donde desee, pero un no resulta útil cuando el cambia el tamaño de la ventana (al contrario que con los controles TableLayout o FlowLayout).

5.

Vaya al grupo Contenedores del Cuadro de herramientas y haga doble clic en para agregar un al formulario. Cuando el 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 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 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 y el borde del formulario. Puede utilizar esto para alinear fácilmente el 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 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 se coloque en su lugar respecto de los bordes derecho e inferior.

7. 8.

Como desea que el vea el perímetro del laberinto, es preciso que tenga un borde visible. Seleccione el y establezca su propiedad BorderStyle en Fixed3D. 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. 2.

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. 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.

4.

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. Arrastre las etiquetas por el 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 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.

8. 9.

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. Arrastre la nueva etiqueta Meta al final del laberinto. Este es el objetivo que debe alcanzar. 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 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 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.