Pour le déplacement de la raquette du joueur (la bleue), nous allons choisir la touche left ('flèche gauche' du clavier) pour son déplacement vers la gauche et la touche right ('flèche droite' du clavier) pour son déplacement vers la droite.
Déclarer les variables leftPressed et rightPressed.
leftPressed ('flèche gauche' pressée) pour cibler la touche left ('flèche gauche' du clavier).
Nous lui attribuons la valeur false (faux) qui correspond à son état initial.
rightPressed ('flèche droite' pressée) pour cibler la touche right ('flèche droite' du clavier).
Nous lui attribuons la valeur false (faux) qui correspond à son état initial.
La méthode addEventListener() (écouteur d'événement).
Cette méthode va nous permettre de savoir si le joueur presse une touche.
Créer les fonctions keyDown() et keyUp().
Ces fonctions vont prendre pour argument l'indice (e) qui correspond au code de reconnaissance de chaque touche du clavier.
Le code pour la touche left est le 37.
Le code pour la touche right est le 39.
Dans ces fonctions, nous allons utiliser l'instruction 'if, else if' (si, si autre) qui va exécuter le code si la condition soumise est vraie.
Si la touche left est pressée l'écouteur d'évenement "keydown" va lancer l'exécution de la fonction keyDown().
La fonction keyDown() va déclarer la condition
if (e.keyCode == 37) vraie et exécuter le code leftPressed = true (vrai)
Si la touche left n'est pas pressé l'écouteur d'évenement "keyup" va lancer l'exécution de la fonction keyUp().
La fonction keyUp() va déclarer la condition
if (e.keyCode == 37) vraie et exécuter le code leftPressed = false (faux)
Même chose pour la touche right.
Créer la fonction moveRaquette1() à la suite de la fonction ball60().
Dans cette fonction moveRaquette1() nous allons utiliser l'opérateur logique ET(&&).
Avec l'opérateur logique ET (&&) toutes les conditions doivent être remplies pour que le code soit exécuté.
if(leftPressed && raquette1x > 0)
Si la touche left est pressée ET que la coordonnée x de la raquette1 est supérieur à 0.
raquette1x -= 10
La valeur de la coordonnée x de la raquette1 diminue de 10 entrainant ainsi le déplacement de la raquette1 de 10 pixels vers la gauche.
if(rightPressed && raquette1x < canvas.width - raquette1Width)
Si la touche right est pressée ET que la coordonnée x de la raquette1 est inférieur à la largeur du canvas moins la largeur de la raquette1.
raquette1x += 10
La valeur de la coordonnée x de la raquette1 augmente de 10 entrainant ainsi le déplacement de la raquette1 de 10 pixels vers la droite.
La méthode requestAnimationFrame
Cette méthode prévient le navigateur de l'exécution d'une animation.
Cette méthode prend en argument le nom de la fonction dans laquelle se situe l'animation.
La méthode clearRect
Cette méthode placée au début de la fonction jeu() va supprimer tout contenu précédemment dessiné et ainsi laisser apparaître le mouvement de la raquette1.
Cette méthode prend 4 arguments.
(0,0) correspondant aux coordonnées du point à partir duquel la suppression du contenu doit être effectuée.
canvas.width correspond à la largeur du canvas.
canvas.height correspond à la hauteur du canvas.
Appeler la fonction moveRaquette1() dans la fonction jeu().
Enregistrer le code dans l'éditeur.
Actualiser la page du navigateur.