****************
1. CODE FIN 2016
****************
***********************************
2.DÉPLACER LA RAQUETTE VERS LE HAUT
***********************************
Notre raquette est collée au bas de la page. Nous allons la déplacer vers le haut. Rajouter une nouvelle constante (après EPAISSEUR_RAQUETTE):
const BORD_RAQUETTE = 40 ;
Dans la fonction dessinerTout, il faut changer le 2e paramètre de la 2e ligne :
dessinerRect(raquetteX, canvas.height-BORD_RAQUETTE, // <-- Ce paramètre
LARGEUR_RAQUETTE, EPAISSEUR_RAQUETTE, 'white');
Essayez ! La balle passe toujours au travers de la raquette !
******************************
3. REMETTRE LA BALLE AU CENTRE
******************************
Si on rate la balle,il faut la remettre au centre.
Ajouter la fonction remettreBalleAuCentre :
function remettreBalleAuCentre() {
balleX = canvas.width/2;
balleY = canvas.height/2;
}
Dans la fonction deplacerBalle, il faut appeler cette fonction : (
function deplacerBalle() {
balleX += vitesseX;
balleY += vitesseY;
if (balleX < 0) {
vitesseX *= -1;
}
if (balleX > canvas.width) {
vitesseX *= -1;
}
if(balleY < 0) {
vitesseY *= -1;
}
if(balleY > canvas.height) {
remettreBalleAuCentre(); // <-- cette ligne
}
}
Essayez ! La balle ne rebondit plus quand elle atteint le bas même si la raquette est au bon endroit ! C'est ce que nous allons corriger maintenant.
******************************************
4. FAIRE REBONDIR LA BALLE SUR LA RAQUETTE
******************************************
Dans la fonction deplacerBalle, ajoutez le code indiqué :
function deplacerBalle() {
balleX += vitesseX;
balleY += vitesseY;
if (balleX < 0) {
vitesseX *= -1;
}
if (balleX > canvas.width) {
vitesseX *= -1;
}
if(balleY < 0) {
vitesseY *= -1;
}
if(balleY > canvas.height) {
remettreBalleAuCentre();
}
var hautR = canvas.height-BORD_RAQUETTE; // <-- Début nouveau code
var basR = hautR + EPAISSEUR_RAQUETTE;
var gaucheR = raquetteX;
var droiteR = gaucheR + LARGEUR_RAQUETTE;
if (balleY > hautR &&
balleY < basR &&
balleX > gaucheR &&
balleX < droiteR) {
vitesseY *= -1;
} // <-- Fin nouveau code
}
Essayez : la balle ne rebondit que si elle touche la raquette !
5) Changer l'angle de rebond
La balle rebondit toujours de la même façon. C'est vite ennuyeux !
Dans deplacerBalle, complétez le code comme ci-dessous :
if (balleY > hautR &&
balleY < basR &&
balleX > gaucheR &&
balleX < droiteR) {
vitesseY *= -1;
var centreRaquetteX = raquetteX+LARGEUR_RAQUETTE/2;
var distBalleCentreRaquette = balleX - centreRaquetteX;
vitesseX = distBalleCentreRaquette * 0.35;
}
Essayez : si vous touchez la balle avec le bord de la raquette, elle ne rebondit pas pareil qu'au milieu ! Si vous voulez changer l'effet rebond, il faut changer la valeur 0.35. Si vous mettez par example 0.7, la balle va trop vite. Si vous mettez 0.1, elle va trop lentement.