Déplacement d'un "sprite" dans un canevas SVG

Un "sprite" ou lutin est un terme employé dans les jeux vidéos.
Il désigne un personnage inséré dans un décor et qui peut être déplacé. Le lutin peut lui être animé (un gif animé).
Vous avez dans la première partie de ce tuto comment insérer une image matricielle (jpg ou gif) dans une zone SVG : balise image xlink:href = ....
Dans l'exemple de cette page on ne se contente pas de l'insérer ; on le déplace via un clavier.

Le code HTML & SVG

... <svg viewBox ="0 0 600 400" width="100%" height="auto" style ="background : url(../images/fond3.jpg) ; margin : auto ; background-size : cover ; "> <image xlink:href="../images/requin.gif" width="100" height="70" x = '300' y ='200' id ='requin'/> </svg> <table> <tr><th></th><th><button id ='haut' >&uarr;</button></th><th></th></tr> <tr><th><button id ='gauche'>&larr;</button></th><th></th> <th><button id ='droite'>&rarr;</button></th></tr> <tr><th></th><th><button id = 'bas'>&darr;</button></th><th></th></tr> </table> ...

Aucune difficulté. La balise SVG est un élément HTML de la page donc on peut lui appliquer la propriété CSS background.
Le canevas SVG est adaptatif : largeur égale à 100% de celle du conteneur.
L'image gif est insérée avec une dimension de 100 par 70.

Le script

var zone = document.querySelector('svg'); var requin = document.querySelector('#requin') ; var x = requin.getAttribute('x'); var y = requin.getAttribute('y'); console.log("positionX du requin " + x +" " + typeof(x)); console.log("positionY du requin " + y +" " + typeof(y)); // x et y sont initialement de type string donc conversion nécessaire x =parseInt(x) ; y = parseInt(y); X = 600; Y = 400; x_maxi = X-100 ; y_maxi = Y-70; document.querySelector('#droite').onclick = function() { x+=30; if (x >= x_maxi) x = x_maxi; requin.setAttribute('x',x); } document.querySelector('#gauche').onclick = function() { x-=30 ; if (x <= 0) x = 0 ;requin.setAttribute('x',x); } document.querySelector('#haut').onclick = function() { y-=20 ; if (y <= 0) y = 0 ; requin.setAttribute('y',y); } document.querySelector('#bas').onclick = function() { y+=20 ; if (y >= y_maxi) y = y_maxi; requin.setAttribute('y',y); }

Attention la méthode getAttribute retourne une donnée de type string !
Le requin ne peut sortir du décor grâce à des tests.
Retour menu