domingo, 3 de marzo de 2019

Nuestro primer Juego: PONG



En esta entrada comenzaremos con nuestra primera aplicación. Un juego basico del famoso Pong.

Para comenzar, crearemos un nuevo proyecto




Al crear nuestro nuevo proyecto, se mostrara la ventana en blanco.


Para comenzar, deberemos arrastrar los elementos de la Paleta hacia la Screen1.

Nuestra primera aplicación será un juego tipo pong muy simple. Consiste en una pelota que rebota en los bordes, debemos capturar la pelota con una caja, y conseguir capturar diez pelotas para ganar, para lo cual utilizaremos un contador. 

La dificultad de nuestro juego es que por cada pelota capturada la velocidad de esta aumentará. 


  • En la columna Paleta, haremos click en Dibujo y animación, y luego arrastraremos Lienzo hacia la screen1.


  • En propiedades del Lienzo cambiar el Alto y Ancho por Ajustar al contenedor. 



  • En Paleta, agregue Pelota arrastrándola hacia el lienzo


  • Cambie el Color de la Pelota, el Radio de la Pelota e ingrese 5.0 para la velocidad.


Ahora comenzaremos a lo que es la programación de nuestro juego, por lo que nos iremos a la ventana de bloque.

Al seleccionar la Pelota, se mostrarán todos los bloques de sentencias predeterminadas, que modifican las propiedades de la Pelota y su comportamiento.




Lo que necesitamos es lo siguiente: 
  • Rebotar al tocar el borde.
  • Rebotar en una dirección determinada, seleccionaremos la acción Llamar Pelota y Apuntar En la dirección x, y.
  • También queremos que la Pelota rebote en cualquier dirección, por lo tanto  la haremos apuntar a una dirección aleatoria para una coordenada (x,y). 
Lo dejaremos para los valores preestablecidos 1 a 100, 




A continuación, agregaremos la Caja, con la que atraparemos la Pelota, para esto tendremos que buscar una imagen en internet.

  • En modo de Diseño seleccionamos SpriteImagen desde la Paleta y la arrastramos a nuestro Lienzo en Screen1.
  • Selecciona SpriteImagen en el área de componentes y luego el botón Subir archivo en el área Medios 


  • Selecciona un archivo desde tu computador  y súbelo.


  • En Propiedades de SpriteImagen (Caja) selecciona Foto y selecciona un archivo. 


Ahora programaremos la siguiente situación: cuando arrastremos la Caja lo moveremos a otra posición.


  • Primero nos cambiaremos al modo Bloques, y seleccionaremos Caja y el bloque cuando Caja Arrastrado ejecutar.
  • Luego seleccionamos llamar Caja Mover A x, y.
  • Si arrastramos en Caja a una nueva posición los valores de las propiedades de x e y deben tomar los nuevos valores, para esto colca el cursor sobre XActual
  • Selecciona tomar XActual y encaje el bloque para x. 
  • Para el bloque y, tomaremos YInicial.


*TE RECOMIENDO IR GUARDANDO PERIODICAMENTE TU AVANCE PARA EVITAR PERDIDAS

* ADEMÁS, RECUERDA QUE SI QUIERES VISUALIZAR TU AVANCE, PUEDES HACERLO PERIODICAMENTE COMO PRACTICAMOS EN LA ENTRADA ANTERIOR.

Ahora puedes arrastrar la imagen en tu celular a la posición deseada.

Agregaremos un nuevo evento que consiste en lo siguiente:

  • Cada vez que colisione la Pelota con la Caja, la Pelota debe rebotar apuntando a una nueva dirección.
  • Contar la cantidad de veces que colisiona con la Caja.

  • Entonces agregaremos el bloque de colisión de la Caja, a esto le agregaremos un contador de colisiones, para esto necesitamos un campo de texto, el cual nos irá mostrando la cantidad de colisiones que se van generando.
Activa el modo de Diseño y agregaremos un Campo de Texto desde Paleta / Interfaz de usuario.

Ajustaremos el ancho y el alto del Lienzo, por los valores 80%.

Seleccionamos Paleta /Interfaz de usuario y arrastramos debajo del Lienzo el Campo de Texto.

Ahora, necesitamos una variable global llamada contador inicializada en 0, que sea reconocida por todas las componentes.

  • Nos vamos al modo Bloque y seleccionamos Variables y arrastramos Inicializar Global Nombre como. En el visor le haremos doble clic y le pondremos por nombre "Contador".
  • Le asignaremos valor con un bloque matemático, en este caso será 0.


El evento de colisión es el siguiente: 
  • Cada vez que colisiona la Caja con la Pelota debemos incrementar el Contador y escribir su valor en el Campo de Texto.
*Para incrementar en 1 el valor del contador, necesitamos poner el contador al valor de la suma del valor actual del contador más 1.


  • Para sumar seleccionamos el bloque + de Matemática y lo completamos con: Tomar el valor de la variable global de contador más el valor 1 de un bloque de Matemática más Uno.

*Como queremos actualizar el campo de Texto debemos poner en el Campo de Texto un Texto con el valor de la variable global contador.


  • Seleccionamos en el área de Bloque el Campo de Texto y seleccionamos el bloque poner Campo de Texto el Texto


Finalmente le agregaremos una pequeña dificultad al juego. Cada vez que se realice la colisión con la Caja le aumentaremos la Velocidad a la Pelota en un 20%.


  • Seleccionamos el bloque poner Pelota a Velocidad como y le agregamos el bloque de multiplicación de la Pelota.

Agregaremos este nuevo bloque al evento colisión.




Finalmente tenemos nuestro primer juego, podemos añadirles  más dificultades, pero eso ya depende de los gustos de cada uno.

No hay comentarios:

Publicar un comentario

Quinta Aplicación: Fracciones

En esta oportunidad, crearemos una aplicación basada en el Método Singapur. Una de las bases del Método Singapur se asienta en una secuenci...