A bolinha não sobe. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Hello work!

Alguém poderia me ajudar? A circunferência se movimenta em praticamente todas as direções, mas não sobe. O que fiz de errado?

Rsrsrsrsr!

<script type="text/javascript">
        var screen = document.querySelector("canvas");
        var brush = screen.getContext ("2d");
        brush.fillStyle = "gray";
        brush.fillRect (0,0,600,400);
        var x = 20;
        var y = 20;
        var top = 38;
        var down = 40;
        var right = 39;
        var left = 37;
        var rate = 10;
        function displayCircle(x,y,radius){
            brush.fillStyle = "blue";
            brush.beginPath();
            brush.arc(x,y,radius,0,2*Math.PI);
            brush.fill();
        }
        function clear(){
            brush.fillStyle = "gray";
            brush.fillRect (0,0,600,400);
        }
        function update(){
            clear();
            displayCircle(x,y,10);
        }
        setInterval(update,20);
        function readKeyBoard (event){
            if(event.keyCode==top){
                y=y-rate;
            }else if (event.keyCode==down){
                y=y+rate;
            }else if (event.keyCode==left){
                x=x-rate;
            }else if (event.keyCode==right){
                x=x+rate;
            }
        }
        document.onkeydown = readKeyBoard;
    </script>

Fala Victor!

Não sei se já descobriu o problema, mas estava passando pelo fórum e vi seu problema agora parei para tentar ajudar.

Cara, acontece que "top" é um elemento da classe Window. Então, quando ele faz a comparação, ele está utilizando as atribuições deste elemento e não o valor "38".

Então tem que mudar para outro nome como "toTop" por exemplo... (É por essas e outras que eu prefiro usar o bom e velho português... rsrs) Daí já funciona!

Dica:

Ao invés de "var", declarar a variável usando o "const" (que na minha opinião seria o mais correto, visto ser um valor constante), ou utilizando "let" que é mais utilizado atualmente para declaração de variáveis. Obs.: Realmente, não foi explicado isso no curso ainda, mas dá uma pesquisada se quiser saber mais;

Outra: Não precisa usar o "setInterval" neste exercício. Fiz alguns ajustes no seu código para funcionar sem ele e ficou assim:

<script type="text/javascript">
    var screen = document.querySelector("canvas");
    var brush = screen.getContext ("2d");
    brush.fillStyle = "gray";
    brush.fillRect (0,0,600,400);
    var x = 20;
    var y = 20;
    const toTop = 38;   //alterado
    const down = 40;    //alterado
    const right = 39;   //alterado
    const left = 37;    //alterado
    const rate = 10;    //alterado

    displayCircle(x,y,rate);    //incluído

    function displayCircle(x,y,radius){
        brush.fillStyle = "blue";
        brush.beginPath();
        brush.arc(x,y,radius,0,2*Math.PI);
        brush.fill();
    }
    function clear(){
        brush.fillStyle = "gray";
        brush.fillRect (0,0,600,400);
    }
    function update(){
        clear();
        displayCircle(x,y,10);
    }
    // setInterval(update,20);  retirado
    function readKeyBoard (event){
        if(event.keyCode==toTop){
            y=y-rate;
        }else if (event.keyCode==down){
            y=y+rate;
        }else if (event.keyCode==left){
            x=x-rate;
        }else if (event.keyCode==right){
            x=x+rate;
        }
        update();   //incluído
    }
    document.onkeydown = readKeyBoard;
</script>

Espero ter ajudado!

Por favor, não esqueça de marcar como solucionado para eu receber seu feedback blz!?

Abraços e bons estudos!