Plusieurs flocons ?

Variables à utiliser

À l'étape précédente, nous avons réussi à faire défiler un unique flocon de neige, représenté par une ellipse. Une jolie chute de neige, ce serait de nombreux flocons. Beaucoup de flocons de préférence. Il va donc falloir rajouter des variables. La première variable à rajouter sera celle du nombre de flocons. On va choisir de fixer ce nombre à 150.

var nombreFlocons = 150 

Ensuite, il va falloir stocker la position de chacun de ces flocons. Nous devrons donc pour chacun des 150 flocons avoir une abscisse et une ordonnée. Lorsque l'on veut stocker beaucoup de variables, on le fait dans un tableau. Nous allons donc créer un tableau pour les abscisses des flocons et un tableau pour les ordonnées des flocons

var tableau_abscisses=[], tableau_ordonnee = []

Nous avons maintenant les structures de données nécessaires pour stocker les informations

Initialisation

Il faut commencer par initialiser le contenu de chacun des tableaux. Nous allons avoir pour chaque flocon une abscisse aléatoire et une ordonnée aléatoire. Pour pouvoir remplir les tableaux, il faut répéter une opération de nombreuses fois, c'est à dire faire une boucle. Nous allons le faire avec l'instruction for

for (var i=0;i<nombreFlocons;i++) {
  tableau_abscisses.push(Math.random()*width)
  tableau_ordonnees.push(Math.random()*height)
}

Pour rappel, l'instruction for prend 3 éléments : l'initialisation (i vaut 0), la condition de terminaison (i doit être plus petit que le nombre de flocons sinon on arrête) et l'instruction de boucle (i++ : à chaque fois on ajoute 1 à i)

On a donc maintenant un tableau avec les 150 abscisses et un tableau avec les 150 ordonnées

Faire bouger tous les flocons

Dernière étape de cette partie : faire bouger les flocons. Initialement, on a le code suivant pour un flocon :

ordonnee +=4
if (ordonnee>height) {
  ordonnee=0
  abscisse=Math.random()*width
}

Vous allez modifier le code pour ne plus animer un mais tous les flocons

Résultat

Voilà, nous arrivons à avoir 150 qui descendent et qui, arrivés en bas, disparaissent et laissent place à un nouveau flocon comme dans l'exemple ci dessous. L'étape suivante va être de rendre le code plus modulaire et lisible.