Rebonds
Objectif : réaliser une animation dans laquelle la balle rebondit sur les bords du cadre.
Le sens des incréments (positifs, négatifs) en x et en y est rappelé ci-dessous.
On donne : R : Rayon de la balle, W : Largeur du rectangle, H : Hauteur du rectangle
Q10 / INDIQUER, en fonction de W, H et R, les conditions logiques indiquant que la balle touche la bordure : ADAPTER l'exemple, donné ci-dessous pour la bordure n°1 aux autres bordures.
Exemple : Bordure 1
\(x \ge R\) ET \(x \le (W-R)\) ET \(y=R\)
Remarque : Autre écriture
\(x \ge R\) ET \(x \le (W-R)\) peut s'écrire : \(R\le x \le(W-R)\)
Bordure 2 :
Bordure 3 :
Bordure 4 :
On élabore maintenant un algorithme à partir des conditions initiales ci-dessous.
Variable globale | Signification | Unité | Condition initiale |
|---|---|---|---|
x | Position en x du centre de la balle | pixel | 6 |
y | Position en y du centre de la balle | 6 | |
W | Largeur max | 170 | |
H | Hauteur max | 150 | |
R | Rayon de la balle | 6 | |
a | Incrément du déplacement en x (entier) | 1 | |
b | Incrément du déplacement en y (entier) | 1 |
Q11 / COMPLÉTER l'algorithme proposé.
CRÉER un fichier « Rebonds.html » et le script « Rebonds.js » associé.
Q12 / COMPLÉTER, à partir de l'algorithme élaboré, le script. TESTER le fonctionnement.
Validation professeur
Remarque : Valeur des incréments a,b
Avec comme position d'origine un des angles, l'animation ne donne pas toujours de bons résultats.
Ainsi, dans le cas particulier a=b=1 ET si la largeur W et la hauteur H du rectangle sont égales, alors la balle parcourt indéfiniment la diagonale, depuis la position origine.
Q13 / TESTER le fonctionnement en modifiant :
les dimensions H et/ou W (dans la limite du context qui fait 300 x 300)
les incréments a et/ou b
la position initiale de la balle
Complément : Pour aller plus loin
Pour rendre les rebonds plus crédibles pour un (futur) jeu (voir séquence ultérieure), les incréments pourraient être générés de manière aléatoire à chaque rebond.
EFFECTUER les modifications nécessaires, TESTER le fonctionnement.
La fonction getRandom(min, max) est donnée ci-dessous.
La fonction Math.random() renvoie un flottant compris dans l'intervalle [0 ... 1[.