Duvida | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

pensei em uma solução, mas não consegui aplicá-la, teriam alguma sugestão pra ela funcionar?

<canvas width = '600' height = '400'> </canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillstyle = 'lightgray';
    pincel.fillrect = (0, 0, 600, 400);

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

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


    var x = 20;

    var direção = x++

        function atualizaTela() {

            limpaTela();
            desenhaCirculo(x, 20, 10);
                if(x > 590){
                x++;
            }

                if(x = 590){
            x--;
            }

        }

        setInterval(atualizaTela, 10);



</script>

Olá... eu ñ sou muito experiente com Javascript, mas percebo algumas coisas no seu código:

1-) "var direção = x++" está sem ponto e vírgula no final, não é usada para nada, está escrito com acentuação, o que não é uma boa ideia já que o mundo da programação é quase que totalmente em inglês 2-) if(x > 590){ x++;} nesse ponto voce só acresce uma vez o x se e somente se ele for maior que 590, o que nunca irá acontecer pois ele é iniciado em 20 3-) if(x = 590){x--;} aqui é parecido com o anterior... só executará uma vez o decréscimo quando x atingir o valor exato de 590

Vamos estudando que uma hora a solução chega... eu tbm não estou conseguindo, mas estou me esforçando pra não olhar a resposta.

Mergulhe em programação