11286 sujets

JavaScript, DOM et API Web HTML5

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 Smiley biggrin
Modifié par Don-pasqual (03 Jun 2021 - 13:24)
Modérateur
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 Smiley ohwell
Modérateur
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... Smiley smile
Modifié par _laurent (04 Jun 2021 - 12:01)
Maintenant je vois la neige, mais elle ne tombe plus Smiley sweatdrop

        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)
Modérateur
Oui parceque 10 c'est très rapide tu ne la vois quasiment pas tomber Smiley lol
Mets plutôt 100 pour le test https://jsfiddle.net/t6c2y0nz/ et sinon bah beaucoup plus selon la durée que tu veux

Et si tu préfère stopper après un certain temps plutot qu'un nombre d'itération tu peux éventuellement faire un truc du genre :

        var neigequitombe = true;
        setTimeout("stop()", 5000); // 5 000ms = 5s
        function stop() {
        	neigequitombe = false;
        }

et plus bas :
            if (neigequitombe) {
                setTimeout("neige()", delai);
            }


https://jsfiddle.net/t6c2y0nz/1/
Modifié par _laurent (04 Jun 2021 - 12:54)
Meilleure solution
Top merci Smiley biggrin .
Mais sans vouloir être trop exigeant, comment je peux faire pour que admettons 20 flocons tombes de haut en bas et après disparaissent ?
Modérateur
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
Modérateur
Bah du coup je viens de te le dire Smiley smile
_laurent a écrit :
C'est la variable "no" qui fait ça.

Faut mettre 20 au lieu de 10
Modérateur
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' Smiley ohwell


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.
Modérateur
Hahahaha désolé j'avais compris de travers Smiley lol

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.