Contrôle par le clavier

Code
Bibliothèque
Commentaires

Pour contrôler notre raquette via le clavier, nous devons faire deux choses :

détecter lorsque les touches gauche et droite sont enfoncées ;
et déplacer la raquette lorsque c'est le cas.

Pour gérer ces événements, nous allons créer deux fonctions onKeyDown() (appui sur une touche) et onKeyUp() (relâchement d'une touche) et les associer (via jQuery) aux événements correspondants.

Ainsi, dans notre fonction draw(), nous vérifierons si l'une ou l'autre des touches directionnelles est enfoncée et déplacerons la raquette en conséquence.

rightDown = false;
leftDown = false;

// En cas d'appui sur une touche
function onKeyDown(evt) {
  if (evt.keyCode == 39) rightDown = true; // La touche droite est enfoncée
  else if (evt.keyCode == 37) leftDown = true; // La touche gauche est enfoncée
}

// En cas de relâchement d'une touche
function onKeyUp(evt) {
  if (evt.keyCode == 39) rightDown = false; // La touche droite est relâchée
  else if (evt.keyCode == 37) leftDown = false; // La touche gauche est relâchée
}

$(document).keydown(onKeyDown); // Association de nos fonctions aux événements
$(document).keyup(onKeyUp);     // correspondants du clavier
       
function draw() {
  clear();
  circle(x, y, 10);

// Déplacer la raquette selon si gauche ou droite est actuellement enfoncée
  if (rightDown) paddlex += 5;
  else if (leftDown) paddlex -= 5;
  rect(paddlex, HEIGHT-paddleh, paddlew, paddleh); // Traçage de la raquette
 
  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;

if (y + dy < 0)
    dy = -dy;
  else if (y + dy > HEIGHT) {
    if (x > paddlex && x < paddlex + paddlew)
      dy = -dy;
    else
      clearInterval(intervalId);
  }
 
  x += dx;
  y += dy;
}

init();

À présent que nous avons une raquette, une animation, et une balle qui rebondit, notre jeu est presque terminé.

suiv. préc.