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>