Déplacer un "sprite" dans une boîte avec JavaScript

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 coraliens. Cette boîte a une largeur variable mais l'image de fond s'adapte toujours à ses dimensions 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 chacunes avec une entité de caractère représentant une flèche.

Le script

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() { x = parseInt(x) ; x+=40 ; x = x+"px"; requin.style.left = x ; } document.querySelector('#haut').onclick = function() { y = parseInt(y) ; y-=20; y = y+"px"; requin.style.top = y ; } document.querySelector('#bas').onclick = function() { y = parseInt(y) ; y+=20; y = y+"px"; requin.style.top = y ;}

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.

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