ADIVINA EL NÚMERO

Diseño de la interfaz
1. Creación de un nuevo Proyecto.
 Haz clic en comenzar un proyecto nuevo.

 Al que nombrarás Adivina_MiNombre y da clic en aceptar.

2. Configuración del screen1

En la parte del diseñador.
 Dar clic en Screen1 de la columna Componentes y en la columna Propiedades
realizar las siguientes modificaciones:
 DispVertical a Centro:2
 Imagen DeFondo subir el archivo “Fondo1.jpg”
 En la propiedad Título cambiarlo a Instrucciones
 En la propiedad Icono subir el archivo “icon.png” y dar clic en aceptar
 3. Elementos de la sección Interfaz de usuario
Dirígete a la Paleta y de la pestaña Interfaz de usuario:
 Arrastrar una Imagen al visor

4. Configuración de la Imagen
 En la sección de Componentes cambiar el nombre “Imagen1” a
“ImagenInstrucciones”

 En la sección Propiedades de la ImagenInstrucciones cambia el Alto a 200

pixeles y Ancho a 310 pixeles.
  En “Foto” Subir el archivo de “Instrucciones.PNG” y da clic en aceptar

5. Elementos de la sección Disposición

Dirígete a la Paleta y en la pestaña Disposición:
 Arrastra una DisposiciónHorizontal al visor

6. Configuración de la Disposición Horizontal

 En la sección componentes seleccionar “DisposiciónHorizontal1” y en la
sección Propiedades cambiar los valores de Alto: a 35 pixeles y Ancho:
ajustar al contenedor, en DispVertical seleccionar Centro, DispHorizontal
seleccionar Centro, y ColorDeFondo a Gris.
 7. Elemento Botón de la sección Interfaz de usuario
Dirígete a la Paleta y en la pestaña Interfaz de usuario:
 Arrastra dos botones dentro de la DisposiciónHorizontal1 del Visor

8. Cambiar el nombre de los botones

En la sección de Componentes:
 Cambia el nombre del Botón1 a BotonInicio
 Cambia el nombre del Botón2 a BotonSalir

9. Configuración de los botones

 Selecciona el BotónInicio de la sección Componentes y en la sección
Propiedades: en Texto Borra Texto para Botón 1 y escribe Inicio.
 Selecciona el BotónSalir de la sección Componentes y en la sección
Propiedades: en Texto Borra Texto para Botón 2 y escribe Cerrar
Aplicación.

10. Configuración Screen2

 En el gestor de pantallas, selecciona Añadir ventana

 En Nueva pantalla: escribe el nombre Adivina y da clic en aceptar

11. Configuración del screen2: Adivina
En la parte del diseñador.
 Dar clic en Adivina de la columna Componentes y en la columna Propiedades
realizar las siguientes modificaciones:
 DispVertical a Centro:3
 Imagen DeFondo subir el archivo “Fondo2.jpg”
 En la propiedad AnimaciónCierreDePantalla seleccionar Zoom
 En la propiedad AnimaciónAlAbrirPantalla seleccionar Zoom

12. Crear el espacio para dibujar

Añade un lienzo (canvas) al visor, el lienzo está en la Paleta de dibujo y animación
(Drawing and Animation Palette).

13. Configuración de las propiedades del lienzo

 Cambiar el nombre de Lienzo1 a LienzoParaDibujar.
 Ajusta Altura a 300 píxeles y el ancho Ajustar al contenedor.
 ColorDeFondo a ninguno.
 14. Elementos de la sección Dibujo y Animación
 Arrastra 5 SpriteImagen dentro del Lienzo

15. Configuración de los SpriteImagen

En Componentes selecciona SpriteImagen1 y en la sección de propiedades
cambiar:
 Alto a 130 pixeles y Ancho cambiar 82 pixeles,
 en Foto subir la imagen de Carta1.jpg,
 En X=11, Y=4

En Componentes selecciona SpriteImagen2 y en la sección de propiedades

cambiar:
 Alto a 130 pixeles y Ancho cambiar 82 pixeles,
 en Foto subir la imagen de Carta2.jpg,
 En X=121, Y=77

En Componentes selecciona SpriteImagen3 y en la sección de propiedades

cambiar:
 Alto a 130 pixeles y Ancho cambiar 82 pixeles,
 en Foto subir la imagen de Carta3.jpg,
 En X=218, Y=0

En Componentes selecciona SpriteImagen4 y en la sección de propiedades

cambiar:
 Alto a 130 pixeles y Ancho cambiar 82 pixeles,
 en Foto subir la imagen de Carta4.jpg,
 En X=10, Y=154

En Componentes selecciona SpriteImagen5 y en la sección de propiedades

cambiar:
 Alto a 130 pixeles y Ancho cambiar 82 pixeles,
 en Foto subir la imagen de Carta2.jpg,
 En X=224, Y=156
 16. Elementos de la sección Disposición
Dirígete a la Paleta y de la pestaña Disposición:
 Arrastrar dos Disposición Horizontal al visor debajo del Lienzo

17. Configuración de las Disposiciones Horizontales

 En la sección componentes seleccionar “DisposiciónHorizontal1” y en la
sección de propiedades cambiar los valores de Alto: a 40 pixeles y Ancho:
ajustar al contenedor, en DispVertical y DispHorizontal seleccionar
Centro:2, el color de fondo a gris claro.
 En la sección componentes seleccionar “DisposiciónHorizontal2” y en la
sección de propiedades cambiar los valores de Alto: a 40 pixeles y Ancho:
ajustar al contenedor, en DispVertical y DispHorizontal seleccionar
Centro:2, el color de fondo a ninguno.

18. Elementos de la sección Interfaz de usuario.

Dirígete a la Paleta y de la pestaña Interfaz de usuario:
 Arrastrar un Botón y dos Etiquetas a DisposiciónHorizontal1
En componentes:
 Cambia el nombre del Botón a: BotónRespuesta
 Cambia el nombre de la etiqueta1 a EtiquetaResultado
 Cambia el nombre de la etiqueta2 a EtiquetaRespuesta

 Arrastrar dos Botones a DisposiciónHorizontal2

En componentes:
 Cambia el nombre del Botón1 a BotónReiniciar
 Cambia el nombre de la Botón2 a BotónInstrucciones

19. Configuración de las propiedades del BotónRespuesta

Selecciona el BotónRespuesta de la sección Componentes y en Propiedades:
 En Texto Borra Texto para Botón 1 y escribe OK.
 Alto a 35 pixeles y Ancho a 50 pixeles.
 PosiciónDeTexto a centro

20. Configuración de las propiedades de EtiquetaRespuesta

Selecciona el EtiquetaRespuesta de la sección Componentes y en Propiedades:
 En ColorDeFondo a ninguno.
 Tamaño de la letra a 18.0
 En Texto Borra Texto para Etiqueta 1 y escribe “La Respuesta es:”

21. Configuración de las propiedades de EtiquetaResultado

Selecciona el EtiquetaResultado de la sección Componentes y en Propiedades:
 En ColorDeFondo a ninguno.
 Tamaño de la letra a 20.0
 En Texto Borra Texto para Etiqueta 1.
 ColorDeTexto a Rojo.
 22. Configuración de las propiedades del BotónReiniciar
Selecciona el BotónReiniciar de la sección Componentes y en Propiedades:
 En ColorDeFondo a Blanco
 Alto a 35 pixeles y Ancho a 80 pixeles.
 En Texto Borra Texto para Botón 1 y escribe Reiniciar.
 PosiciónDeTexto a centro:1

23. Configuración de las propiedades del BotónInstrucciones

Selecciona el BotónInstrucciones de la sección Componentes y en Propiedades:
 En Texto Borra Texto para Botón 2 y escribe Instrucciones.
 Alto a 35 pixeles y Ancho a 90 pixeles.
 PosiciónDeTexto a centro:1

PROGRAMACIÓN DE LOS BLOQUES

Ahora dan clic en la opción Bloques, para programar las funciones que se realizarán
en la parte visible de la aplicación.

PROGRAMACIÓN DEL SCREEN1

1. Programación Botón Inicio

Cuando haga clic sobre el botón Inicio debe abrir la ventana “Adivina”.
 Dirígete al Bloque de BotónInicio y arrastra:
  Dirígete al bloque de control y arrastra el

 Dirígete al bloque de texto y arrastra el bloque y escribe el nombre

del screen “Adivina”

 Encaja los bloques:

2. Programación Botón Salir

Cuando haga clic sobre el BotónSalir debe cerrar la aplicación:
 Dirígete al Bloque de BotónInicio y arrastra el bloque cuando
BotonSalir.Clic
 Dirígete al bloque Control y arrastra cerrar la aplicación dentro del
bloque anterior.

PROGRAMACIÓN DE LA VENTANA “ADIVINA”

1. Variables
 Crea una variable global llamada número e inicialízala en cero

 Crea una variable global llamada Respuesta e inicialízala en cero

2. Programación ImagenSprite1
Cuando toque sobre la ImagenSprite1 debe hacer lo siguiente:
 Poner la variable global número a la misma variable global número más 1,
 Poner la variable global Respuesta a la variable global número,
 Poner la ImagenSprite1 visible como falso.

Cuando ImagenSprite1 toque el borde:

 Llamar ImagenSprite1.moverA X:11, Y:4
 Poner la velocidad de la ImagenSprite1 cero.

3. Programación ImagenSprite2
Cuando toque sobre la ImagenSprite2:
 Poner la variable global número a la misma variable global número más 2,
  Poner la variable global Respuesta a la variable global número,
 Poner la ImagenSprite2 visible como falso.

Cuando ImagenSprite2 toque el borde:

 Llamar ImagenSprite2.moverA X:121, Y:77
 Poner la velocidad de la ImagenSprite2 cero.

4. Programación ImagenSprite3
Cuando toque sobre la ImagenSprite3:
 Poner la variable global número a la misma variable global número más 3,
 Poner la variable global Respuesta a la variable global número,
 Poner la ImagenSprite3 visible como falso.

Cuando ImagenSprite3 toque el borde:

 Llamar ImagenSprite3.moverA X:218, Y:0
 Poner la velocidad de la ImagenSprite3 cero.

5. Programación ImagenSprite4
Cuando toque sobre la ImagenSprite4:
 Poner la variable global número a la misma variable global número más 4,
 Poner la variable global Respuesta a la variable global número,
 Poner la ImagenSprite4 visible como falso.

Cuando ImagenSprite4 toque el borde:

 Llamar ImagenSprite4.moverA X:10, Y:154
 Poner la velocidad de la ImagenSprite4 cero.

6. Programación ImagenSprite5
Cuando toque sobre la ImagenSprite5 debe hacer lo siguiente:
 Poner la variable global número a la misma variable global número más 5,
 Poner la variable global Respuesta a la variable global número,
 Poner la ImagenSprite5 visible como falso.

Cuando ImagenSprite5 toque el borde:

 Llamar ImagenSprite5.moverA X:224, Y:156
 Poner la velocidad de la ImagenSprite5 cero.

7. Programación BotónRespuesta
Cuando clic en el Botón Respuesta:
 Poner EtiquetaResultado.Texto como variable global Respuesta

8. Programación BotónInstrucciones
Cuando clic en el Botón Instrucciones:
 Abrir otra pantalla con el nombre de “Screen1”
  Programación BotónReiniciar
Cuando clic en el Botón Reiniciar:
 Poner variable global número a cero
 Poner variable global Respuesta a cadena de texto vacío.

 Poner EtiquetaResultado Texto como variable global Respuesta

 Poner la ImagenSprite1 visible como cierto.
 Poner la ImagenSprite2 visible como cierto.
 Poner la ImagenSprite3 visible como cierto.
 Poner la ImagenSprite4 visible como cierto.
 Poner la ImagenSprite5 visible como cierto.
 Poner la velocidad de la ImagenSprite1 a -15.
 Poner la velocidad de la ImagenSprite2 a -15.
 Poner la velocidad de la ImagenSprite3 a 15.
 Poner la velocidad de la ImagenSprite4 a 15.
 Poner la velocidad de la ImagenSprite5 a 15.
 Llamar ImagenSprite1.moverA X: número aleatorio entre 58 y 180, Y:
número aleatorio entre 32 y 156
 Llamar ImagenSprite2.moverA X: número aleatorio entre 58 y 180, Y:
número aleatorio entre 32 y 156
 Llamar ImagenSprite3.moverA X: número aleatorio entre 58 y 180, Y:
número aleatorio entre 32 y 156
 Llamar ImagenSprite4.moverA X: número aleatorio entre 58 y 180, Y:
número aleatorio entre 32 y 156
 Llamar ImagenSprite5.moverA X: número aleatorio entre 58 y 180, Y:
número aleatorio entre 32 y 156