Déplacement d'une boule via un clavier tactile

Le code de la page

Code SVG & HTML

... <svg width="80%" height="auto" style ='background : lime ; ' viewBox ="0 0 600 300"> <circle cx = '300' cy = '150' r = '10' fill = 'red' /> </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> ...

Dans le cadre du "responsive web design" la largeur du canevas SVG est exprimé en pourcentage du conteneur.

Le clavier tactile est un tableau avec quatre cellules non vides contenant chacune un bouton légendé par une entité de caractère.

Le script

Je vous communique que des extraits du script (quatre instructions sur huit).

// les variables X,Y contiennent les dimensions du repère var X = 600; ... // les variables cx et cy contiennent les coordonnées initiales du centre du rond var cx =$("circle").attr("cx"); cx = parseInt(cx); ... //quatre fonctions anonymes de déplacement : $("#gauche").click(function() { cx =cx -20 ; if(cx <=10) cx =10 ; $("circle").attr("cx",cx); }); $("#droite").click(function() { cx =cx +20 ;if(cx >=X-10) cx = X-10; $("circle").attr("cx",cx); }); ... ...

En JS traditionnel il y a une méthode "getters" et une méthode "setters". Alors qu'en Jquery c'est toujours la même méthode.
Ainsi la méthode attr() permet non seulement de récupérer un attribut mais aussi de le modifier.

La méthode attr() retourne une donnée de type string. Donc il faut convertir.

Quatre fonctions anonymes pour le déplacement de la boule. Chaque fonction associée à une touche du clavier tactile.
Retour menu