La segunda app que vamos a programar va a ser un videojuego tipo arkanoid. para eso utilizaremos los componentes de la paleta dibujo y animación.
Preparamos el diseñador subiendo los archivos que utilizaremos en nuestra app: una barra amarilla (ladrillos a destruir con la pelota), barra naranja (la que debemos manejar para que la bola no caiga), cielo estrellado (fondo del juego), sonido (explosión cada vez que la pelota destruya un ladrillo) y game over (imagen que saldrá cuando perdamos la partida).
Añadiremos a la pantalla los componentes: disposición horizontal, dentro de la cual habrá dos etiquetas de texto (1: texto "puntuación"; 2: puntos, que empezará en 0 puntos).
De la paleta dibujo y animación vamos a coger un lienzo, donde tendrá lugar el juego. La imagen de fondo será el cielo estrellado cargado previamente. El alto será 400px, ancho ajustado al contenedor.
En el lienzo pondremos los componentes de la app: 3 spriteImagen, colocados en la parte superior del lienzo, uno en la parte inferior del lienzo y una pelota. Cambiaremos el nombre a los spriteimagen, que se llamarán Ladrillo1, Ladrillo2, Ladrillo3, Nave. Cambiaremos también el nombre de las etiquetas: "Etiquetapuntuación", "puntuación". Añadiremos en cada spriteImagen las imágenes correspondientes. La barra amarilla tendrá de alto 20px, ancho 50px. Lo mismo con los otros dos ladrillos. La nave será la barra naranja, y tendrá las mismas dimensiones. Cambiaremos el color de la pelota para que se vea mejor, y un radio de 7.
Faltaría cambiar las propiedades de la pantalla: titulo (arkanoid), icono de la app el cielo estrellado.
Debería quedar una cosa parecida a esto:
Ahora que ya tenemos el diseñador preparado nos vamos a la parte de bloques, donde programaremos todos los eventos de la pantalla.
Comenzamos con lo que ocurre cuando se inicia la pantalla1, es decir, la primera vez que se ejecuta la app. Se debe empezar a mover la pelota. Dirección de la pelota hacia arriba (90º), velocidad de la pelota (30).
Codificamos la nave, que se moverá al tocarla con el dedo a derecha o izquierda. Esto es el evento arrastrar. La coordenada Y no debe variar, pero sí la X.
Lo siguiente que debemos programar es qué ocurre cuando la bola alcanza los ladrillos. Para ello tenemos el evento "colisión". Cuando el ladrillo1 entra en colisión con algo (pelota en este caso), aumentarán los puntos. Utilizamos la suma para sumar lo que ya hay en la etiqueta y le sumamos 10 puntos. De esta manera, cada vez que la pelota alcance el ladrillo, se sumarán 10 puntos en el marcador.
Ahora el ladrillo debe desaparecer, por lo que habrá que poner el ladrillo como no visible. Si además queremos que salga un sonido cada vez que se destruya el ladrillo, nos vamos al diseñador y añadiremos el componente sonido. Ahora en bloques, tras desaparecer ladrillo llamar sonido1 y reproducir.
Estos bloques tienen que repetirse para todos los ladrillos (opción duplicar) y cambiamos el nombre del ladrillo para cada uno de los tres ladrillos que tenemos. De esta manera ahorramos tiempo.
Nos quedaría ahora programar el comportamiento de la pelota. Comenzará a moverse cuando empiece la partida, y debemos tener en cuenta que debe rebotar en todas las paredes excepto en la inferior (en este caso el juego terminaría).
Utilizaremos la sentencia de control "si". El borde inferior es el -1 (si toca el -1, la pelota debe dejar de moverse; si no, la pelota debe rebotar contra el borde que haya tocado). Si queremos que aparezca game over en la pantalla, nos vamos al diseñador y añadimos otro spriteImagen al lienzo, que tendrá como imagen gameover, tamaño 200px tanto de ancho como de alto, y la centramos). Volvemos a bloques, y si la pelota toca el borde inferior, aparecerá la imagen gameover (se hace visible). Para que game over no esté visible el resto de la partida, cuando se inicializa la pantalla pondremos que "gameover" desaparecerá.
Nos faltaría ahora poner el comportamiento de la pelota cuando toca la nave. Utilizaremos "cuando nave en colisión con", ya que solo puede colisionar con la pelota. Haremos entonces que la pelota modifique su movimiento de forma aleatoria cada vez que choque con la nave, con un número aleatorio entre 30 y 150 grados. Con esto, tendríamos terminada nuestra app.
Actividad guiada 2
Preparamos el diseñador subiendo los archivos que utilizaremos en nuestra app: una barra amarilla (ladrillos a destruir con la pelota), barra naranja (la que debemos manejar para que la bola no caiga), cielo estrellado (fondo del juego), sonido (explosión cada vez que la pelota destruya un ladrillo) y game over (imagen que saldrá cuando perdamos la partida).
Añadiremos a la pantalla los componentes: disposición horizontal, dentro de la cual habrá dos etiquetas de texto (1: texto "puntuación"; 2: puntos, que empezará en 0 puntos).
De la paleta dibujo y animación vamos a coger un lienzo, donde tendrá lugar el juego. La imagen de fondo será el cielo estrellado cargado previamente. El alto será 400px, ancho ajustado al contenedor.
En el lienzo pondremos los componentes de la app: 3 spriteImagen, colocados en la parte superior del lienzo, uno en la parte inferior del lienzo y una pelota. Cambiaremos el nombre a los spriteimagen, que se llamarán Ladrillo1, Ladrillo2, Ladrillo3, Nave. Cambiaremos también el nombre de las etiquetas: "Etiquetapuntuación", "puntuación". Añadiremos en cada spriteImagen las imágenes correspondientes. La barra amarilla tendrá de alto 20px, ancho 50px. Lo mismo con los otros dos ladrillos. La nave será la barra naranja, y tendrá las mismas dimensiones. Cambiaremos el color de la pelota para que se vea mejor, y un radio de 7.
Faltaría cambiar las propiedades de la pantalla: titulo (arkanoid), icono de la app el cielo estrellado.
Debería quedar una cosa parecida a esto:
Ahora que ya tenemos el diseñador preparado nos vamos a la parte de bloques, donde programaremos todos los eventos de la pantalla.
Comenzamos con lo que ocurre cuando se inicia la pantalla1, es decir, la primera vez que se ejecuta la app. Se debe empezar a mover la pelota. Dirección de la pelota hacia arriba (90º), velocidad de la pelota (30).
Codificamos la nave, que se moverá al tocarla con el dedo a derecha o izquierda. Esto es el evento arrastrar. La coordenada Y no debe variar, pero sí la X.
Lo siguiente que debemos programar es qué ocurre cuando la bola alcanza los ladrillos. Para ello tenemos el evento "colisión". Cuando el ladrillo1 entra en colisión con algo (pelota en este caso), aumentarán los puntos. Utilizamos la suma para sumar lo que ya hay en la etiqueta y le sumamos 10 puntos. De esta manera, cada vez que la pelota alcance el ladrillo, se sumarán 10 puntos en el marcador.
Ahora el ladrillo debe desaparecer, por lo que habrá que poner el ladrillo como no visible. Si además queremos que salga un sonido cada vez que se destruya el ladrillo, nos vamos al diseñador y añadiremos el componente sonido. Ahora en bloques, tras desaparecer ladrillo llamar sonido1 y reproducir.
Estos bloques tienen que repetirse para todos los ladrillos (opción duplicar) y cambiamos el nombre del ladrillo para cada uno de los tres ladrillos que tenemos. De esta manera ahorramos tiempo.
Nos quedaría ahora programar el comportamiento de la pelota. Comenzará a moverse cuando empiece la partida, y debemos tener en cuenta que debe rebotar en todas las paredes excepto en la inferior (en este caso el juego terminaría).
Utilizaremos la sentencia de control "si". El borde inferior es el -1 (si toca el -1, la pelota debe dejar de moverse; si no, la pelota debe rebotar contra el borde que haya tocado). Si queremos que aparezca game over en la pantalla, nos vamos al diseñador y añadimos otro spriteImagen al lienzo, que tendrá como imagen gameover, tamaño 200px tanto de ancho como de alto, y la centramos). Volvemos a bloques, y si la pelota toca el borde inferior, aparecerá la imagen gameover (se hace visible). Para que game over no esté visible el resto de la partida, cuando se inicializa la pantalla pondremos que "gameover" desaparecerá.
Nos faltaría ahora poner el comportamiento de la pelota cuando toca la nave. Utilizaremos "cuando nave en colisión con", ya que solo puede colisionar con la pelota. Haremos entonces que la pelota modifique su movimiento de forma aleatoria cada vez que choque con la nave, con un número aleatorio entre 30 y 150 grados. Con esto, tendríamos terminada nuestra app.
Actividad guiada 2
Partiendo de la actividad guiada 2, modifícala de la siguiente forma:
- Añade más ladrillos para alargar el juego.
- Cuando el usuario destruye todos los ladrillos debe aparecer un mensaje indicando que ha ganado.
- Añade un botón que ponga “Comenzar” de forma que al ser pulsado por el usuario el juego comience, en vez de empezar de forma automática cuando se carga.
- Una última propuesta que te hacemos es que añadas un botón de “Comenzar de nuevo” que permita al usuario volver a jugar cuando el juego ha terminado. Para ello, debes poner los ladrillos otra vez visibles y la puntuación a cero.
Comentarios
Publicar un comentario