Problème sur le rebond d'une balle

Bonjour j’aimerais faire rebondir une balle dans mon écran je pense savoir d’où vient le problème. Le problème vient de la variable largueur car en soit le code marche mais quand la balle recule de 1px elle réavance.Je sais pas comment le régler voici ci-dessous :

const ball = document.querySelector('#ball');

// - Dès qu'elle touche le bord droit, elle repart dans l'autre sens (vers la gauche)
// - Dès qu'elle touche le bord gauche, elle repart dans l'autre sens (vers la droite)

let largueur = (document.body.clientWidth)-25;
let isABall =setInterval(function () {
    if (ball.offsetLeft <= largueur){
            ball.style.left = (ball.offsetLeft + 1) + "px";
    } else {
            ball.style.left = (ball.offsetLeft - 1) + "px";
    }
}, 1);

Le problème vient du fait que la balle ne recule que lorsque ball.offsetLeft > largueur, mais à peine aura-t-elle reculé de quelques pixels que cette condition sera fausse à nouveau, et la balle arrêtera déjà de reculer.

Tu ne peux pas atteindre ton but sans mémoriser un état. Il faut donc que tu stockes la direction de la balle dans une variable dont l’état change à chaque fois que balle atteint le bord de l’écran.

si j’ai bien compris il faut créer un variable qui enregistre la position de la balle quand elle touche le bord de mon écran

d’accord il faut que créer un variable avec ball.style.left = (ball.offsetLeft + 1) + "px"; pour aller a gauche et ball.style.left = (ball.offsetLeft - 1) + "px"; pour aller a droite. C’est ça?

Bon je pense que je vais mettre cette exercice de coté pour l’instant car je ne comprends vraiment pas. Merci a vous de m’avoir aidé