Déplacement d'une boule via un clavier tactile

Le code de la page

Code SVG et HTML

... <svg viewBox ="0 0 600 400" width="60%" height="60%" style ='background : lime ; '> <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 de la zone de dessin SVG est exprimée en pourcentage.

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

Le script (extraits)

var svg = document.querySelector('svg'); var boule = document.querySelector('circle'); // les variables X,Y contiennet les dimensions du canevas var X = 600; var Y = 400; // les variables cx et cy contiennent les coordonnées initiales du centre du rond var cx = boule.getAttribute('cx'); cx = parseInt(cx); var cy = ... document.querySelector('#droite').onclick = droite; document.querySelector('#gauche'). ... = gauche; ... = haut; ... function gauche() { cx= cx - 20 ; if(cx <=10) cx = 10; boule.setAttribute('cx',cx); } function droite() { cx= cx + 20 ; if(cx >=X-10) cx = X-10; ... } function haut() { cy= cy - 10; ... ; ... } function bas() { ... ; ... ; ...}

Les variables X et Y contiennnent les dimensions du repère défini dans le viewBox.
On récupère les coordonnées du centre du rond dans les variables cx et cy.

La méthode getAttribute retourne une donnée de type string. Il faut donc convertir !

Dans le code JS on a quatre fonctions de déplacement de la boule.
Chaque fonction associée à une touche du clavier tactile. La boule ne doit pas sortir du billard. Retour menu