Jeu de casse briques en javascript
Activité 1: Javascript, jeu de casse briques
I. Introduction à jsfiddle
https://jsfiddle.net/
II. Programmation par étapes du jeu de casse-briques
Les différentes étapes peuvent se faire sur jsfiddle, pour chacune des petits jeux/exercices permettent de vous assurer d'avoir bien compris le code.
https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
a- Création de la page HTML et de l'objet canvas
exercice : Changer le titre de la page html par un titre que vous choisissez
exercice : Changer le code pour obtecir un objet canvas de 400 pixels x 400 pixels
b- Code javascript, création des variable pour manipuler l'objet canvas:
exercice : simplifiez en une ligne l'expression :
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
c- Dessin sur le canvas : rectangle, cercle, remplissage:
exercice : créer 10 cercles d'un diamètre de 10 pixels sur une ligne horizontale à a position y = 20 pixels en utilisant une boucle FOR :
for (let compteur = 0; compteur < 10; compteur ++) {
}
exercice : créer 20 cercles d'un diamètre de 3 pixels sur une ligne horizontale à a position y = 20 pixels en utilisant une boucle WHILE :
let compteur = 10;
while (compteur < 20) {
compteur ++;
}
https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
a - Création de la boucle de dessin
b - Déplacement de la balle
exercice : changer la vitesse de déplacement de la balle
exercice : D'après le code, quelle est, en pixel par seconde, la vitesse de la balle ?
c - Mise à jour du canvas à chaque image
exercice : faites en sorte que le canvas soit nettoyé seulement une image sur 2.
exercice : changer les noms des fonctions draw(..) et drawball(..) par des noms de votre choix
exercice : créer un fichier html et faites tourner votre code dans votre navigateur
a - Detection des collisions
exercice : dessiner une balle carré
exercice : changez le nom de la variable 'ballRadius' par 'rayonDeLaBalle'
b - Rebondir en haut et en bas
c - rebondir à droite et à gauche
exercice : changez le code pour que la balle rebondisse seulement sur le coté droit et gauche
lorsqu'elle dépasse les bords haut et bas elle se retrouve sur le côté opposé.
exercice : puis faites en sorte que la balle ne rebondisse jamais mais se retrouve toujours dans l'écran (si elle touche le mur droit, elle doit ré-apparaître à gauche...)
d - Detecter les collisions
exercice : Faites tourner votre code dans votre fichier .html local.
https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls
a - Création de la raquette pour taper la balle.
exercice : changer le nom des variables 'paddleHeight', 'paddleWidth', 'paddleX' pour des noms plus explicites de votre choix (en français)
b - Contrôle de la raquette par l'utilisateur:
exercice : changer le nom des variables 'rightPressed', 'leftPressed', 'paddleX' pour des noms plus explicites de votre choix (en français)
exercice : changer le nom des fonctions 'keyDownHandler' et 'keyUpHandler' pour des noms plus explicites de votre choix (en français)
c - Logique du déplacement de la raquette
exercice : faites tourner votre code dans votre fichier .html et dans le navigateur.
exercice : faire en sorte que la fin de partie se produise juste si la balle touche les 50 premiers pixels à gauche du sol.
b - Faire rebondir la balle sur la raquette
exercice : Faites en sorte que la balle accélère quand elle touche la raquette.
a - Mettre en place les variables "Brique"
exercice : changer les noms de variables necessaires à la construction des briques pour qu'elle soient plus explicites (noms en français).
b - Logique de dessin des briques
exercice : changer le nom de la fonction drawBricks en un nom plus explicite de votre choix
exercice : réécrire la fonction drawBricks en utilisant deux boucle WHILE.
exercice : réécrire la fonction drawBricks en utilisant une boucle FOR et une boucle WHILE.
c - Afficher les briques
ETAPE 7: Collisions
a - Une fonction de détection de collision
exercice : réécrire la fonction collisionDetection() en utilisant des boucles WHILE b - Faire disparaître les briques après qu'elles aient été touchées exercice ( difficile !) : faire en sorte que les briques soient dessinées en deux couleurs tirées au hasard lors de la créations des briques. c - Suivi et mise à jour de l'état dans la fonction de détection de collision
ETAPE 8: Suivi du score
a - Compter le score
exercice : faites en sorte que le score soit écrit sur un fond violet.
exercice : faites en sorte que le score soit écrit en bas et à droite de l'écran.
b - Affichage d'un message gagnant lorsque toutes les briques ont été détruites
ETAPE 9: Suivi du score
a - Écouter le mouvement de la souris
b - Ancrage du mouvement de la palette au mouvement de la souris
exercice : Augmenter la sensibilité de la souris
ETAPE 10: FIN !!!
a - Donner des vies au joueur
b - Rendu de l'affichage des vies
exercice : Changer la couleur de fond du rendu du nombre de vies et faites en sorte que le rendu soit fait en haut et à droite de l'écran.
exercice supplémentaire (POUR LES CHAMPIONS) : Modifier le code pour qu'il y ait 2 balles au lieu d'une.
keyDownHandlerkeyDownHandler