La clase pasada vimos como crear un Runner muy básico, de hecho vamos a usar el mismo codigo con unos cambios menores, porque técnicamente son el mismo juego.Les recomiendo leer el contenido de la CLASE 15 antes de seguir con ésta clase, ya que usaré el mismo código con unas pequeñas modificaciones.
Elementos Gráficos
Para éste ejemplo usaremos éstas 4 imágenes, reemplazaremos el personaje con el pájaro, al enemigo por el tubo (haremos 3 tubos por cada ciclo), un fondo quieto y un fondo que se mueve. Pueden descargar los 4 archivos que están a continuación en la misma carpeta (pajaro.png, fondoFlappy.png, fondoFlappyQuieto.png y tubos.png).
Elementos Comunes Para Empezar
Podemos empezar con el mismo código que usamos en la clase anterior, de hecho a partir de la línea 13 como se ve en la imagen de la derecha, agregué unas variables que voy a necesitas.Cont, es para crear valores nuevos para los tubos.
tb1, tb2, y tb3, son la posición vertical donde aparecerá la imagen del tubo, por lo tanto, si en él está el valor 300, entonces el huevo va desde 300-90 hasta 300+90, si el pájaro no pasa entre esos dos valores está muerto.
Puntos=0 es el contador de puntos, cuando pasa existosamente por un obstaculo, el sistema incrementa el valor y lo pone en pantalla.
Modificando el Bucle
(While..EndWHILE)
Como hice en la clase pasada, invertí los colores del editor, no se asusten es más fácil poder ver como funcionan con las imágenes.
Línea 20: Puse el CLG que antes estaba al final de la línea 46, ya que si el personaje muere no quiero que el fondo desaparezca.
Línea 21: puse el salto en TRUE para que el personaje empiece volando (y no en picada).
Línea 23: he cambiado el tamaño de las imágenes, por ello el recorrido de las imágenes fondoFlappy (línea 27 y 28) que tienen un tamaño original de 500x250, pero en tamaño 2 ocupan 1000x500 en la ventana de gráficos.
Línea 32: Se eliminó la segunda parte de la condición que en el ejemplo del runner preguntaba si el personaje estaba saltando, o sea que sólo podría saltar si se presionaba la barra espaciadora y no estaba saltando... en éste caso saltará en el aire sólo presionando la tecla espacio haciendo doble saltos o triples para que el pájaro suba.
Línea 33: cambié el valor -2 por el valor -0.7 para que tenga menos energía el ascenso.
Pájaro
Para agregar el pájaro usaremos la misma linea que antes:
imgload 100, s , 2, velocidad, "Pajaro"
Se agrega el tercer valor para la rotación, en éste casi es VELOCIDAD, por lo tanto el pájaro rotará en base a la variación de la velocidad.
Crear Tubos
(Enemigos)
Para ésto usamos un IF, preguntando si la variable CONT vale CERO (0)
tubo1 = 480 * rand()
tubo2 = 480 * rand()
tubo3 = 480 * rand()
endif
cont = cont + 1
Si es cierto, entonces se llenan los valores de tubo1, tubo2, y tubo 3 con 480*rand() lo que nos devuelve un valore aleatorio que no sera mayor a 480. A continuación agregamos el código que usamos para mover MALO hacia la izquierda (la pelotita enojada) pero esta vez le restamos 25 para que se desplace a la izquierda a ésa velocidad.
cont=cont+1 incrementa para que éste codigo no se vuelva a ejecutar en cada ciclo.
malo = malo - 25
tb1= malo + 200
tb2 = malo + 800
tb3 = malo + 1400
if malo < -1600 then : malo = 1200 : cont = 0 : endif
imgload tb1 , tubo1 , 1 , "tubos"
imgload tb2 , tubo2 , 1 , "tubos"
imgload tb3 , tubo3 , 1 , "tubos"
Como se ve en éstas líneas, utilizo malo para crear tb1, tb2 y tb3 a distintas distancias, y un IF que controla que si pasan los 3 hacia la izquierda de la pantalla vuelvan a dibujarse afuera de la pantalla, a la derecha.
CONT=0 indica que requerimos 3 nuevos valores para las posiciones verticales, entonces en el próximo ciclo se activará el if explicado arriba que crea los valores de tubo1, tubo2 y tubo3.
Finalmente, los 3 IMGLOAD que dibuja los tubos en pantalla, como se ve en el vídeo, no detecta la colisión con los tubos pero sí contra el piso.
Detectar los Tubos
Necesitamos saber si nuestro pájaro está chocando contra uno de los tubos, para ello usaremos un if para evaluar si el tubo llego al pajaro o sea si tb1=100Si es cierto vivo=false y el cico termina, sino sumara un punto.
En verde, al centro, está el area por la cual el personaje puede pasar.
Se repite el procedimiento para los o 2 tubos, abajo la estructura completa (juntando las líneas con " : " )
if tb1= 100 then #detecta el tubo 1
if s< tubo1 - 90 or s> tubo1 + 90 then : vivo = false : else : puntos = puntos + 1 : endif
endif
if tb2= 100 then #detecta el tubo 2
if s< tubo2 - 90 or s> tubo2 + 90 then : vivo = false : else : puntos = puntos + 1 : endif
endif
if tb3= 100 then #detecta el tubo 3
if s< tubo3 - 90 or s> tubo3 + 90 then : vivo = false : else : puntos = puntos + 1 :endif
endif
Dibujar los puntos
El contador de puntos, decidí ponerlo en la parte duperior derecha, con una pequeña sombra roja. Lower(puntos) convierte el valor numérico a alfanumérico.
color darkred
font "impact", 85, 25
text 703 , 13 , lower(puntos)
color orange
font "impact", 85, 25
text 700 , 10 , lower(puntos)
#CodigoCompleto del Flappy Basic
cls : clg : fastgraphics : graphsize 800,500x = 500
y = 500
a = 0
bicho = 0
malo = 500
vivo = true
salto = false
tecla = 0
velocidad = -0.9 #velocidad del salto
aceleracion= 0.09 #la fuerza del salto
s=350 # Posición vertical del personaje
cont = 0
tb1 = 0
tb2 = 0
tb3 = 0 #posicion verical de los 3 tubos
puntos = 0
WHILE (vivo = true)
CLG
salto = true
a = a - 10
if a <= -1000 then : a = 0 : endif
#Dibuja los fondosimgload 400 , 250 , 4 , "fondoFlappyQuieto"
color yellow : circle 550 , 160 , 100 #dibuja el Sol
imgload (x+ a) , 250 , 2 , "fondoFlappy"
imgload (x+a+1000) , 250 , 2 , "fondoFlappy"
#Dibuja al pájaro
imgload 100, s ,2, velocidad, "Pajaro"
if cont = 0 then #inventa la altura de los 3 tubos
tubo1 = 480 * rand()
tubo2 = 480 * rand()
tubo3 = 480 * rand()
endif
cont = cont + 1
#Dibujar los 3 tubos
malo = malo - 25 #enemigo - Tubo
tb1= malo + 200
tb2 = malo + 800
tb3 = malo + 1400
if malo < -1600 then : malo = 1200 : cont = 0 : endif
imgload tb1 , tubo1 , 1 , "tubos"
imgload tb2 , tubo2 , 1 , "tubos"
imgload tb3 , tubo3 , 1 , "tubos"
# Si choco el tubo 1 muere, sino suma 1 punto
if tb1= 100 then
if s< tubo1 - 90 or s> tubo1 + 90 then : vivo = false : else : puntos = puntos + 1 : endif
endif
# Si choco el tubo 2 muere, sino suma 1 punto
if tb2= 100 then
if s< tubo2 - 90 or s> tubo2 + 90 then : vivo = false : else : puntos = puntos + 1 : endif
endif
# Si choco el tubo 3 muere, sino suma 1 punto
if tb3= 100 then
if s< tubo3 - 90 or s> tubo3 + 90 then : vivo = false : else : puntos = puntos + 1 :endif
endif
# Dibuja el contador de puntos, Arriba a la Derecha
color darkred
font "impact", 85, 25
text 703 , 13 , lower(puntos)
color orange
font "impact", 85, 25
text 700 , 10 , lower(puntos)
# Detecta la tecla presionada y calcula la velocidad
tecla = key
if (tecla=32) then # VUELA
salto = true
velocidad = -0.7
endif
if (salto = true) then
velocidad=velocidad + aceleracion
s = s + velocidad*20
endif
if s > 480 then # Si toca el piso esta muerto
s = 480
velocidad = 0
salto = false
vivo = false
endif
refresh : pause 0.03
ENDWHILE
# Dibuja la pantalla final
color darkred : font "impact" , 80,40 : text 63,153 , "PAJARO MUERTO"
color red : font "impact" , 80,40 : text 60,150 , "PAJARO MUERTO"
refresh
