Entrar Ainda não tem acesso?
3
respostas

Podem me informar o que estou errando no código? O uso do for nesse caso faz sentido? Fiquei confusa.

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Trocando de cor

por Bianca Estefani Machado de Araújo
| 16.4k xp | 4 posts
<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var cores = ['blue', 'green', 'red'];


        function coresAleatorias(cores) {

            for (var coresAleatorias = coresAleatorias + 1; coresAleatorias > 0; coresAleatorias++) {

             }

             return false; 
     }

        function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;               

        pincel.fillStyle = coresAleatorias();
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

            }



    tela.onclick = desenhaCirculo;

    function mudaCor () {

        alert('Funcionou!');
        return false;
    }

        tela.oncontextmenu = mudaCor;


</script>
3 respostas
por ALAN DOS ANJOS
| 123.5k xp | 30 posts
Coordenador Financeiro

Oi Bianca!

Não faz sentido porque você não vai criar uma repetição até que algo seja sim... Esta atividade eu acabei de resolver com o uso de if ...

Vou postar meu código pra você ver, esta parecido com o do professor

<meta charset="UTF-8">
    <canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    var cores = ["blue", "red", "green"];
    var indiceCor = 0;

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCor];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        //console.log(x + ',' + y);
    };

    function mudaCor() {
       console.log(cores[indiceCor])
        if (indiceCor == (cores.length -1)) {
            indiceCor = 0
        } else if (indiceCor < cores.length) {
            indiceCor++
        };

        return false;
    };

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;

</script>
por Vamberto Fernandes De Souza Junior
| 46.6k xp | 37 posts

Boa noite Bianca, então, você criou uma fórmula "vazia".

function coresAleatorias(cores) { for (var coresAleatorias = coresAleatorias + 1; coresAleatorias > 0; coresAleatorias++) { } return false; }

Você criou a variável, o incremento e o ponto de parar, mas cadê o que a fórmula precisa fazer enquanto está "rodando"? Além de ter colocado um parâmetro entre parênteses (cores) para que a fórmula se "ative".

Dessa maneira, acertando essa fórmula (dizendo o que ela precisa fazer e retirando o parâmetro), a cada clique do botão esquerdo a cor muda e o objetivo é a cor mudar quando é clicado o botão direito sendo controlado pelo usuário.

Essa função entraria no lugar da mudaCor do código base do exercício. em vez de aparecer funcionou, iria ativar sua fórmula e alterar a cor.

por Bianca Estefani Machado de Araújo
| 16.4k xp | 4 posts

Boa noite!

Entendi. Vendo as respostas ficou muito mais claro o porque meu código não está correto.

Muito obrigada :D