Videojuego "Pong"

Pong es un juego sencillo, que consiste en una paleta (que es

controlada por el usuario) y una pelota. La pelota rebota en la paleta y
tres paredes. Si la bola toca la pala, suben la puntuacin del usuario, y
si la bola pasa por el lateral de la paleta, el juego ha terminado.


Primera parte. DISEO: App Inventor Designer
1.- Abre el AppInventor 2.
2.- Descargar y guardar una imagen de una paleta (paddle.gif):

3.- En la columna izquierda del Designer, abre la paleta Basic y
arrastra primero un componenteLabel a la pantalla
(1). En el panel Components, selecciona el componente Label1 y
cambia su nombre a "ScoreLabel"
(2). En el panel Propierties (lado derecho), elimina el texto de la
pantalla del componente Label1 para reemplazar por "Score"
(3) y cambia su tamao a 18, su anchura a 150 pxeles y la altura a 30
pxeles.


4.- Desde la paleta Basic, arrastra dos botones a la pantalla debajo
de la etiqueta. Cambia el nombre del primer botn a "StartButton" y
cambia su campo de texto a "Start". Cambia el nombre del segundo
botn a "ResetButton" y cambia su campo de texto a "Reset".
5.- De la paleta Screen Arrangament, arrastra un
componente HorizontalArrangament a la pantalla. Arrastra
el ScoreLabel al HorizontalArrangement primero, y a continuacin,
arrastra los dos botones junto al componente ScoreLabel.


5.- Desde la paleta Basic, arrastra un componente Canvas y establece
el ancho a 300 pxeles y la altura a 390 pxeles en el panel
de Propiedades. Puedes cambiar el color de fondo del Canvas a
cualquier color que te guste o incluso poner una imagen de fondo.
6.- En La paleta de Drawing and Animation, arrastra un Ball y un
componente imageSprite al Canvas en la pantalla
(1). Selecciona el componente imageSprite
(2) y cambia su imagen a la paleta paddle.gif
(3).


7.- Selecciona Ball1 en el panel Components y en
las Propiedades establece , el intervalo (Interval) a50, el
radio (Radius) a 20, y la velocidad (Speed) a 5. Puedes cambiar el
color de la bola (PaintColor)a cualquier color que te guste.

Segunda parte. CONSTRUIR: Editor de bloques

En la esquina superior derecha del Designer, haz clic en el botn
de Blocks. Espera unos momentos mientras los bloques se cargan en el
editor.
Para el juego Pong, hay tres hechos que debemos conocer :
Cuando la bola alcanza una arista. Este
evento tiene una propiedad, borde
(edge), cuyo valor es el lmite que se
alcanz. Si Edge = 1, significa que la
pelota alcanza elborde inferior.

App Inventor asigna valores numricos a
los bordes de un Canvas de la siguiente
manera:
arriba = 1, derecha = 3, abajo = -1,
izquierda = -3. Tambin asigna valores de
direccin a los objetos animados, se
determinan por en un crculo completo,
como una brjula, con valores entre 0 y
360 grados, se dice que un objeto que se
mueve hacia la parte superior de la
pantalla al tener un rumbo o ngulo de 90

grados.
Cuando la bola choca con la pala (o
cualquier otra bola). Este evento tiene
una propiedad, otros (other),cuyo valor es
la pelota o otros sprites (paleta) con la
que choc . Para esta aplicacin, no nos
preocuparemos por el valor de esta
propiedad. Siempre ser la paleta.

Cuando se arrastra el ImageSprite. Este
evento tiene seis propiedades. Las ms
importantes para nuestra aplicacin
son CurrentX y CurrentY. stas
representan la ubicacin de la paleta
cuando el usuario deja de arrastrarla.


y dos procedimientos para las bolas y los sprites que haremos servir:
Rebotar la bola. Este procedimiento tiene un
conector de entrada, edge, que es el borde con el
que se desa que la pelota rebote. Teniendo en
cuenta el rumbo actual de la bola, rebotar
automticamente con un ngulo fijo establecido por
el (360 - ngulo).

Mover la bola/Sprite a (x, y) dentro del
Canvas. Bolas y sprites se pueden mover a
cualquier punto en elCanvas. Los conectores X
e Y representan el punto (x, y) donde queremos
que se mueva.


1.- Desde la paleta Screen1, abre la paleta Ball1 y arrastra
el bloque when Ball1.EdgeReached sobre el rea de trabajo, as como
el bloque llamada call Ball1.Bounce . Una vez hecho esto, inserta elget
edge en el conector del bloque call Ball1.Bounce edge que est
pidiendo un valor lmite del rebote, es una funcin integrada dentor
de los sprites.

2.- Para controlar el arrastre del usuario de la paleta se utiliza el
bloque when ImageSprite1.Dragged. Debido a que la pala slo puede
moverse horizontalmente, no verticalmente, su coordenada
Y siempre va a ser la misma. Sin embargo, su coordenada X ir
cambiado al valor que tiene por su ubicacin. Por lo tanto, utilizamos
solo un bloque para obtenerCurrentX en la paleta de coordenadas.

3.- Por ltimo, tenemos que controlar las colisiones entre la pelota y
la paleta. Lo que sucede es que la pelota rebota en la paleta de
partida en la direccin inversa. Aqu es donde se utiliza la expresin
(360 ngulo) para invertir la direccin de la pelota:

Prueba el funcionamiento de la aplicacin.
Ahora aadiremos ms jugabilidad:
1.- Para iniciar el juego, para comenzar a moverse, la velocidad de la
bola, la partida, la posicin y propiedades de intervalo se
deben establecer y deben estar habilitadas. Ten en cuenta cmo la
propiedad del ngulo del movimiento se establece en un
valor aleatorio entre 225 y 315, esto har que la pelota se mueva
hacia abajo, recordemos que un ngulo de 90 es hacia arriba y 0 es
hacia el borde derecho. Las propiedades de velocidad y el
intervalo controlan la velocidad con la que la bola se mueve. En este
caso se mueve 5 pxeles cada 10 milisegundos (cambiaremos en
el Designer las condiciones iniciales de intervalo y radio de la bola a
10 milisegundos y 10 pixels). Finalmente posicionamos la bola en
la parte superior central del Canvas:

El botn de reinicio, simplemente vuelve a colocar la bola en la parte
superior central del Canvas

Comprueba el funcionamiento de los botones.
Ahora aadiremos la posibilidad de registrar la puntuacin y la
de perder la partida. Si no golpeamos con la paleta a la bola, tocar
el borde inferior, habremos perdido la partida. Dentro del
bloque when Ball1.EdgeReached debemos aadir algunos nuevos
bloques para este evento, si toca el borde inferior se comportar de
una manera y si toca los laterales o superior de otra:

De la paleta de Matemticas, arrastra un bloque (=) igual y colcalo
en el conector de "if". Arrastra el get edge a la primera rea en
blanco. En la segunda rea en blanco "-1" (por el borde inferior). Esto
comprobar si el borde al que se lleg es el borde inferior del Canvas.
Si es el inferior, establecer la condicin de "false" en
su habilitacin para la bola y establecer en la etiqueta de puntuacin
un GAME OVER !!. Si no es el inferior, llamar a mover la bola:

Comprueba si puedes perder la partida.
Ahora registraremos la puntuacin. Definiremos una variable "
Score" y la iniciaremos a 0.

Cada vez que golpeemos con la paleta debemos sumar un punto a la
variable de la puntuacin:

Y hacer que la presente la etiqueta de la puntuacin:

Crearemos un procedimiento para actualizar el valor de la puntuacin,
cada vez que sumemos un punto, cada vez que perdamos la partida,
cada vez que empecemos de nuevo y cada vez que reiniciemos. Primero
generamos el procedimiento, con una variable, con un bloque
de Procedures:

Cambia "x" a "scorevalue". Esto crea una variable para el
procedimiento que se denomina "scorevalue". Este parmetro es
una variable temporal que contiene un valor para el procedimiento. Se
especifica el valor cuando se llama al procedimiento. Desde la paleta
de Variables arrastra un bloque set que haga que la variable "score
global" adopte el valor que entrega el procedimiento "updateScore".
De la paleta ScoreLabel, arrastra un set
ScoreLabel.Text to, colocaremos un bloque que cambie el valor inicial
de "Score: " por el del valor que toma en cada momento ms la
palabra "Score" , con el bloque "join":

Aadiremos la llamada al procedimiento en el bloque del botn de
inicio StatButton y lo iniciaremos
en "0".

Tambin haremos una llamada al procedimiento cada vez que la
bola colisione con la paleta, y sumaremos un punto a la puntuacin:

Iniciaremos a "0" el marcador cuando activemos el botn de
reinicio "ResetButton":


Comprueba el funcionamiento de la aplicacin.
Tercera parte: AMPLIACIN. Aadir sonido, efectos y ms
posibilidades
Tendrs que mejorar esta aplicacin, debes aadir algunas
posibilidades:
1.- Aadir efectos de sonidos.
Si subes sonidos al servidor, aadiendo un componente de sonido
Sound en el Designer, puedes hacer que se reproduzcan sonidos
cuando se producen eventos como, golpear la bloa, rebote de la bola o
perder la partida. Debers aadir estos bloques:

2.- Cuando se llegue a una puntuacin determinada puedes cambiar la
velocidad de la bola, el tamao de la bola o de la paleta.
3.- Dar al jugador tres vidas para que puedan obtener tres intentos
antes de "Game Over". Si se programan mltiples vidas, disminuir el
marcador en 10 cada vez que el jugador pierde una vida.
4.- Investiga lo que sucede si se cambia el rango de nmeros
aleatorios para el comienzo de partida cuando se hace clic en el botn
de inicio.
5.- Puedes aadir cualquier otro evento que puedes disear t mismo.