Detectar la Colisión
En Processing5 (p5js) existe un método para detectar colisiones, si es que buscamos crear un videojuego, pero para este ejercicio lo haremos de la forma más antigua ya que deseamos que aprendan a pensar en posiciones numéricas en el espacio (X e Y).
.
De ésta manera podemos hacer que un personaje se mueva solo, o que esté quieto y sea el fondo el que se mueve.
De ésta manera podemos hacer que un personaje se mueva solo, o que esté quieto y sea el fondo el que se mueve.
Para crear enemigos hacemos tecnicamente lo mismo que hicimos en la clase 9 con el fondo, pero esta vez la imagen no cubrirá la pantalla, sino que pasará hacia nuestro personaje.
Si la distancia lo pone en contacto con el mismo entonces nos chocó debemos detener el juego.
Antes que nada, debemos descargar el archivo que contiene el proyecto, de hecho , éste ya tiene el fondo en movimiento como vimos en la clase anterior.
Es importante notar que he cambiado las variables fondox y fondoy simplemente por las variables x e y.
Para agregar al enemigo, he creado nuevas variables para la posición del mismo llamadas ex, ey (posiciones x e y del enemigo) como se ve en las líneas 6 y 7.
Para mostrar otra imagen, se crea una nueva variable llamada enemigo (línea 5) y luego se carga la imagen en el function setup (línea 13).
Para mostrar al enemigo, se usa también image() como se ve en la línea 20, pero esta vez se especifica que debe mostrar la imagen guardada en la variable enemigo y la posición del mismo es ex-150 y ey-150 (Restamos ese 150 para que la posición sea el centro de la imagen, ya que tiene un tamaño de 300x300, o sea restamos la mitad del ancho y del alto. Lo mismo para la imagen de nuestro personaje (línea 19) donde especificamos mouseX-150, mouseY-150 para que la imagen se dibuje en el centro del puntero del mouse.
Cuando los alumnos usan los autos, estas imágenes las usamos de 300x150, y para ese caso seria ex-150, ey-75).
Para que el enemigo se mueva, simplemente copiamos lo que hace mover al fondo, pero cambiamos el nombre de las variables. El fondo se mueve rápido hacia la izquierda (x=x-50), pero el enemigo se movera mas lento (x=x-10) como se ve en la linea 22.
En la linea 23, usamos IF para que el enemigo siga apareciendo. O sea que si ex es menos a -400 (salió por el margen izquierdo de la pantalla) entonces le asignamos el valor 1400 para que este en el margen derecho y vuelva a entrar a la pantalla.
Linea 8: Creamos la variable distancia, por defecto le asignamos 500. en esta variable se guardara la distancia entre el personaje y el enemigo.
linea 24: llenamos la variable distancia con el resultado de la funcion dist() con 4 valores. Para ello usamos el punto de centro de la imagen ameo (verde) y el punto de centro de la imagen enemigo (rosa).
Linea 25, 26, 27 y 28: este bloque IF es básicamente preguntar si el valor que esta guardado en distancia es mayor o igual a 200, si lo es entonces el fondo y el enemigo se mueven, si no es cierto, el juego queda como CONGELADO (ya que sigue dibujando las imagenes en el mismo lugar).
linea 32: la función random(600) inventa un valor aleatorio y lo guarda en ey, por lo tanto, cuando el enemigo salga de la pantalla de la izquierda, este bloque IF lo llevara de nuevo al margen derecho pero inventara un nuevo valor vertical para que no aparezca siempre en el mismo lugar.
En este ejemplo reemplacé las imágenes con círculos, y la función dist() está representada por la línea que es la distancia entre ambos, desde (mouseX, mouseY), hasta la posición (ex,ey).
En este caso, en la linea 31 agregamos ELSE que significa SINO. Ahora el bloque If se debe leer de esta forma:
"Si la distancia entre la imagen y el enemigo es mayor o igual a 200 mover el fondo y al enemigo, SINO dibujar la imagen de GAME OVER en el medio de la pantalla".
var x=0;
var y=0;
var ameo;
var fondo;
var enemigo;
var ex=1400;
var ey=300;
var distancia=500;
var gameover;
function setup() {
createCanvas(1200,600);
background(255,81,211);
ameo=loadImage("chicas.png");
fondo=loadImage("ciudad1.jpg");
enemigo=loadImage("raven1.png");
gameover=loadImage("gameover.png");
}
function draw() {
image(fondo, x, y, 1200, 600)
image(fondo, x+1200, y, 1200, 600)
image(ameo, mouseX-150, mouseY-150, 300,300)
image(enemigo, ex-150, ey-150 , 300,300)
//medir la distancia entre ameo y enemigo
distancia= dist(mouseX-150,mouseY-150,ex-150, ey-150)
if (distancia>= 200) {
ex=ex-10
x=x-50
} else {
image(gameover, 600-250,300-250 , 500,500)
}
if ( ex <= -400 ) { //enemigo continuo
ex=1400
ey=random(600)
}
if ( x <= -1200 ) { x=0} //fondo continuo
}
Si la distancia lo pone en contacto con el mismo entonces nos chocó debemos detener el juego.
Antes que nada, debemos descargar el archivo que contiene el proyecto, de hecho , éste ya tiene el fondo en movimiento como vimos en la clase anterior.
Es importante notar que he cambiado las variables fondox y fondoy simplemente por las variables x e y.
Enemigo
Para agregar al enemigo, he creado nuevas variables para la posición del mismo llamadas ex, ey (posiciones x e y del enemigo) como se ve en las líneas 6 y 7.
Para mostrar otra imagen, se crea una nueva variable llamada enemigo (línea 5) y luego se carga la imagen en el function setup (línea 13).
Para mostrar al enemigo, se usa también image() como se ve en la línea 20, pero esta vez se especifica que debe mostrar la imagen guardada en la variable enemigo y la posición del mismo es ex-150 y ey-150 (Restamos ese 150 para que la posición sea el centro de la imagen, ya que tiene un tamaño de 300x300, o sea restamos la mitad del ancho y del alto. Lo mismo para la imagen de nuestro personaje (línea 19) donde especificamos mouseX-150, mouseY-150 para que la imagen se dibuje en el centro del puntero del mouse.
Cuando los alumnos usan los autos, estas imágenes las usamos de 300x150, y para ese caso seria ex-150, ey-75).
Para que el enemigo se mueva, simplemente copiamos lo que hace mover al fondo, pero cambiamos el nombre de las variables. El fondo se mueve rápido hacia la izquierda (x=x-50), pero el enemigo se movera mas lento (x=x-10) como se ve en la linea 22.
En la linea 23, usamos IF para que el enemigo siga apareciendo. O sea que si ex es menos a -400 (salió por el margen izquierdo de la pantalla) entonces le asignamos el valor 1400 para que este en el margen derecho y vuelva a entrar a la pantalla.
Distancia y Colisión
Para saber si el enemigo nos ha chocado o no debemos medir la distancia hacia el mismo como haríamos en el mundo real, en nuestro caso ambas imágenes tienen un tamaño de 300x300 píxeles, por lo tanto, si tal distancia es menor a 300, podemos inferir que están tocándose en algún punto. Pero como las raven y las chicas superpoderosas no ocupan todos los píxeles podemos usar el valor 200.
En la imagen siguiente veremos los cambios a hacer al código.
En la imagen siguiente veremos los cambios a hacer al código.
Linea 8: Creamos la variable distancia, por defecto le asignamos 500. en esta variable se guardara la distancia entre el personaje y el enemigo.
linea 24: llenamos la variable distancia con el resultado de la funcion dist() con 4 valores. Para ello usamos el punto de centro de la imagen ameo (verde) y el punto de centro de la imagen enemigo (rosa).
Linea 25, 26, 27 y 28: este bloque IF es básicamente preguntar si el valor que esta guardado en distancia es mayor o igual a 200, si lo es entonces el fondo y el enemigo se mueven, si no es cierto, el juego queda como CONGELADO (ya que sigue dibujando las imagenes en el mismo lugar).
linea 32: la función random(600) inventa un valor aleatorio y lo guarda en ey, por lo tanto, cuando el enemigo salga de la pantalla de la izquierda, este bloque IF lo llevara de nuevo al margen derecho pero inventara un nuevo valor vertical para que no aparezca siempre en el mismo lugar.
En este ejemplo reemplacé las imágenes con círculos, y la función dist() está representada por la línea que es la distancia entre ambos, desde (mouseX, mouseY), hasta la posición (ex,ey).
GAME OVER
En clase no pusimos el cartel de GAME OVER, pero con simplemente agregar al bloque de la linea 32 una imagen (de una variable que hemos creado para el caso).
La imagen de GAME OVER puede descargarse desde este link (y debe ponerse en la carpeta del proyecto)
En este caso, en la linea 31 agregamos ELSE que significa SINO. Ahora el bloque If se debe leer de esta forma:
"Si la distancia entre la imagen y el enemigo es mayor o igual a 200 mover el fondo y al enemigo, SINO dibujar la imagen de GAME OVER en el medio de la pantalla".
// Codigo final
var x=0;
var y=0;
var ameo;
var fondo;
var enemigo;
var ex=1400;
var ey=300;
var distancia=500;
var gameover;
function setup() {
createCanvas(1200,600);
background(255,81,211);
ameo=loadImage("chicas.png");
fondo=loadImage("ciudad1.jpg");
enemigo=loadImage("raven1.png");
gameover=loadImage("gameover.png");
}
function draw() {
image(fondo, x, y, 1200, 600)
image(fondo, x+1200, y, 1200, 600)
image(ameo, mouseX-150, mouseY-150, 300,300)
image(enemigo, ex-150, ey-150 , 300,300)
//medir la distancia entre ameo y enemigo
distancia= dist(mouseX-150,mouseY-150,ex-150, ey-150)
if (distancia>= 200) {
ex=ex-10
x=x-50
} else {
image(gameover, 600-250,300-250 , 500,500)
}
if ( ex <= -400 ) { //enemigo continuo
ex=1400
ey=random(600)
}
if ( x <= -1200 ) { x=0} //fondo continuo
}
Solo con cambiar las imágenes podemos convertirlo en un juego de autos, o bien usarlo como un mini juego de colisiones de superheroínas.
Es importante tener en el material que se le da a los alumnos personajes vigentes o interesantes. En un curso, por ejemplo, los chicos usaron una foto de Donald Trump como enemigo y el ironman como su personaje. En otros casos, buscaron un dibujo del emoji Poop... e hicieron todo el juego con un motivo un tanto escatológico pero divertido.
Probar Juego Chicas Probar Juego con Autos
Es importante tener en el material que se le da a los alumnos personajes vigentes o interesantes. En un curso, por ejemplo, los chicos usaron una foto de Donald Trump como enemigo y el ironman como su personaje. En otros casos, buscaron un dibujo del emoji Poop... e hicieron todo el juego con un motivo un tanto escatológico pero divertido.
Probar Juego Chicas Probar Juego con Autos