Déplacement d'un objet via le clavier

Utilisez les touches ← , ↑ , → et ↓ du clavier pour déplacer la boule.
Donc ne fonctionne pas sur tablette et smartphone.

Le code CSS et HTML

<style> #billard {position : relative ; width : 100% ; height :200px ; margin : 10px auto 10px auto ; background : lime ; } #boule {width : 20px ; height : 20px ; border-radius : 10px ; box-shadow : 5px 5px 5px gray ; position : absolute ; top : 90px ; left : 50% ; background : red ; } ... <body> ... <div id = "billard"> <div id ="boule"></div> </div>

Une boîte identifiée billard contient une boule. C'est cet élément qu'il faut déplacer avec le clavier.

Pour dessiner un rond il faut appliquer la propriété de style border-radius à une boîte carrée !

Le script

var billard = document.querySelector('#billard'); // variables objet var boule = document.querySelector('#boule'); var x; var y ; // programmation des touches de direction document.onkeydown = function(event) { if (event.keyCode == 37) gauche(); if (event.keyCode == 39) droite() ; if (event.keyCode == 38) haut(); if (event.keyCode == 40) bas() ; } // fin fonction // quatre fonctions de déplacement function gauche() { x = getComputedStyle(boule).left; x = parseInt(x); x= x-20; x = x + "px"; boule.style.left = x ; } function droite() {x = getComputedStyle(boule).left; x = parseInt(x); x= x+20; x = x+"px"; boule.style.left = x ; } function haut() {y = getComputedStyle(boule).top; y = parseInt(y); y= y-20; y = y+"px"; boule.style.top = y ; } function bas() {y = getComputedStyle(boule).top; y = parseInt(y); y= y+20; y = y+"px"; boule.style.top = y ; }

Les quatre touches du pavé directionnel sont programmées. Si appui sur l'une de ces touches appel d'un des quatre fonctions.
Deux fonctions pour changer la valeur de la propriété left de l'objet boule et deux fonctions pour augmenter ou diminuer la valeur de la propriété top.
La méthode getComputedStyle avec la propriété top/left retourne une chaîne telle "90px". Il faut donc convertir en entier puis incrémenter (ou décrémenter) puis rajouter "px". Bref c'est un peu lourd.

La boule peut sortir du billard. Mais ça ne serait pas très compliqué d'éviter cela ...
La programmation avec jQuery serait beaucoup plus simple en particulier grâce à l'emploi de la méthode offset().
Retour menu