Pour visualiser le résultat dans l'animation ci-dessus, presser la touche 'F1'.
Pour arrêter l'animation, presser la touche 'F2'.
Pour les mobiles et les tablettes, appuyer sur l'animation.
Déclarer les variables img2x, img2y, dimgx.
img2x qui correspond à la coordonnée x du coin gauche supérieur de l'image img placée en position 2.
img2y qui correspond à la coordonnée y du coin gauche supérieur de l'image img placée en position 2.
dimgx qui correspond à la vitesse et au sens de déplacement horizontal de img.
Nous allons faire défiler notre image img une première fois (img position 1), puis une seconde fois (img position 2) à la suite.
Au démarrage du jeu imgx est égale 0 (img position 1) et img2x est égale à la valeur 1795 (img position 2).
En défilant vers la gauche les valeurs de imgx et img2x vont evoluer vers la valeur -1800.
Lorsque imgx sera inférieure à la valeur -1800,
img (position 1) sera repositionnée à la valeur 1790, à la suite de img (position 2).
Lorsque img2x sera inférieure à la valeur -1800.
img (position 2) sera repositionnée à la valeur 1790, à la suite de img (position 1).
Cette séquence se reproduit jusqu'à la scène finale.
Créer la fonction defiler().
ctx.drawImage(img, imgx, imgy)
Afficher l'image img (position 1).
if(imgx < -1800 )
Si imgx est inférieure à la valeur -1800, c'est à dire à partir de la valeur -1801.
imgx = 1790
imgx est égale à 1790.
img (position 1) se repositionne à la valeur 1790, à la suite de img (position 2).
img (position 1) chevauche img (position 2) d'une largeur de 10 pixels, évitant ainsi une coupure dans le défilement du décor.
ctx.drawImage(img, img2x, img2y)
Afficher l'image img (position 2).
if(img2x < -1800 )
Si img2x est inférieure à la valeur -1800, c'est à dire à partir de la valeur -1801.
img2x = 1790
img2x est égale à 1790.
img (position 2) se repositionne à la valeur 1790, à la suite de img (position 1).
img (position 2) chevauche img (position 1) d'une largeur de 10 pixels, évitant ainsi une coupure dans le défilement du décor.
imgx += dimgx
imgx est égale à imgx + dimgx.
Cette déclaration de imgx permet le déplacement horizontal de img (position 1).
img2x += dimgx
img2x est égale à img2x + dimgx.
Cette déclaration de img2x permet le déplacement horizontal de img (position 2).
requestAnimationFrame (defiler)
La méthode requestAnimationFrame prévient le navigateur de l'exécution d'une animation.
defiler()
Appeler la fonction defiler(), pour qu'elle soit exécutée.
Enregistrer le code dans l'editeur.
Actualiser la page du navigateur.
Pour stopper le défilement du décor, mettre en commentaire la ligne qui lance l'exécution de la fonction defiler().
Les commentaires ne sont pas pris en compte, ils empêchent l'exécution du code.
Utiliser // pour mettre en commentaire le texte qui suit. (ne pas oublier de l'enlever pour permettre l'exécution du code)
Enregistrer le code dans l'editeur.
Actualiser la page du navigateur.