<style>
.poisson {
    color: blue;
    border: solid 1px blue;
    position: absolute;
    top: 0;
    left: 0;
}
#map {
    border: solid 1px black;
    width: 500px;
    height: 700px;
}
</style>

<h1>FisherType</h1>
<div id="map">
</div>
<input type="text" id="input" />

<script>
    var mots = [
        "boulbi", "hassoul", "am am am am", "toz", "ordinateur", "table", "poisson", "sherif", "lune",
        "hassanat", "stéphane", "hessel", "quoi", "nan mais", "chapeau", "compliqué", "oui", "têtu",
        "gougougaga", "dora", "exploratrice", "gay", "lgbtqa+-^10", "oreilles", "yeux", "perceuse",
    ];
    var map = document.getElementById("map");
    var input = document.getElementById("input");
    var coord_map = map.getBoundingClientRect();
    var poissons = document.getElementsByClassName("poisson");

    setInterval(() => {
        map.innerHTML += "<div class='poisson'>" + mots[parseInt(Math.floor(Math.random()*mots.length))] + "</div>";
        var poisson = poissons[poissons.length-1]
        poisson.style.top = coord_map.top;
        poisson.style.left = coord_map.left + (coord_map.width-poisson.getBoundingClientRect().width)*Math.random();
        poisson.setAttribute("pos", poisson.style.left.replace("px", ""));
        poisson.setAttribute("i", 0);
    }, 1000);

    input.onkeyup = () => {
        for (var i in poissons) {
            var p = poissons[i];
            if (input.value == p.innerHTML) {
                input.value = "";
                p.remove();
            }
        }
    };

    setInterval(() => {
        for (var i in poissons) {
            if (isNaN(i)) continue;
            var p = poissons[i];
            var new_top = parseInt(p.style.top.replace("px", "")) + 10;
            p.style.top = new_top;
            p.setAttribute("i", parseInt(p.getAttribute("i")) + 1);
            p.style.left = parseInt(p.getAttribute('pos')) + Math.sin(parseInt(p.getAttribute('i')))*10;
            if (new_top > coord_map.height + coord_map.top - p.getBoundingClientRect().height) {
                p.remove();
            }
        }
    }, 100);
</script>