Cette semaine, une base de script pour faire un rebond façon pong avec un algorithme simplifié.
Pour la partie « mathématiques », le rebond consiste à inverser la direction du mouvement (en x comme en y selon le mur).
Si vous avancez de deux pas devant vous, pour simuler un rebond contre un mur, dès que vous serez contre le mur, il faudra avancer de moins deux pas (ou reculer de deux pas), on maintient ainsi la même vitesse.

Pour la partie code, la boucle dessine() est optimisée pour une vitesse d’affichage de 60 images par seconde, avec l’usage de requestAnimationFrame(), il s’agit d’un setInterval plus optimisé pour les animations fluides.

Note : ce code n’est pas parfait, GSAP est là pour une éventuelle amélioration et le déplacement du rectangle serait plus optimisé avec un translation « transform ».
// je sélectionne mon rectangle
var rect = document.querySelector("rect");
// j'assigne à celui-ci un déplacement en x et en y
rect.vx = 2;
rect.vy = 3;
 
// je crée une fonction dessine avec un auto appel rAF (boucle) à la fin de celle-ci
function dessine() {
  // je récupère les attr x et y du rect dans le svg
  var a = Number(rect.getAttribute("x"));
  var b = Number(rect.getAttribute("y"));
  // si ces points sont hors cadre, j'inverse le déplacement, c'est le test de collision et le rebond
  if (a < 0 || a > 350) {
    rect.vx = -rect.vx;
  }
  if (b < 0 || b > 350) {
    rect.vy = -rect.vy;
  }
  // je mets à jour x et y
  TweenMax.set(rect, {
    attr: {
      x: a + rect.vx,
      y: b + rect.vy
    }
  });
  // la boucle rAF = 60fps si possible
  window.requestAnimationFrame(dessine);
}
 
// je lance la fonction
dessine();

See the Pen SVG rect /dessine by Benoît Wimart (@benoitwimart) on CodePen.0