[Résolu] Arrêter mon effet de neige

Bonjour,
j'ai mit en place un script (effet flocon de neige) le soucis c'est que j'aimerais que l'effet s'arrête au bout d'un certain temps. Mais je n'y parviens pas.

        var no = 10;
        var delai = 10;
        var dx = new Array(),
            xp = new Array(),
            yp = new Array();
        var am = new Array(),
            stx = new Array(),
            sty = new Array();
        var i;
        larg_fenetre = (document.body.offsetWidth < window.innerWidth) ? window.innerWidth : document.body.offsetWidth;
        haut_fenetre = (document.body.offsetHeight < window.innerHeight) ? window.innerHeight : document.body.offsetHeight;

        for (i = 0; i < no; i++) {
            dx[i] = 0;
            xp[i] = Math.random() * (larg_fenetre - 40);
            yp[i] = Math.random() * haut_fenetre;
            am[i] = Math.random() * 20;
            stx[i] = 0.02 + Math.random() / 10;
            sty[i] = 0.7 + Math.random();

            obj = document.getElementsByTagName('body')[0];
            para = document.createElement("img");
            para.setAttribute("src", "img/fall.png");
            para.setAttribute("id", "dot" + i);
            para.style.position = "absolute";
            para.style.zIndex = "2";
            obj.appendChild(para);
        }

        function neige() {
            for (i = 0; i < no; i++) {
                dx[i] += stx[i];
                yp[i] += sty[i];
                if (yp[i] > haut_fenetre - 50) {
                    xp[i] = Math.random() * (larg_fenetre - am[i] - 40);
                    yp[i] = 0;
                }
                document.getElementById("dot" + i).style.top = yp[i] + "px";
                document.getElementById("dot" + i).style.left = xp[i] + am[i] * Math.sin(dx[i]) + "px";
            }
            setTimeout("neige()", delai);

        }

        neige();

Merci d'avance
Modifié par Don-pasqual (03 Jun 2021 - 13:24)

Salut,

Dans ta fonction neige il y a cette ligne :

setTimeout("neige()", delai);

qui va la rappeler. Du coup ça n'en fini pas.

Une première solution pourrait etre de définir une limite max et d'incrémenter une variable à chaque appel :

var iteration_max = 10;
var iteration = 0;

[...]
        if (iteration < iteration_max) {
            setTimeout("neige()", delai);
            iteration++;
        }
[...]

un truc dans le genre quoi. Au bout de X passage ca s'arrête.

J'ai bien fait comme tu me l'as dit:

        function neige() {
            for (i = 0; i < no; i++) {
                dx[i] += stx[i];
                yp[i] += sty[i];
                if (yp[i] > haut_fenetre - 50) {
                    xp[i] = Math.random() * (larg_fenetre - am[i] - 40);
                    yp[i] = 0;
                }
                document.getElementById("dot" + i).style.top = yp[i] + "px";
                document.getElementById("dot" + i).style.left = xp[i] + am[i] * Math.sin(dx[i]) + "px";
            }

            var iteration_max = 1;
            var iteration = 0;

            if (iteration < iteration_max) {
                setTimeout("neige()", delai);
                iteration++;
            }
        }

        neige();

Malheureusement ça ne fonctionne pas

Don-pasqual a écrit :
J'ai bien fait comme tu me l'as dit:

Pas exactement mais je n'avais peut etre pas bien précisé.

Si tu fais :

var iteration_max = 1;
 var iteration = 0;

juste avant de les tester iteration < iteration_max , les variables ne vont jamais changer de valeur.... et en plus comme tu déclare les variable à l'intérieur de la fonction, une fois la fonction fini les valeurs n'existent plus...
Modifié par _laurent (04 Jun 2021 - 12:01)

Maintenant je vois la neige, mais elle ne tombe plus

        iteration_max = 10;
        iteration = 0;
        function neige() {
            for (i = 0; i < no; i++) {
                dx[i] += stx[i];
                yp[i] += sty[i];
                if (yp[i] > haut_fenetre - 50) {
                    xp[i] = Math.random() * (larg_fenetre - am[i] - 40);
                    yp[i] = 0;
                }
                document.getElementById("dot" + i).style.top = yp[i] + "px";
                document.getElementById("dot" + i).style.left = xp[i] + am[i] * Math.sin(dx[i]) + "px";
            }



            if (iteration < iteration_max) {
                setTimeout("neige()", delai);
                iteration++;
            }
        }
        neige();

Modifié par Don-pasqual (04 Jun 2021 - 12:45)

Top merci .
Mais sans vouloir être trop exigeant, comment je peux faire pour que admettons 20 flocons tombes de haut en bas et après disparaissent ?

C'est la variable "no" qui fait ça. il n'y a pas de documentation là ou tu as copié-collé ce code ?

Non, ils ont juste mit le code et le code pour intensifier. Et vu que j’ai pas encore assez vu js à l’école je sais pas comment faire

Bah du coup je viens de te le dire

_laurent a écrit :
C'est la variable "no" qui fait ça.

Faut mettre 20 au lieu de 10

En mettant 20 au lieu de 10, cela me changer juste le nombre de 'flocon'

Don-pasqual a écrit :
Mais sans vouloir être trop exigeant, comment je peux faire pour que admettons 20 flocons tombes de haut en bas et après disparaissent ?

Don-pasqual a écrit :
En mettant 20 au lieu de 10, cela me changer juste le nombre de 'flocon'

ouais... c'est ce que tu m'a demandé non ? Faire tomber 20 flocons

mdr non, je me suis mal exprimé, je voudrais qu'un certain nombre de flocons tombent une seule fois de haut en bas puis disparaissent. Là pour le moment, les flocons s'arrêtent de tomber mais restent en plein milieu de l'écran.

Hahahaha désolé j'avais compris de travers

Mmmmm le code est pas vraiment prévu pour faire ça....

En gros il crée 10 (enfin le nombre dans "no") flocons et les positionns et ensuite la fonction neige() appellée en boucle va les faire bouger. Et la petite partie :

if (yp[i] > haut_fenetre - 50) {
                    xp[i] = Math.random() * (larg_fenetre - am[i] - 40);
                    yp[i] = 0;
                }

fait en sorte que s'ils atteignent le bas de la page hop ca les remet en haut. Donc c'est par ici qu'on doit bouger un truc. Genre mettre une variable qui prend +1 a chaque fois que ca remet un flocon en haut et arrivé a 20 par exemple on efface le flocon (display none) plutot que de le remettre en haut.
Et il faudra aussi penser a stopper l'annim si tout les flocon sont en display none sinon ca tournera dans le vide pour rien.

d'accord super. Merci pour ton aide