Minha solução (com variáveis true/false no sentido ao invés de número) | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Fiz essa solução, deu o mesmo resultado mesmo com algumas diferenças na lógica. Gostei, porque dá pra entender melhor o código, apesar de mais longo, rs.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0 0;
            padding: 0 0;
        }

        #canvas {
            border: 3px solid darkblue;
            background: lightgray;
        }
    </style>
</head>

<body>

    <canvas id="canvas" width="600" height="400"></canvas>


    <script>

        let quadro = document.getElementById('canvas');
        let pincel = quadro.getContext('2d');
        let x = 50;
        let indo = true;
        let voltando = false;

        function desenhaCirculo(x, y, raio, cor) {
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * Math.PI);
            pincel.fill();
            pincel.closePath();
        }

        function limpaCirculo() {
            pincel.clearRect(0, 0, 600, 400);
        }

        function bolaVai() {
            if (x <= 500) {
                desenhaCirculo(x, 50, 20, "blue");
                x++;
            } else {
                indo = false;
                voltando = true;
            }
        }

        function bolaVolta() {
            if (x >= 50) {
                desenhaCirculo(x, 50, 20, "blue");
                x--;
            } else {
                indo = true;
                voltando = false;
            }
        }

        function animaBolinha() {
            limpaCirculo();
            if (indo) {
                bolaVai();
            } else if (voltando) {
                bolaVolta();
            }
        }

        setInterval(animaBolinha, 10);

    </script>

</body>

</html>