SVG & JavaScript : déplacement de "sprites"

On désigne par "sprites" les personnages d'une animation qui se déplacent. Il s'agit souvent de GIF animés.

Ici on se contente d'intégrer deux gif animés avec la balise image puis on les déplace avec JavaScript.
Par contre le décor est réalisé via le CSS ("background" du canevas SVG rempli d'un dégradé linéaire) et avec le SVG : clonage de deux objets SVG identifiés "bosquet" et "muret". le décor intégration d'un gif animé

Le code SVG de la page

Une règle de style en ligne dans la balise SVG afin que le canevas ait un fond dégradé (bleu ciel vers blanc).

Le script de la page

Le code JS est très simple. Dans le cadre d'une fonction animate (qui est exécutée 20 fois par seconde) on se contente de changer la valeur de l'attribut x des objets SVG chien et chat.
Retour menu