Skip to main content
se añadieron 187 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29
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: allright 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>
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: all 40ms;
}

.gallina:before{
  content: "🐓";
  font-size:33px;
  
}
<div id="escena"><div>
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>
se añadieron 191 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

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

Para detectar cuando una gallina ha salido de escena yo usuaria Intersection Observer

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

Origen Enlace
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

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: all 40ms;
}

.gallina:before{
  content: "🐓";
  font-size:33px;
  
}
<div id="escena"><div>