Apprentissage JavaScript

Un exercice dirigé : Faire Un Pong En JavaScript

Introduction

L'exercice avait pour but de nous apprendre les bases en javaScript.

Après avoir étudié les éléments de syntaxe de base :

• définitions et utilisation de variables en Java Script
• manipulation de tableaux,
• manipulation de condition,
• fonctions
• Apprendre à rechercher une information sur les sites de références

Il nous a été demander de concevoir un jeux en suivant les étapes recommandations de notre formateur, présenté en une série de petits exercices a réaliser.

Le HTML et la feuille de style associé nous étaient fourni

1. Exercice N°1 : Gérer les controlles de la bare de droite
   
2. Exercice N°2 : Gérer les controles de la barre de gauche
3. Exercice N°3 : Créer une boucle de jeux
   
4. Exercice N°4 : Appliquer des mouvement à la barre de droite
5. Exercice N°5 : Appliquer des mouvement à la barre de gauche
6. Exercice N°6 : Mettre la balle en mouvement
7. Optionnel : Optimisation
   

Réalisation:

Exercice N°1 :

déclaration des variables "let rightBarUp = false" et "let rightBarDown = false"

utilisation d’événement "keyup" et "keydown" attaché aux flèches du clavier "ArrowUp" et "ArrowDown"

utilisation de la console pour vérifier le comportement

Exercice N°2 :

déclaration des variables "let leftBarUp = false" et "let leftBar Down = false"

utilisation d’événement "keyup" et "keydown" attaché aux touches "z" et "s" du clavier

utilisation de la console pour vérifier le comportement

Exercice N°3 :

Création d'une boucle de jeux par la mise en place d'une fonction "gameLoop" utilisant "requestAnimationFrame()"

Exercice N°4 :

Création d'une fonction "moveRightBar" d’après les instruction :

• Récupérer la div avec les class ".bar.right"
• Obtenez sa position vertical avec "element.offsetTop" (pixel)
• Obtenez sa taille en hauteur avec "element.clientHeight" (pixel)
• Obtenez la hauteur de l'écran avec "document.documentElement.clientHeight" (pixel)
• Si la variable "rightBarUp" est vrai, déplacer la barre vers le haut en calculant sa nouvelle position (attention la bar ne doit pas sortir de l'écran). Vous pouvez utiliser `element.style.top = 'XXpx'` pour assigner sa nouvelle position !
• Si la variable "rightBarDown" est vrai, déplacer la bar vers le bas en calculant sa nouvelle position (attention la bar ne doit pas sortir de l'écran). Vous pouvez utiliser `element.style.top = 'XXpx'
• Lancer la fonction "moveRightBar" à l'intérieur de la fonction "gameLoop" :)

Exercice N°5 :

Création d'une fonction "moveLeftBar" avec les même instruction que pour l'exercice N°4 :

Exercice N°6 :

Faire bouger la balle grâce a une fonction "moveBall()" exécuter dans notre gammeLoop.

précision la balle rebondit sur les "murs et les barres"

Bonus :

Optimiser son code :

• Organiser et structurer son code
  
• re-factoriser au besoin
  
• suppression des commentaires innutile
  
• ajout d'option de parametrages