Mostrando entradas con la etiqueta programación. Mostrar todas las entradas
Mostrando entradas con la etiqueta programación. Mostrar todas las entradas
martes, 21 de febrero de 2023
sábado, 12 de mayo de 2018
Snap! Space Invaders 4
Efectos de destrucción del invasor
En este punto del diseño del juego en el que nuestra nave es capaz de disparar, necesitamos que el invasor visualice su destrucción del modo más realista posible y que en esa destrucción se produzca un sonido acorde con lo que sería una explosión.
El efecto visual del invasor destruyéndose lo implementaremos haciendo que éste muestre un segúndo disfraz en el que se vea desintegrándose. Podemos hacer esto modificando el disfraz inicial con cualquier programa de retoque fotográfico; nosotros hemos usado Gimp y nos quedó así:
Lo añadimos al cajón de disfraces de nuestro invasor que quedará con estos dos disfraces:
Ahora buscamos un efecto sonoro para la explosión en alguna base de datos de Internet, por ejemplo des esta misma:
https://www.freesoundeffects.com/free-sounds/explosion-10070/
y la añadimos a nuestro juego de la siguiente forma.
Una vez tenemos incorporado el disfraz y el sonido vamos con el código.
La idea es que cuando un misil alcance a nuestro invasor éste cambie durante un corto tiempo a su disfraz de destruido y luego desaparezca, todo ello acompañado del sonido. El código es el siguiente:
El resultado:
La idea es que cuando un misil alcance a nuestro invasor éste cambie durante un corto tiempo a su disfraz de destruido y luego desaparezca, todo ello acompañado del sonido. El código es el siguiente:
Sólo con este snippet nuestro juego es totalmente funcional.
El resultado:
| << Anterior | Índice |
domingo, 6 de mayo de 2018
Snap!: Space Invaders 3
¡Lanzando proyectiles!
Ahora que controlamos nuestra nave y nuestro enemigo está operativo, necesitamos dar un paso más y hacer que podamos disparar al enemigo al pulsar la barra espaciadora.
En este post vamos a programar esa función para el juego. Vamos a ello.
Como siempre, lo primero es crear el sprite. Debido a la simplicidad del proyectil lo crearemos nosotros desde el propio panel de edición de Snap! pulsando en el pincel como indica la imagen:
Nuestro proyectil será simplemente una recta amarilla que simule algo parecido a un rayo laser.
Una vez creado nuestro tercer sprite preguntémonos cuál será su funcionamiento.
Cuando el usuario pulse la tecla espaciadora deberá salir el proyectil de la nave y seguir una trayectoria recta vertical ascendente hasta desaparecer por la parte superior de la pantalla. Dejaremos para otros posts la destrucción del invasor.
El primer bloque será la ocultación del proyectil al empezar el juego ya que éste no debe ser visible si aún no se ha disparado.
Lo siguiente será la detección de la barra espaciadora pulsada para posicionar el proyectil justo donde esté la nave usando la variable nave_x como abcisa y -120 como ordenada. A continuación haremos visible el proyectil y con un solo bloque ordenaremos su desplazamiento desde la nave hasta la parte superior de la pantalla en la misma vertical:
El resultado:
| << Anterior | Índice | Siguiente >> |
sábado, 5 de mayo de 2018
Snap!: Space Invaders 2
Dando vida al enemigo
En esta segunda parte de nuestro juego de Space Invaders crearemos a nuestro enemigo. En un principio será sólo uno y lo llamaremos invasor. Usaremos esta imagen png con fondo transparente:
Al iniciarse el juego nuestro invasor aparecerá centrado en la parte alta de la pantalla y se empezará a moverse de un lado a otro de la pantalla rebotando en los bordes. Además, cada vez que llegue a un borde bajará 10 píxeles su posición.
Vamos a ello. Nuestro código comenzará detectando el mensaje "Empieza el juego", para ello usaremos el bloque cuando me llegue.
Nada más detectarse el inicio de juego deberemos asegurarnos de que el invasor tiene el disfraz normal. Esto ahora no se entiende, pero más adelante haremos que nuestro invasor tenga otros disfraces para cuando sea destruido, por lo que ahora basta con colocar el disfraz normal. Tras esto lo colocamos en centrado en lo alto de la pantalla y lo hacemos visible, ya que más adelante, cuando sea destruido lo haremos desaparecer.
Lo siguiente será apuntar en una dirección, por ejemplo hacia la derecha y echar a andar. Esto lo hacen los siguientes bloques:
Por último vamos a programar cómo hacer que al tocar un borde de la pantalla la posición del invasor baje 10 píxeles:
El resultado como puede verse hace lo que queríamos:
| << Anterior | Índice | Siguiente >> |
jueves, 3 de mayo de 2018
Snap!: Space Invaders 1
Creación de nuestra nave
Vamos a crear un juego similar al legendario "Space Invaders" de Arcade de 1978. En este primer post crearemos únicamente nuestra nave.
Al iniciarse el programa, la nave deberá aparecer centrada en la parte inferior de la pantalla y podremos desplazarla de izquierda a derecha mediante las flechas del teclado.
Vamos a ello:
Primeramente colocaremos un escenario negro o estrellado y cargaremos nuestro sprite que llamaremos nave. Usaremos esta imagen en formato png con fondo transparente.
A continuación empezaremos el código. Tras el bloque de inicio, enviaremos un mensaje a todas las partes del programa indicando que el juego ha empezado. Fijaremos la coordenada y de nuestra nave a -120 píxeles para que aparezca en la parte baja de nuestra pantalla.
Para controlar el movimiento horizontal crearemos una variable que llamaremos nave_x, y que nos servirá para saber en todo momento dónde está nuestra nave. Esto será importante cuando lancemos proyectiles ya que éstos deberán salir de la nave, esté ésta donde esté.
Asignamos un valor inicial de 0 para nave_x; esto hará que aparezca centrada en la pantalla al iniciarse el programa.
El resto del código es un bucle infinito donde se comprueba si se pulsan las teclas de flecha-derecha o flecha-izquierda y se incrementa o decrementa el valor de nave_x en 3 píxeles respectivamente, actualizando después el nuevo valor de nave_x.
El resultado como puede verse hace lo que queríamos:
| << Anterior | Índice | Siguiente >> |
sábado, 21 de abril de 2018
Snap!: Estructuras condicionales
Hagamos que nuestro programa tome decisiones. Para ilustrar la explicación, desarrollaremos un programa en el que un personaje pregunte al usuario por el resultado de multiplicar dos números extraídos al azar entre 1 a 9. Si el usuario introduce la respuesta correcta, el personaje lo felicitará y deberá cambiar su postura o expresión en señal de alegría. Si no, deberá decirle que se ha equivocado y mostrará el resultado correcto. El proceso deberá repetirse una y otra vez en un bucle infinito.
En el enunciado de este ejercicio aparecen dos conceptos nuevos: por un lado decisión de actuar de un modo u otro según la condición de que se haya acertado o fallado en el resultado.
Por otro lado el cambio en el gesto del personaje si se acierta. Intentaremos explicar estas dos cuestiones.
En primer lugar elegiremos un escenario adecuado y cargaremos dos disfraces con diferente gesto para el objeto 1.
A continuación empezamos creando tres variables, una para cada uno de los dos números que hemos de extraer al azar y otra que utilizaremos para guardar el resultado de la multiplicación de esos números:
A las variables creadas les asignamos sus valores en el arranque del programa:
A continuación le preguntamos al usuario usando el bloque preguntar y esperar:
donde hacemos uso del bloque unir para componer nuestra pregunta. En este punto el programa espera la respuesta del usuario y tras introducirla es guardada en el bloque
Por ello el siguiente paso será comprobar si la respuesta del usuario es correcta, es decir si respuesta es igual a resultado. Para ello hacemos uso del bloque si-sino de la categoría Control:
Si la condición se no cumple, dentro del hueco sino deberemos decir al usuario que se ha equivocado y mostrarle el resultado correcto. Lo hacemos mediante:
Finalmente utilizamos un bucle por siempre para repetir todo el proceso indefinidamente y obligamos al principio del programa a que el disfraz del personaje sea el normal para evitar que empieza con el gesto contento. El resultado final es:
En el enunciado de este ejercicio aparecen dos conceptos nuevos: por un lado decisión de actuar de un modo u otro según la condición de que se haya acertado o fallado en el resultado.
Por otro lado el cambio en el gesto del personaje si se acierta. Intentaremos explicar estas dos cuestiones.
En primer lugar elegiremos un escenario adecuado y cargaremos dos disfraces con diferente gesto para el objeto 1.
A continuación empezamos creando tres variables, una para cada uno de los dos números que hemos de extraer al azar y otra que utilizaremos para guardar el resultado de la multiplicación de esos números:
A las variables creadas les asignamos sus valores en el arranque del programa:
A continuación le preguntamos al usuario usando el bloque preguntar y esperar:
donde hacemos uso del bloque unir para componer nuestra pregunta. En este punto el programa espera la respuesta del usuario y tras introducirla es guardada en el bloque
Por ello el siguiente paso será comprobar si la respuesta del usuario es correcta, es decir si respuesta es igual a resultado. Para ello hacemos uso del bloque si-sino de la categoría Control:
Si la condición se cumple, es decir, si el contenido de respuesta es igual al contenido de la variable resultado, el personaje deberá felicitar al usuario. Por ello, dentro de ese hueco, usamos el bloque decir y esperar configurado como se muestra:
Si la condición se no cumple, dentro del hueco sino deberemos decir al usuario que se ha equivocado y mostrarle el resultado correcto. Lo hacemos mediante:
Finalmente utilizamos un bucle por siempre para repetir todo el proceso indefinidamente y obligamos al principio del programa a que el disfraz del personaje sea el normal para evitar que empieza con el gesto contento. El resultado final es:
| << Anterior | Índice | Siguiente >> |
Snap!: Operadores matemáticos
Ya en la entrada anterior hicimos uso del operador suma 
para sumar dos números introducidos por el usuario.
En esta nueva entrada vamos a profundizar un poco más en el uso de los operadores matemáticos. Para ello vamos a desarrollar un programa que, pidiendo al usuario los datos necesarios, calcule su índice de masa corporal (IMC).
Buscando en Internet encontramos que el cálculo del IMC se hace según la fórmula:
Por tanto, nuestro programa deberá pedir al usuario su peso y altura expresados en kilogramos y metros respectivamente. Para ello empezaremos creando dos variables con esos mismos nombres para guardar los valores introducidos por el usuario.
Una vez creadas nuestras dos variables, empezaremos el programa pidiendo el peso y asignando el valor introducido por el usuario a la variable peso:
Repetimos la operación con la altura y procedemos a decir el resultado. Obsérvese cómo hemos implementado la fórmula haciendo uso de los operadores necesarios.
El resultado final en el que hemos utilizado un personaje del repositorio de Snap! y hemos introducido un escenario acorde con el tema:
para sumar dos números introducidos por el usuario.En esta nueva entrada vamos a profundizar un poco más en el uso de los operadores matemáticos. Para ello vamos a desarrollar un programa que, pidiendo al usuario los datos necesarios, calcule su índice de masa corporal (IMC).
Buscando en Internet encontramos que el cálculo del IMC se hace según la fórmula:
Por tanto, nuestro programa deberá pedir al usuario su peso y altura expresados en kilogramos y metros respectivamente. Para ello empezaremos creando dos variables con esos mismos nombres para guardar los valores introducidos por el usuario.
Una vez creadas nuestras dos variables, empezaremos el programa pidiendo el peso y asignando el valor introducido por el usuario a la variable peso:
Repetimos la operación con la altura y procedemos a decir el resultado. Obsérvese cómo hemos implementado la fórmula haciendo uso de los operadores necesarios.
El resultado final en el que hemos utilizado un personaje del repositorio de Snap! y hemos introducido un escenario acorde con el tema:
| << Anterior | Índice | Siguiente >> |
jueves, 19 de abril de 2018
Snap!: Variables
En cualquier lenguaje de programación una variable es un espacio en la memoria de nuestro ordenador para guardar datos. Podríamos verla como una cajita que utilizaremos para guardar cosas.
Como a lo largo del diseño de un programa es habitual crear varias variables; cada una de ellas debe tener un nombre único que la identifique. El nombre de la variable lo elige el programador libremente. Aunque es recomendable que dicho nombre indique para qué se usa esa variable. Así, deberíamos huir de nombres como a, b, c, etc., y usar aquellos del tipo: edad, nombre, fecha_nacimiento, que nos indica el significado del dato que van a guardar.
Es muy importante también tener en cuenta que Snap! hace distinción entre mayúsculas y minúsculas, por tanto no es lo mismo un variable llamada edad que otra llamada Edad.
Para crear una variable usaremos el botón que nos ofrece esta opción dentro de la categoría Variables.
Nos aparecerá una ventana para introducir el nombre de la variable y dentro de ella la opción de si queremos que nuestra variable sea conocida por todos los objetos de nuestro programa o sólo por el objeto para el que estamos programando.
Una vez creada la variable, podremos ver que aparece a la izquieda:
Utilizaremos el siguiente código, donde se hace uso de los bloques de asignación para dar valor a las variables creadas:
Es muy importante también tener en cuenta que Snap! hace distinción entre mayúsculas y minúsculas, por tanto no es lo mismo un variable llamada edad que otra llamada Edad.
Para crear una variable usaremos el botón que nos ofrece esta opción dentro de la categoría Variables.
Nos aparecerá una ventana para introducir el nombre de la variable y dentro de ella la opción de si queremos que nuestra variable sea conocida por todos los objetos de nuestro programa o sólo por el objeto para el que estamos programando.
Una vez creada la variable, podremos ver que aparece a la izquieda:
y que se visualiza en la pantalla con su valor actual:
Como aplicación de lo aprendido, crearemos un programa que suma dos número introducidos por el usuario.
Para ello, crearemos dos variables con los nombre numero1 y numero2.
El resultado:
| << Anterior | Índice | Siguiente >> |
domingo, 11 de marzo de 2018
Snap!: Entrada de datos
Veamos cómo permite Snap! la introducción de datos por parte del usuario en tiempo de ejecución.
Para ello crearemos un sencillo programa en el que se pregunta al usuario su nombre y tras la introducción del dato pedido, el programa saludará al usuario por su nombre.
Cuando queramos que el usuario introduzca datos por teclado, utilizaremos el comando preguntar y esperar de la categoría Sensores.
Encajaremos este comando bajo el comando de inicio de programa:
Este comando hace aparecer en la parte baja de la pantalla una caja de texto y espera a que el usuario introduzca algún valor y pulse la tecla Enter:
Utilizaremos esa variable para devolver el saludo al usuario. Para ello haremos uso el comando ya conocido decir y en su interior deberemos meter la unión de la palabra Hola con el nombre del usuario que estará contenido dentro de la variable respuesta.
La construcción del código quedaría así:
La construcción del código quedaría así:
Cómo se ve hemos hecho uso por primera vez de un comando de la categoría
Operadores: el comando unión nos permite unir cadenas de caracteres o dicho de otro modo, palabras o frases.
El resultado final es el esperado:
El resultado final es el esperado:
| << Anterior | Índice | Siguiente >> |
jueves, 8 de marzo de 2018
¡Hola mundo! en Snap!
Siguiendo la costumbre tan ampliamente extendida en el mundo de la programación, nuestro primer proyecto en Snap! será "un hola mundo".
Primeramente seleccionaremos la categoría Control:
Después arrastraremos el comando "decir" de la categoría Apariencia y lo encajaremos en el comando anterior.
Primeramente seleccionaremos la categoría Control:
y desde allí arrastraremos y soltaremos el comando:
De una forma tan simple ya hemos conseguido que al comenzar el programa haciendo clic en la bandera verde, aparezca un mensaje en pantalla con el saludo "¡Hola mundo!".
Snap! nos ofrece varias posibilidades de crear sprites o personajes en nuestros programas. La más fácil es importarlos desde el repositorio de disfraces:
Siendo ahora el resultado más atractivo:
| << Anterior | Índice | Siguiente >> |
Suscribirse a:
Entradas (Atom)