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:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

    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);

<!-- language: lang-css -->

    #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;
      
    }

<!-- language: lang-html -->

    <div id="escena"><div>

<!-- end snippet -->

---

Para detectar cuando una gallina ha salido de escena yo usuaria [Intersection Observer][1] 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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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);

<!-- language: lang-css -->

    #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;
      
    }

<!-- language: lang-html -->

    <div id="escena"><div>

<!-- end snippet -->


  [1]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API