Déplacer des "sprites" au sein d'un décor

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

<svg viewBox ="0 0 900 60" width="100%" height="auto" style = "background : linear-gradient( 45deg, skyblue, white )" > <defs> <g id ='bosquet'> <rect x = '16' y = '30' width = '8' height = '20' fill = "maroon" /> <ellipse cx="20" cy="20" rx="15" ry="20" fill="green" /> </g> <g id = 'muret'> <rect x = '0' y = '20' width = '50' height = '30' fill = 'rgb(255,255,170)' /> <rect x = '20' y = '30' width = '4' height = '2' fill = 'rgb(255,0,0)' /> <rect x = '10' y = '40' width = '4' height = '2' fill = 'rgb(255,0,0)' /> <rect x = '30' y = '45' width = '4'height = '2' fill = 'rgb(255,0,0)' /> </g> </defs> <desc>le décor </desc> <use xlink:href="#muret" x="0" y="0" /> <use xlink:href="#muret" x="50" y="0" /> <use xlink:href="#bosquet" x="100" y="0" /> <use xlink:href="#bosquet" x="150" y="0" /> <use xlink:href="#bosquet" x="200" y="0" /> <use xlink:href="#muret" x="250" y="0" /> <use xlink:href="#bosquet" x="300" y="0" /> <use xlink:href="#muret" x="350" y="0" /> <use xlink:href="#muret" x="400" y="0" /> <use xlink:href="#muret" x="450" y="0" /> <use xlink:href="#bosquet" x="500" y="0" /> <use xlink:href="#bosquet" x="550" y="0" /> <use xlink:href="#bosquet" x="600" y="0" /> <use xlink:href="#muret" x="650" y="0" /> <use xlink:href="#bosquet" x="700" y="0" /> <use xlink:href="#muret" x="750" y="0" /> <use xlink:href="#bosquet" x="800" y="0" /> <use xlink:href="#muret" x="850" y="0" /> <desc>intégration d'un gif animé</desc> <image x ="10" y="10" width="90" height="40" xlink:href="../images/chien.gif" id ='chien'/> <image x ="100" y="10" width="90" height="40" xlink:href="../images/chat.gif" id ='chat'/> </svg>

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

var chien = document.querySelector('#chien'); // variables objet var chat = document.querySelector('#chat'); var X = 900; // X récupère la largeur du viewBox var x_chien = 10 ; var x_chat = 110; setInterval(animate,50) ; // fonction animate exécutée 20 fois par seconde function animate() { x_chien = x_chien + 2 ; if(x_chien >= X) x_chien = -90 ; x_chat = x_chien + 100 ; chien.setAttribute('x', x_chien); chat.setAttribute('x', x_chat); }

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