0

necesito ayuda porque quiero que cuando el left de un elemento html (una img) de una gallina (chicken 1) llegue al width del body, esta desaparezca y empiece a desplazarse la chicken 2. El problema que tengo es que cuando la gallina 1 llega al width del body sí desaparece pero asi tambien la gallina 2, creo que porque directamente empieza con un left mayor que al width del body. Agradeceria si alguien puede ayudarme con esto. JS:

    var body = document.body
document.addEventListener('DOMContentLoaded', function() {
  var chicken = document.getElementById('gallina');
  var chicken2 = document.getElementById('gallina2');
  let start = Date.now(); // recordar la hora de inicio

  let timer = setInterval(function() {
  // ¿Cuánto tiempo ha pasado desde el principio?
  var timePassed = Date.now() - start - 1500;
  //console.log(timePassed)
  // dibujar la animación en el momento timePassed
  drawChicken1(timePassed);

    //condicional
    var leftChicken = (chicken.style.left).replace("px","")
    leftChicken === body.clientWidth ? timePassed=0 : timePassed
    if (leftChicken > body.clientWidth) {
      chicken.style.display = 'none';
      //var timePassed2 = (timePassed - (Date.now() - start - 1500)) clearInterval(timer);  el timer vuelve a cero
      console.log("estoy en el if")
      setInterval2(timePassed)
        if (chicken2.style.left > body.clientWidth + 'px') {
          chicken2.style.display = 'none';
          clearInterval(timer);
        }
    }
  }, 20);
  
  function setInterval2(timePassed){
    let timer2 = setInterval(function(){
      let timePassed2 = timePassed

      console.log("time passed 2 " + timePassed2)
      console.log('la gallina 2 está en: '+ timePassed2 / 5 + 'px')
      console.log("")

      drawChicken2Position(timePassed2);
    }, 20)
  }

  function drawChicken1(timePassed) {
    chicken.style.left = timePassed / 5 + 'px';
  }

  function drawChicken2Position(timePassed2) {
    chicken2.style.left = timePassed2 / 5 + 'px';
  }
});

CSS:

#gallina, #gallina2 {
    position: relative;
    cursor: pointer;
    width: 5%;
    transform: scaleX(-1);
  }

1 respuesta 1

7

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>

2
  • No te doy el +1 por no haberlo hecho 144 fps con algunos leds multicolor. (Es broma, te llevas el +1 igualmente)
    – Benito-B
    Commented el 4 jul. a las 8:35
  • @Benito-B jajajaj tendré en cuenta lo de los leds para la próxima. Muchas gracias
    – Yussef
    Commented el 4 jul. a las 14:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.