Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dificuldade para resolver os exercícios.

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Movendo elementos: animações simples e atividade Movendo a bolinha pelo teclado

por Mike Andrade de Oliveira
| 58.5k xp | 15 posts
Consultor de Vendas

Fala pessoal, tudo bem?

Tenho enfrentado alguma dificuldade para resolver os últimos exercícios propostos pelo professor. Muita das vezes só consigo resolvê-los quando procuro sobre no fórum e pego alguns insights (tento ao máximo não ver a resolução completa, mas as vezes uma única linha de código me aponta o caminho por onde seguir e aí consigo resolver).

Isso é normal? Tenho feito alguma coisa muito errada?

Na maioria das vezes acabo descobrindo que meu pensamento não estava de todo indo pelo caminho errado, mas é sempre um detalhe ou outro que tenho deixado pelo caminho que faz meu código sair errado. As vezes usando coisas além do necessário, outras vezes menos.

Obrigado!

2 respostas
por Mike Andrade de Oliveira
| 58.5k xp | 15 posts
Consultor de Vendas

O meu código para esse exercício ficou desta forma. Acabei incrementando para que a bolinha não ultrapassasse as bordas do canvas:

<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);

    var x = 20;
    var y = 20;

    // códigos do teclado

    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;

    // taxa de incremento

    var taxa = 10;

    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);
    }

    function atualizaTela() {

        limpaTela();
        desenhaCirculo(x, y, 10);
    }

    setInterval(atualizaTela, 20);

    function leDoTeclado(evento) {

        if(evento.keyCode == 37) { if(x > 10) {x = x - taxa;}}
        if(evento.keyCode == 38) { if(y > 10){y = y - taxa;}}
        if(evento.keyCode == 39) { if(x < 590){x = x + taxa;}}
        if(evento.keyCode == 40) { if(y < 390){y = y + taxa;}}
    }

   document.onkeydown = leDoTeclado;

</script>
solução!
por Estudante
| 211k xp | 88 posts

Não sei como está sendo a sua rotina de estudos, mas se você "perde" um conceito que poderia ajudar na solução, eu sugiro uma revisada nesse último tópico de "Lógica de Programação 2", você deve estar vendo muitas aulas em um dia e acaba por não absorver direito. Tenha calma e coloque em prática, o que ele digita você digite também não só o "copiar código", pois vai forçar você a "decorar" o assunto. Espero ter ajudado. A minha última resolução ficou assim:

<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);

    var x = 20;
    var y = 20;

    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);
    }

    function atualizaTela() {

        limpaTela();
        desenhaCirculo(x, y, 10);
    }

    setInterval(atualizaTela, 20);

    function leDoTeclado(evento) {

        if (evento.keyCode == 37) {
            x -= 10;
        } else if (evento.keyCode == 38){
            y -= 10;
        } else if (evento.keyCode == 39) {
            x += 10;
        } else {
            y += 10;
        }
    }

   document.onkeydown = leDoTeclado;

</script>