Desarrollo de aplicación de ejemplo Windows 7 Multitouch : “Simón Dice Renewed” II

En el transcurso de las siguientes entradas se completará el análisis de esta divertida aplicación que presenta diferentes aspectos interesantes a mencionar, tal y como se hizo en el post inicial de la serie, Desarrollo de aplicación de ejemplo Windows 7 Multitouch: “Simon Dice Renewed” I, en el que se realizó una pequeña introducción al árbol de ficheros que compone el proyecto “Simón Dice” y a las acciones de compilación disponibles en Visual Studio 2010 , haciendo una breve descripción de lo que son y en que situaciones es conveniente utilizarlos.

Para el desarrollo de esta aplicación no ha sido necesario el uso de controles de usuario, por lo cual todo el código necesario para la ejecución de la aplicación está incluido dentro de la clase “MainWindow”.

Para continuar con el análisis lo primero a observar es la vista de diseño de la clase, donde se comentará todos los controles utilizados en la interfaz del juego. Para definir mejor cada elemento se añadirá comentarios en el código.

<!--Como detalle interesante se puede ver que en el atributo “Icon” se ha establecido el

archivo “colores.ico” -->

<Window x:Class="WpfApplication1.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:my="clr-namespace:WpfApplication1"

Title="MainWindow" WindowStartupLocation="CenterScreen"

WindowState="Maximized" ResizeMode="NoResize" Loaded="Window_Loaded"

WindowStyle="None" Background="#FF2A7979"

Icon="/SimonDice;component/colores.ico">

<!--Éste es el lienzo principal, o lienzo padre donde estarán situados los demás lienzos que

serán puestos o quitados en tiempo de ejecución-->

<!--Este lienzo será el primero en ser mostrado al iniciar la ejecución del juego. Y será

tratado como una pantalla de bienvenida en el cual se decidirá si ir al lienzo de juego

o salir completamente de la aplicación -->

<Image Canvas.Left="300" Source="Img/Titulo.png" Canvas.Top="60" Height="240"

Name="Titulo" Stretch="Fill" Width="600" />

<!—Una imagen que sirve como botón que permite salir completamente de la aplicacion-->

<Image Canvas.Left="380" Source="Img/btnSalir.png" Canvas.Top="500" Height="80"

Name="btnSalirTotal" Stretch="Fill" Width="100" MouseLeftButtonDown="btnSalirTotal_MouseLeftButtonDown" TouchDown="btnSalirTotal_TouchDown" />

<!—Una imagen como botón que oculta el lienzo actual, para mostrar el lienzo de juego-->

<Image Canvas.Left="300" Source="Img/btnJugar.png" Canvas.Top="250"

Height="160" Name="btnEntrar" Stretch="Fill" Width="278"

MouseLeftButtonDown="btnEntrar_MouseLeftButtonDown" TouchDown="btnEntrar_TouchDown" />

<!—Cabria resaltar que algunas de las imagines mostradas en esta aplicación han sido

reutilizados de proyectos anteriores.-->

</Canvas>

<!—Este lienzo es donde se desarrollara el juego, y es donde está situado la gran mayoría de

controles con los que el usuario interactuara-->

<!—Seis imágenes correspondientes a los seis botones de colores que deberán ser pulsados

para la realización del juego y dependiendo de la tecnología con la que se acceda a ellos(Mouse o Touch) se lanzará un evento u otro-->

<Image Name="btn2" Source="Img/morado.png" Width="100" Height="100" Canvas.Left="81"

Canvas.Top="67" MouseLeftButtonUp="btn_MouseLeftButtonUp"

TouchDown="btn_TouchDown" TouchUp="btn_TouchUp"

MouseLeftButtonDown="btn_MouseLeftButtonDown"></Image>

<Image Name="btn1" Source="Img/azul.png" Width="100" Height="100" Canvas.Left="12"

Canvas.Top="165" MouseLeftButtonDown="btn_MouseLeftButtonDown"

MouseLeftButtonUp="btn_MouseLeftButtonUp" TouchUp="btn_TouchUp"

TouchDown="btn_TouchDown"></Image>

<Image Name="btn3" Source="Img/rojo.png" Width="100" Height="100" Canvas.Left="202"

Canvas.Top="12" MouseLeftButtonDown="btn_MouseLeftButtonDown"

MouseLeftButtonUp="btn_MouseLeftButtonUp" TouchUp="btn_TouchUp"

TouchDown="btn_TouchDown"></Image>

<Image Name="btn4" Source="Img/verde.png" Width="100" Height="100" Canvas.Left="330"

Canvas.Top="12" MouseLeftButtonDown="btn_MouseLeftButtonDown" MouseLeftButtonUp="btn_MouseLeftButtonUp" TouchDown="btn_TouchDown" TouchUp="btn_TouchUp"></Image>

<Image Name="btn5" Source="Img/verdemar.png" Width="100" Height="100" Canvas.Left="463"

Canvas.Top="67" MouseLeftButtonDown="btn_MouseLeftButtonDown"

MouseLeftButtonUp="btn_MouseLeftButtonUp" TouchDown="btn_TouchDown"

TouchUp="btn_TouchUp"></Image>

<Image Name="btn6" Source="Img/naranja.png" Width="100" Height="100" Canvas.Left="557"

Canvas.Top="165" MouseLeftButtonDown="btn_MouseLeftButtonDown"

MouseLeftButtonUp="btn_MouseLeftButtonUp" TouchDown="btn_TouchDown"

TouchUp="btn_TouchUp"></Image>

<!-- Una caja de texto que mostrara el nivel en el que se encuentra, dicho nivel será

incrementado al completar la serie y por lo contrario será reducido en una unidad

cuando se cometa un fallo-->

<TextBox Canvas.Left="248" Canvas.Top="178" Height="53" Name="txtRonda" Width="103"

Text="1" TextAlignment="Center" FontSize="30" IsReadOnly="True" />

<!—Imagen que será utilizada como botón para salir del lienzo de juego hacia el lienzo

de inicio-->

<Image Canvas.Left="608" Source="Img/btnSalir.png" Canvas.Top="-130" Height="80"

Name="btnSalir" Stretch="Fill" Width="100" MouseLeftButtonDown="btnSalir_MouseLeftButtonDown" TouchDown="btnSalir_TouchDown" />

<!—Barra de progreso que representara el nivel de volumen que tendrá el reproductor de

sonidos, y que podrá ser modificado en tiempo de ejecución. Para modificar la barra

de progreso habrá casi superpuesto a ella un slider horizontal para modificar el

valor que será mostrado en dicho ProgressBar-->

<ProgressBar Canvas.Left="240" Canvas.Top="-130" Height="26" Name="progressBar1"

Width="254" Foreground="#FF0000FA" />

<Slider Canvas.Left="240" Canvas.Top="-117" Height="30" Name="slider1" Width="256"

ValueChanged="slider1_ValueChanged" />

<!—Imagen representativa al volumen -->

<Image Canvas.Left="108" Source="Img/imagenvolumen.png" Canvas.Top="-130" Height="40"

Name="volumen" Stretch="Fill" Width="59" />

<!—Esta imagen que como viene siendo costumbre será utilizada como botón, será utilizada

para dar inicio a cada ronda, y será bloqueada después de cada pulsación , y será

desbloqueada al completar la serie o al cometer un fallo, dando la posibilidad de

empezar una nueva serie.-->

<Image Canvas.Left="-148" Source="Img/btnJugar.png" Canvas.Top="-130" Height="80"

Name="btnJugar" Stretch="Fill" Width="139" MouseLeftButtonDown="btnJugar_MouseLeftButtonDown" MouseLeftButtonUp="btnJugar_MouseLeftButtonUp_1" TouchDown="btnJugar_TouchDown" TouchUp="btnJugar_TouchUp" />

<!—Esta imagen, que en principio esta oculta, es la que será mostrada cuando se cometa

un fallo o se logre completar la serie de pulsaciones correctamente. En cada caso se

cambiará el origen de datos de la imagen por la imagen más adecuada al caso-->

<Image Canvas.Left="202" Visibility="Hidden" Source="Img/textomuybien.png"

Canvas.Top="-70" Height="49" Name="estado" Stretch="Fill" Width="201" />

<Label Name="lblPuntuacion" Content="Puntuación" Canvas.Left="238" Canvas.Top="258"

FontFamily="Times New Roman" FontSize="20" FontWeight="Bold"

Foreground="#FF1B65D4" />

<!—Se decidió colocar un “TextBlock” para indicar la puntuación actual de la partida, de

forma que cada nivel superado suma a la puntuación actual 5 veces el valor del nivel

en el que se haya encontrado.-->

<TextBlock Name="txtPuntuacion" Text="0" Canvas.Left="358" Canvas.Top="263"

FontFamily="Times New Roman" FontSize="20" FontWeight="Bold" />

<Label Name="lblIntentos" Content="Intentos: " Canvas.Left="238" Canvas.Top="308"

FontFamily="Times New Roman" FontSize="20" FontWeight="Bold" Foreground="#FF1B65D4" />

<!-- Numero de intentos restantes para terminar con el juego. Se empieza con 3 intentos

y se va restando uno cuando se comete un fallo, quitando a la vez una unidad al

nivel.Cuando el número de intentos llega a cero. Se mostrará una ventana -->

<TextBlock Name="txtIntentos" Text="3" Canvas.Left="358" Canvas.Top="313"

FontFamily="Times New Roman" FontSize="20" FontWeight="Bold" />

</Canvas>

</Window>

En el siguiente post de la serie se comentará en detalle las variables de la clase “MainWindow” y se empezará con la definición de las funciones utilizadas de forma que quede todo explicado de la manera más extendida posible.

Para acabar, recuerda que si quieres aprender mucho más sobre los secretos de los sistemas Microsoft Windows, te recomendamos leer el libro de Sergio de los Santos "Máxima Seguridad en Windows: Secretos Técnicos" , o siempre puedes suscribirte al Canal RSS de Windows Técnico para estar al día de las novedades e información técnica de interés.