Déplacer un "sprite" dans une scène avec JavaScript

Affichez la consol de débogage !!!

Le "sprite" (personnage de l'animation) est un gif animé !

Le code CSS et HTML

... <div style = "display : block ; width : 90% ; height : 300px ; position : relative ; background-image: url(../images/fond3.jpg) ; background-size : cover ; margin : auto ; " > <img id ='requin' src ='../images/requin.gif' style = "position : absolute ; top : 10px; left : 10px ; " > </div> <table> <tr><th></th><th><button id ='haut' >&uarr;</button></th><th></th></tr> <tr><th></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> ...

Commentaire du CSS

Une boîte DIV a pour image de fond une belle photo de fonds coralliens. Cette boîte a une largeur variable mais l'image de fond s'adapte toujours à aux dimensions de son conteneur grâce à la propriété background-size.
Dans cette boîte une image (un gif animé) est positionnée en absolu.

Commentaire HTML

Un clavier tactile est réalisé grâce à un tableau HTML contenant trois cellules non vides et remplies chacune avec une entité de caractère représentant une flèche.

Le script (extraits)

var zone = document.querySelector('div'); var requin = document.querySelector('#requin') ; var x = getComputedStyle(requin).left; var y = getComputedStyle(requin).top; document.querySelector('#droite').onclick = function() { console.log(x); x = parseInt(x) ; x+=40 ; x = x+"px"; requin.style.left = x ; } document.querySelector('#haut').onclick = function() {console.log(y); y = parseInt(y) ; y-=20; y = y+"px"; requin.style.top = y ; } // troisième fonction non mentionnée

Grâce au code on peut déplacer le requin vers la droite ou vers le bas ou vers le haut : trois fonctions anonymes.
Dans chacune des trois fonctions on modifie la valeur de top ou de left de l'élément.
J'ai rajouté dans le script et pour chacune des trois fonctions une instruction provisoire : console.log() !

Attention la méthode getComputedStyle(requin).left/top retourne une chaîne du genre "10px".
Donc il est impossible d'incrémenter (ou décrémenter) directement cette valeur !

Limite de cette animation : le requin peut sortir du "décor" !
En effet rien n'interdit que les valeurs de top, left soient négatives ou supérieures aux dimensions de la boîte parente.
Pour que l'image ne sorte pas de son conteneur il suffirait d'ajouter dans chacune des trois fonctions anonymes un test ; c'est pas très compliqué ...

Prolongements exercice

Retour menu