//===== Texte au format UTF-8 =====
var div_balle; //
de la Balle
var timer; // pour l'animation avec setInterval
var x = 250; // balle au centre du cadre
var y = 150; // 1/2*(largeur_cadre, hauteur_cadre)
var dx = 5; // vecteur du mouvement de la balle
var dy = 2; // par exemple (5, 2)
var dt = 20; // temps en milli secondes entre chaque pas
var murDroit = 500 - 100; // largeur_cadre -largeur_balle;
var murBas = 300 - 100; // hauteur_cadre -hauteur_balle;
// appel tous le dt milli secondes
function avancerBalleDunPas() {
x = x + dx;
y = y + dy;
if (x < 0 || x > murDroit) { // rebond horizontal
dx = -dx;
} else if (y < 0 || y > murBas) { // rebond vertical
dy = -dy;
} else { // on change la position de la balle
div_balle.style.left = x + "px";
div_balle.style.top = y + "px";
}
}
// appel lors d'un clic sur la balle
function clicBalle() {
if (div_balle.className === "mobile") {
clearInterval(timer); // Stop
div_balle.className = "immobile"; // on change l'aspect
} else {
timer = setInterval(avancerBalleDunPas, dt); // on repart
div_balle.className = "mobile"; // on change l'aspect
}
}
// initialisation lors du chargement de la page HTML
function init() {
div_balle = document.getElementById("balle");
timer = setInterval(avancerBalleDunPas, dt); // chaque instant dt
}