Juego con App Inventor 2.

Hola y bienvenidos una vez más a inventordeaplicaciones.es. En este nuevo articulo veremos como podemos crear juego con App Inventor 2. Nuestra herramienta favorita dispone de una serie de opciones para interactuar y mover por pantalla sprites. Aunque muy básicas con un poco de trabajo podremos crear juegos bastante entretenidos. Si te estas preguntando porque ahora un articulo sobre como crear videojuegos, tengo que decirte que es la mejor manera de aprender técnicas de programación de una manera lúdica y divertida.

Diseño de la aplicación para juego con App Inventor 2

Para el diseño de nuestra aplicación se ha utilizado un lienzo, quince sprites, uno para la nave protagonista, cuatro para los disparos de nuestra nave, nueve para los meteoros que utilizaremos como enemigos y no para la explosión. Este último le desmarcamos la casilla de visible. También hemos añadido una serie de componentes no visibles que ayudarán a programar el comportamiento de nuestro juego.

Tenemos un sensor de orientación, con el que moveremos a nuestro protagonista de un lado a otro de la pantalla, girando nuestro dispositivo. Un componente reloj al que hemos llamado BuclePrincipal y será el encargado de mover todos y cada unos de nuestros sprites en pantalla a cada ciclo de reloj. Otro componente no visible reloj, este último se encargará de animar las explosión al colisionar nuestro disparo con los meteoros. Y por último dos componentes no visibles de sonido, uno lo utilizaremos para el sonido de nuestro disparo y otro para el sonido de la explosión.

PGdR6NR1NlgAh0Ia61cJRH60dwcXDqyWHUFjUUGvnvbyd6hzR u2iPPhsNrgsPJPQvgjbW06cjXARNsJfPVa3PRD4v d 62OJJOJT0Bd2M  AoOTI 6qMAB7XYbe JBc2EHQQX26 - Juego con App Inventor 2.YdoP5q9Pb7HhqqYf4LFfTTaKAj4StmxdQJPDthPXEMHd KRFnZs6k0O78 0 Gat37dHCkQ8JFjYK Pw1S18MKjA3O 8XV fwGhvdRA1lVxjM BZZC7nLHgOOzooIHjk0bLMRbVhX - Juego con App Inventor 2.

Descarga el proyecto en formato AIA.

Ajustar el lienzo para juego con App Inventor 2.

Antes de comenzar a crear nuestro juego con App inventor 2 vamos hacer unos pequeños ajustes en nuestro lienzo. Para que los meteoros o explosiones puedan superar los límites de la pantalla de nuestro dispositivo. Debemos de crear nuestro lienzo más ancho y alto que la pantalla de nuestro dispositivo. Para ellos debemos de ajustar las siguientes propiedades de nuestra pantalla y lienzo.

En la propiedad DispHorizontal y DispVertical de nuestra Screen1 debemos de poner la opción del desplegable en centro. Con esto conseguiremos que nuestro lienzo se expanda más allá de los límites de la pantalla desde el centro de la misma y no desde la esquina superior izquierda.

En la propiedad de Alto y Ancho de nuestro lienzo la cambiaremos por Ajustar al contenedor del la opción del desplegable. Esto ajusta los límites de nuestro lienzo al ancho y alto de la pantalla. Más adelante programáticamente superaremos esos límites.

Programando el movimiento de la nave de nuestro Juego con App Inventor 2

Antes de comenzar a programar los movimientos de nuestra nave vamos a hacer unos pequeños ajustes en el lienzo. Recuerda que este tiene que poder superar los límites de la pantalla de nuestro juego con app inventor 2. Para ello vamos a crear un procedimiento al que llamaremos ConfiguraciónFondo, donde le diremos que tiene que ser 100 puntos más ancho y alto que la pantalla. Por último lo llamaremos al abrir la Screen1.

oZiWviNe4NpeKihYIvdjyhRRibGmMMj0CHaZ955wqXgEG  NULvKGwzy3UUgqAgaQDjyqQbeVvIesIQxXyoi7LH 7I 6XLzHnSqvHF4xFQmLeiswf rwjp1Oo9iC288ELtZaxqKL - Juego con App Inventor 2.

Una vez que hemos configurado correctamente el ancho y el alto de nuestro lienzo con la pantalla de nuestro dispositivo vamos a mostrar en pantalla nuestra nave. Necesitamos que el centro de nuestra nave se muestre en el centro de la pantalla. Para consegir esto tendremos que hacer un pequeño calculo matematico. Dividiremos el ancho del lienzo entre dos para sacar su centro y le restamos el ancho del gráfico de la nave dividido entre 2. Con esto conseguiremos que el centro del gráfico se muestra en el centro de la pantalla. Para la altura bastará con restar al alto de la pantalla el alto de la nave dividido entre dos. Con esto último no solo se mostrará el gráfico en el centro de la lienzo sino también en la parte inferior del lienzo de nuestro Juegos con App Inventor 2.

XEkeR0iWwXmZHRQNmAOQ8VM1OWXWIuRehObrSf NOsis 1G4OQFUER nZjVVQy7z5e1p KtUC61e2DeQgqmHGndjx5 GTX1fLoiobJEKmXcZHdz2t6tSK8Z6cop6VmCUIyLBbf a - Juego con App Inventor 2.

Bien ahora necesitamos que nuestra nave pueda moverse a los lados de la pantalla para poder esquivar a los destructivos meteoritos. Vamos ayudarnos de nuestro componente no visible sensor de orientación. Lo que conseguiremos con esto es que cuando nuestro teléfono se incline en uno de sus lados nuestra nave se deslice hacia el lado más inclinado. Si el valor de inclinación es mayor de cero el gráfico se inclinara a la derecha. Por el contrario es menor de cero el gráfico se inclinara a la izquierda.

C7Z4uqUzg8G2spkbZmfROXsEhXzhr2d0DqfOOAa6iPMoHwAiaOMQ637xj8aoFEx8xIEE4WLNlvbkLI1g0D uOefzX3dF8yekCoecJFyDf0hw9nHx1c5YPP2rxArW4EenGvTZ2JRs - Juego con App Inventor 2.

Programando el disparo

En nuestro juego con App inventor 2 nuestra nave ya puede esquivar los destructivos meteoritos. Pero eso no bastara, tendremos que poder disparar potentes cañones de plasma que destruirán cada unos de esos meteoros. Para ello cuando pulsemos la pantalla de nuestro dispositivo llamaremos a uno de los cuatro gráficos del disparo nos valdremos de una variable para ir llamando uno a uno a cada uno de los disparos esta variable la llamaremos NumeroDisparos y estará inicializada a 1. Seguido crearemos otra variable global que contendrá una lista con todos los gráficos de los disparos. A esta lista le daremos el nombre de NombreDisparos .

VFLB2tED Aar91vkQRyBZAjbbYfdUeka2 uKpjfZRhZcyLMWYqSLfk1aYnyz7h67qGZLWEbcad6NR0iN1VcyVcQaATm 61zMKPQroeq0bifBCa9FVW5YfuOz5SsW2HdZ 8oMU R  - Juego con App Inventor 2.

Cada uno de los cuatro sprites tiene que tener la opción de visible desactivada en las propiedades de su componente en la pantalla de diseño. Si no fuera así se mostrarán al iniciar nuestro juego. Vamos a crear un procedimiento al que llamaremos cada vez que pulsemos la pantalla. Le daremos e l nombre de LlamadaDisparo. Se encargará de asignar al componente sprite una serie de opciones para inicializarlo antes de mostrarlo en pantalla. Como la imagen que mostrará, la X e Y en la que se aparecerá, decirle que queda habilitado y que sea visible.

bNazKoHg6kLBVRk915WmDaxVtNhYx2Z ODfv7v0YpGLAf1k5BpU3IaXsNF717KlQB TAwi TzWQ7M2PltBHPMrmSA0fpJaCmwUUEIVa0EwbNE6gmYBX kowUJ 6N sr QzWlD6uq - Juego con App Inventor 2.

Fijate que no utilizas un componente Sprite en concreto sino que estamos utilizando bloques genericos. Donde el componente esta controlado por la variable Ngrafico. Si observas podrás ver que la X esta situado en el centro del gráfico de la nave y su Y 15 puntos por encima.

Una vez que levantemos el dedo de la pantalla comprobaremos que nuestra nave sigue habilitada. Si esto es cierto reproduciremos el sonido del láser y llamaremos al procedimiento LlamadaDisparo. Asignaremos a su variable NGrafico el elemento de la lista NombresDisparos que su índice quedará asignado por la variable NumeroDisparo. Recuerda que esta variable estaba iniciada a 1 pero nosotros queremos que se incremente en uno cada vez que levantemos el dedo de la pantalla y que cuando llegue al máximo de cuatro vuelva a valer uno. De esta manera dará la sensación de tener disparos infinitos.

X8H6eA3tAeQ9CWtSbLy50wP6d6qXISHtX YIPmLv8hypWAhDyKBALqDKgx35i3h1mwQtKLyjOSm4JBalzKsk2w970rMggILRgTreUDnCjvBDUfTe Nn4J HSTWEoSOxCWF2aMTea - Juego con App Inventor 2.

Todo esto por sí solo no hará nada, necesitamos que el disparo avance por la pantalla. Para ello nos ayudamos de nuestro componente reloj BuclePrincipal. Cambiaremos sus propiedades y dejaremos activadas las casillas de TemporizadorSiempreSeDispara y TemporizadorHabilitado para la opción IntervaloDelTemporizador lo dejaremos en 10.

zp vMrYmT2gQKUibzzLEH2MieGhLoSmqP7tztEw37OEzGMUddVxWBc4S6S 3FSViYF31757R6PQ C0Nb7EF3gjjlihosNBE6VeQZJdF5GUSMd11dDvwyzqR2L8vkiBwEjiKJoTma - Juego con App Inventor 2.

Cada vez que nuestro reloj llegue a 10 milésimas incrementaremos la Y de cada uno de los disparos ayudándonos de un bucle for. Cuando la Y de cada uno de ellos esté por encima del borde superior de la pantalla entonces lo deshabilitamos y dejará de ser visible.

2 wTnK2LqC7zr8lRdD85CEHIxSJfCRJIIRNjZIqPm1TY6LVn6Y92oOSmoZ j6BbWwzJaKk7FJkY6ZeM 50pO0hQ to32FKYoXEyFnhoHm pqAjTIyBYu5c3ZvpFgNg41n9RID4A7 - Juego con App Inventor 2.

Programando al enemigo

Lo primero que tendremos que programar será un procedimiento que se encargará de posicionar nuestros meteoros al inicio de la partida. Necesitaremos una lista como la de los disparos pero en esta no solo pondremos cada uno de los gráficos sino que también asignaremos a cada índice un número aleatorio entre 1 y 4 para variar la velocidad de caída para cada meteorito.

44ggMjH5hl9nk1J056C2AoNoW0e3bNhYCiTm7Jl29jvAE7kk2KNVaWvCSMbSmZatE1HmC0FfW4Ukd4g6OAPTnT9peOYp7MxXZc4cKvSfxypsZv p9rq0lwBDKWpGgqleXKzLs53y - Juego con App Inventor 2.

Dentro de nuestro procedimiento nos ayudaremos de un bucle for. Este posiciona la X y la Y en la parte superior de la pantalla y dará un tamaño aleatorio gracias a la variable TamañoMeteoro que se inicializará con un valor aleatorio entre 1 y 100.

hLnoMUBT50LeQJE8kMg v 8b6MiDnzV5v4rr gygnXFtNruGtROXKPEHc8AyBUpFvqSJhhx9AWm8wVoddvgcRj m5 o6BarT7ECF8SYNqwGHvz2iIH9fDQHGgZSvCuaOzQrvYfFa - Juego con App Inventor 2.

ZEBFWCaTai8L4sdR 3j nxwy6Eo2wDsDMpLk4tFsxm2lNSnGUdtUxhOtopk3fzuLSxF4sMq5CnMa3tOc5OaHGoBwS19KUcbOL GwwHTieFhenCLWnZpBda18oPj3Tkkw Q 3f6uX - Juego con App Inventor 2.

Este procedimiento lo colocaremos en el bloque al iniciar la pantalla. Al igual que ocurría con el procedimiento del disparo solo servirá para inicializar cada gráfico en una posición de la pantalla y un tamaño, pero por si solo no hará nada más. Lo que necesitamos es introducir código dentro de nuestro temporizador que hará que nuestros meteoros rote sobre sí mismos y bajen por la pantalla. Nos ayudaremos de un bucle for para recorrer cada uno de los nueve gráficos. Haremos que cada gráfico rote sobre sí mismo. Que bajen por pantalla incrementando la Y. Cuando lleguen al final de la pantalla, estos vuelvan a arriba del todo asignándole un número aleatorio en su posición X.

4ZYFFGpHrwG7LDyR zWEKt1clUEww66lATymw hRUJpUkySiae60p0YnaqXgFCrOivV3rPACJ7noyyeltZuatkLhUYnJMYtxGj50Fj5XHsBcmFY53clsWrZbWW6MlI5cHM8Xi1Qi - Juego con App Inventor 2.

Los últimos retoques

Bien si ejecutamos nuestro juego veremos que podemos manejar nuestra nave podemos disparar y ver bajar a los meteoros por pantalla. Pero ya te habrás dado cuenta de que los disparos no afectan a los enemigos y eso es precisamente lo que vamos hacer ahora. Antes de nada vamos a crear una nueva lista a la que llamaremos MeteorosColisión y que utilizaremos para guardar el nombre de cada uno de los Sprites de meteoros.

fSKDG5fqZGtxod1vMBNpXKtLauf7pwjA70ymiYletRUaGw7ZG3IRPeUgDZR4EcG4S1pDie2z520GXHUtPNjtDmE5Hm5zXGKScuwaBoIfcC3CugLDwn2po61FITV9B HwIPyTDQgT - Juego con App Inventor 2.

Vamos a crear un procedimiento que se encargará de mostrar una explosión en pantalla. En la X e Y donde se producirá el impacto de nuestro disparo con el meteoro. Este procedimiento simplemente mostrará un gráfico de un tamaño en la X e Y que pasara en sus parámetros.

viNK7t77rWXNIFXQLj9aUn6yuCUxKRZXR1uczP2cS1c1OxP6YX AoSSdXai0JvSCN2xEWUFLzCgOcKvx2vqxfYpedhD7CDHoa4IOe2j2DXHPe53SSjgOWLPeP2OhnJw0k XpneRg - Juego con App Inventor 2.

También colocaremos en nuestro temporizador que utilizamos de bucle una condición para nuestra explosión. Si el ancho es menor de 50 incrementamos en 10. Pero si este es igual o mayor de 50 lo volveremos a colocar a su posición inicial además de hacerle invisible.

RSGCTsaGlyjoJXEG8J0P QadQ7vT8Q X3ThwN  2oEArBQg6Bn87GL3u 5LZKi7m9Jlm UeRaHBcTOAmELIqnY7vozuNhvKegaWV7Ng4bjrz5AgLeHEl19onL2vGPXZ8UYz7fbTU - Juego con App Inventor 2.

Ahora por cada uno de los disparos comprobaremos que el Sprite contra el que colisionó el disparo1 está en la lista MeteorosColisión que es la lista que utilizamos para guardar el nombre de cada uno de los Sprites. Si está en la lista reproduciremos el sonido de explosión, llamaremos al proceso explosión, deshabilitamos el disparo, haremos que este no se muestre en pantalla y incrementaremos en 5 una nueva variable que utilizaremos para la puntuación, y que daremos el nombre de Puntuación.

7Fud067n373SmEH2bFUeXXdpsFxPxVf7zu79kz6EphlvMBwRDJXtyG1WwC1MQ4jP9S WvUFWsEm8e5x3rqk1MDlUPwa0VUU3AgWUAQVgX9AbAWaRT1oO dSG6vfwrfWXviFcIv13 - Juego con App Inventor 2.

Seguido limpiaremos el lienzo para volver a escribir en él la puntuación. Colocaremos la Y del meteoro contra el que a impactado el disparo en cero. Es decir lo subiremos arriba. Esto último que hacemos con el disparo1 tenemos que hacerlo con los tres disparos restantes.

kmf8i8ks2zmLzMJ52QGheYLoDUQNTZDiecbGM gz6lgxnGXRFgRi1ASU2RcwitzHtXTrpsmzCinvdjZZkuyDui y0QID7gzyRbpecZyxowXdAZnHkqQub35p2DCHSzhwQp7CPfv9 - Juego con App Inventor 2.

Por último programaremos la destrucción de nuestra nave si un meteoro consigue colisionar con ella. Para ello en el temporizador que utilizamos de bucle comprobaremos por cada meteoro si colisiona con nuestra nave. Si esto último es cierto nuestro componente nave dejará de ser visible y quedará deshabilitado. Pararemos el temporizador que usamos de bucle y pintaremos en el centro de la pantalla el texto GAME OVER.

njc8UXSqyUxz0HGyijIXpQARXuVrlsowSPb5ENVyPTKoGOhdU7WtjDdmzyE4pRZfo0yZFbdeQ frf8pwpqxu9cfIs OEaCgl5tJJ5cn4YxRewu6IA1IOQbz0b5zZjxZAT6NpK0wz - Juego con App Inventor 2.

Bueno con esto terminamos nuestro pequeño juego con App inventor 2. Sin duda es una buena manera de aprender el uso de listas, procedimientos y el manejo de componentes genéricos en app inventor. Disfrutar de vuestro juego descansando el dedo entre partida y partida. Y por supuesto si te ha gustado y quieres que hagamos mas articulos como este no dudes en dejarlo en los comentarios.

3 comentarios en «Juego con App Inventor 2.»

Deja un comentario

error: Content is protected !!