Mole Mash V2 con capas de Sprite
Introducción
Este tutorial incluye:
1. Adición de componentes en el Diseñador
2. Uso de la funcionalidad Cualquier componente para obtener y establecer las
propiedades de los componentes de ImageSprite
3. Controlar el juego con el componente Reloj
4. Uso de Sprite Z-layering para garantizar que un ImageSprite aparezca frente a
otro
Empezando
Abra [Link] y comience un nuevo proyecto. Establezca la propiedad
Título de la pantalla en un nombre apropiado, como "Mole Mash". Descargue los
archivos de imagen a continuación (creados por Yun Miao) a su computadora
haciendo clic derecho sobre ellos y luego agréguelos a su proyecto presionando el
botón "Cargar archivo..." en el panel de Medios.
Agujero: Topo:
Configurar los componentes
La interfaz de usuario contendrá un total de 6 ImageSprites: 5 agujeros inmóviles y 1
topo. El topo se moverá sobre los agujeros. Utilice el Diseñador para crear la interfaz
de usuario. Cuando haya terminado, debería verse algo como la imagen de abajo. No
te preocupes por alinear los agujeros de manera uniforme. Especificará sus
ubicaciones a través de sus propiedades X e Y. Las instrucciones adicionales están
debajo de la imagen.
La siguiente es la lista de componentes que agregará:
Tipo de Grupo de como lo Propósito del componente
componente paletas llamarás
Lienzo Dibujo y JuegoCanvas el campo de juego
Animación
ImageSprite Dibujo y Hoyo1 ... Agujeros por los que puede salir el
(5) Animación Hoyo5 lunar.
ImagenSprit Dibujo y Lunar El topo
e Animación
ArregloHoriz Disposición PartituraArre Para mostrar la puntuación
ontal glo
Etiqueta Interfaz de ScoreTextLab Para mantener "Puntuación:"
usuario el
Etiqueta Interfaz de PuntuaciónVa Para mantener la puntuación (# de
usuario lorEtiqueta veces que se golpeó el topo)
Reloj Interfaz de reloj topo Para controlar el movimiento del
usuario topo.
Sonido Medios de Zumbador Para vibrar cuando se toca el lunar
comunicación
Realice los siguientes cambios en las propiedades de los componentes:
Componen Acción
te
lienzo1 Establezca BackgroundColor en Verde. Establezca Ancho en 320
píxeles. Establezca Altura en 320 píxeles.
Agujero1 Establezca X en 20 e Y en 60 (arriba a la izquierda).
Agujero2 Establezca X en 130 e Y en 60 (centro superior).
Agujero3 Establezca X en 240 e Y en 60 (arriba a la derecha)
Agujero4 Establezca X en 75 e Y en 140 (abajo a la izquierda).
Agujero5 Establezca X en 185 e Y en 140 (abajo a la derecha).
Lunar Establezca la imagen en "[Link]". Establezca Z en 2 para que el
topo aparezca frente a los otros ImageSprites , que tienen el valor Z
predeterminado de 1.
ScoreTextL Establezca Texto en "Puntuación:".
abel
Puntuació Establezca Texto en "0".
nTextoValo
r
No se preocupe ahora por configurar la propiedad Picture para los agujeros;
estableceremos la propiedad en el Editor de bloques.
Agregar comportamientos a los componentes
Aquí hay una descripción general de lo que necesitamos para crear bloques:
1. Crear variable global:
○ agujeros : una lista de ImageSprites de agujeros
2. Cuando se inicia la aplicación:
○ Rellene la lista de agujeros.
○ Establezca la propiedad Picture de cada agujero en "[Link]".
○ Mueva el topo al azar a un agujero.
3. Cree un procedimiento MoveMole para:
○ Establezca la variable local currentHole en un agujero aleatorio de la
lista de agujeros .
○ Mueva el topo a la ubicación de currentHole .
4. Cuando [Link] se activa:
○ Llama a MoveMole para mover el topo al azar.
5. Implemente un controlador que haga lo siguiente cuando se toca el topo:
○ Añade uno a la puntuación.
○ Haz que el teléfono vibre brevemente.
○ Llame a MoveMole .
Para continuar, cambie al Editor de bloques.
Creación de variables
Cree la variable y asígnele el nombre agujeros . Por ahora, le daremos un valor inicial
"ficticio" de una lista vacía. Estableceremos el valor inicial real en el controlador de
eventos [Link] , que se ejecuta cada vez que la aplicación carga la
pantalla. Aquí hay una imagen y una lista de los bloques que necesitará:
tipo de bloque Cajón Objetivo
inicializar agujeros Variabl Mantenga una lista de ImageSprites de
globales para es agujero.
crear lista vacia Liza Cree una lista vacía, que se completará cuando
se inicie el programa.
Los comentarios (creados al hacer clic derecho en un bloque) son recomendados
pero no obligatorios.
Iniciar la aplicación
El primer evento que ocurre en cualquier aplicación es [Link] , por lo que
colocaremos el código de inicio en ese controlador. Específicamente, agregaremos
los componentes del agujero a la lista de agujeros , estableceremos la propiedad
Imagen de cada agujero en "[Link]" y llamaremos a MoveMole . Como aún no
hemos escrito MoveMole, crearemos un procedimiento vacío con ese nombre, que
completaremos más adelante.
A continuación se muestra una tabla de los bloques que necesita crear. Tenga en
cuenta que el cajón "Cualquier ImageSprite" se encuentra en la pestaña "Cualquier
componente" en la parte inferior de la lista de Bloques en el Editor de Bloques.
tipo de bloque Cajón Objetivo
Pantalla 1. Inicializar Pantalla1 Especifique lo que debe suceder
cuando se inicia la aplicación.
añadir elementos a la lista Liza Suma los siguientes valores a...
obtener agujeros globales Variables ...la lista de agujeros
Agujero1 Agujero1 -el agujero superior izquierdo
Agujero2 Agujero2 -el agujero central superior
Agujero3 Agujero3 -el agujero superior derecho
Agujero4 Agujero4 -el agujero inferior izquierdo
Agujero5 Agujero5 -el agujero inferior derecho
para cada hoyo en la lista Control Iterar a través de la lista de agujeros .
establezca Cualquier Establezca la propiedad Picture de...
[Link] del ImagenSprit
componente ... en e
obtener un agujero global Variables ... el agujero actual ImageSprite
" " ([Link]) Texto ...a la imagen del agujero vacío.
al procedimiento Procedimie Cree un procedimiento, que se
(MoveMole) ntos completará más adelante, para mover
el topo.
llamar a MoveMole Procedimie Llame a MoveMole para hacer la
ntos primera colocación del lunar.
Compare for cada bloque con los bloques equivalentes que serían necesarios sin él:
El conjunto de bloques de la izquierda no solo es más corto, sino que es menos
repetitivo, lo que evita al programador tener que copiar y pegar casi sin sentido y
facilita la modificación, por ejemplo, si se cambia el nombre de la imagen.
moviendo el topo
Ahora completemos el cuerpo del procedimiento MoveMole , al que llamaremos
cuando se inicie el programa, cuando se toque el topo y cuando nuestro
temporizador se apague cada segundo. El procedimiento debe elegir un agujero al
azar y mover el topo encima de él. Aquí están los bloques compilados y una tabla de
los bloques utilizados:
tipo de bloque Cajón Objetivo
initialize local currentHole to Variables Almacene el valor del hoyo
(hay dos tipos de 'initialize local': actual para usarlo en el
tome el que se ajuste al bloque de procedimiento.
procedimiento)
elige un elemento al azar Liza seleccionar aleatoriamente
un hoyo de la lista
obtener agujeros globales Variables lista de ImageSprites de
agujeros
llamar a [Link] Lunar Mueve el topo al...
ImageSprite.X del componente Cualquier ..x-coordenada de...
ImagenSpri
te
obtener el agujero actual local Variables ...el hoyo elegido...
ImageSprite.Y del componente Cualquier ...y la coordenada y.
ImagenSpri
te
Ahora necesitamos especificar que se debe llamar a MoveMole cada vez que suene
el temporizador de MoleClock. Solo necesitamos dos bloques para lograr eso:
tipo de bloque Cajón Objetivo
cuando reloj topo Cuando el temporizador se
[Link] apaga...
llamar a MoveMole Procedimiento ... mover el topo.
s
Registro de toques
Finalmente, necesitamos especificar qué sucede cuando se toca el lunar.
Específicamente, queremos:
1. Incrementa la puntuación.
2. Haz que el teléfono vibre brevemente.
3. Mueve el topo.
Podemos traducirlos fácilmente a bloques:
tipo de bloque Cajón Objetivo
cuando [Link] Lunar Cuando se toca el lunar...
establecer PuntuaciónValorEti ...actualizar la puntuación
[Link] en queta visible a...
+ Matemáticas ...el resultado de sumar...
1 Matemáticas ...1 [y]...
[Link] PuntuaciónValorEti ...la puntuación anterior.
queta
llamar Zumbador. Vibrar Zumbador Haz que el teléfono vibre
para...
100 Matemáticas ...100 milisegundos.
llamar a MoveMole Procedimientos Mueva el topo a una nueva
ubicación.
Programa final
variaciones
Aquí hay algunas variaciones que podrías querer implementar:
● Agregar un botón Restablecer para restablecer la puntuación a 0.
● Hacer que la puntuación dependa no solo del número de aciertos, sino
también del número de errores y lunares escapados.
● Aumentar la velocidad del juego de movimiento de topos si el jugador lo está
haciendo bien y disminuirla si el jugador lo está haciendo mal.
● Agregar un segundo lunar en un temporizador diferente.