Skip to main content
3 de 3
se añadieron 187 caracteres en el cuerpo
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Creo que lo primero es reorganizar tu código (lo intentaré de la forma más simple que se me ocurre)

Al menos necesitas 2 funciones:

1.- Crear Gallina:

function CrearGallina() {
  const gallina = document.createElement("div");
  gallina.classList.add("gallina");
  gallina.pos = { x: 0, y: 0 };
  gallina.caminar = function(pos) {
    this.pos = pos;
    this.style.left = pos.x + "px";
    this.style.top = pos.y + "px";
  }
  escena.append(gallina);
}

Esta función:

  • Creará un div a modo de gallina
  • Le asignará una clase .gallina
  • Creara una propiedad pos para guardar la posición de la gallina
  • Creará una función caminar que básicamente lo que hace es cambiar de posición el div.
  • Por último, lo añade a la escena.

2.- Render:

Una función que cambia de posición a las gallinas presentes en escena

  escena.querySelectorAll(".gallina").forEach(g=>{
    const newpos = {x: g.pos.x + Offset_X, y: g.pos.y};
    g.caminar(newpos);
  });

Demo:

const escena = document.getElementById("escena");
const FPS = 25;
const Offset_X = 5;

function CrearGallina() {
  const gallina = document.createElement("div");
  gallina.classList.add("gallina");
  gallina.pos = { x: 0, y: 0 };
  gallina.caminar = function(pos) {
    this.pos = pos;
    this.style.left = pos.x + "px";
    this.style.top = pos.y + "px";
  }
  escena.append(gallina);
}

function render(){
  escena.querySelectorAll(".gallina").forEach(g=>{
    const newpos = {x: g.pos.x + Offset_X, y: g.pos.y};
    g.caminar(newpos);
  });
}

CrearGallina();
setInterval(render, 1000 / FPS);
#escena {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100px
}

.gallina {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: rotateY(180deg);
}
.gallina:before{
  content: "🐓";
  font-size:33px;
  
}
<div id="escena"><div>


Para detectar cuando una gallina ha salido de escena yo usuaria Intersection Observer que permite detectar cuando 2 elementos se intersectan. En tu caso gallina está dentro de escena, y al estar dentro, están intersectados. Y cuando sale la gallina dejan de intersectarse

Entonces cada vez que creo una gallina "observo" si sale de escena y cuando pase eso la destruyo y creo otra, así de simple.

const escena = document.getElementById("escena");
const FPS = 25;
const Offset_X = 5;

let options = {
 root: escena,
 rootMargin: "50px", //ancho de la gallina
 threshold: 1.0,
};

const observer = new IntersectionObserver(interseccion, options);
function interseccion(entries){
  entries.forEach((entry) => {
     if (!entry.isIntersecting) { //la gallina ha salido
        entry.target.remove(); //elimino la gallina
        CrearGallina(); //creo una nueva gallina
     }
  });
}

function CrearGallina() {
  const gallina = document.createElement("div");
  gallina.classList.add("gallina");
  gallina.pos = { x: 0, y: 0 };
  gallina.caminar = function(pos) {
    this.pos = pos;
    this.style.left = pos.x + "px";
    this.style.top = pos.y + "px";
  }
  
  escena.append(gallina);
  observer.observe(gallina); // Observo la gallina
}

function render(){
  escena.querySelectorAll(".gallina").forEach(g=>{
    const newpos = {x: g.pos.x + Offset_X, y: g.pos.y};
    g.caminar(newpos);
  });
}

CrearGallina();
setInterval(render, 1000 / FPS);
#escena {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100px
}

.gallina {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: rotateY(180deg);
  transition: right 40ms;
  animation: salta 300ms infinite;
}

.gallina:before{
  content: "🐓";
  font-size:33px;
  
}
@keyframes salta{
  0% { transform: translateY(0) rotateY(180deg); }
  100%{ transform: translateY(-6px) rotateY(180deg);}
}
<div id="escena"><div>

Yussef
  • 23.4k
  • 4
  • 12
  • 29