Não consegui fazer o Exercicio | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por José Augusto

| 32.6k xp | 16 posts

Assistente de Conteúdo

Professor é comum um desenvolvedor travar em um problema. E demorar horas e horas sem conseguir resolver? Estava tentando e não consegui. Segue o código

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

<script>

    function desenhaBarra(x, y, serie, cores, texto) {

        var cores = ['blue', 'green', 'yellow', 'red'];
        var serie2015 = [50, 25, 20, 5];
        var serie2016 = [65, 20, 13, 2];

        for (var i = 0; i < cores.length; i++) {


            serie = cores[i];

            var tela = document.querySelector('canvas');
            var pincel = tela.getContext('2d');

            pincel.fillStyle=cor;
            pincel.fillRect(x,y, 100, serie);
            pincel.strokeStyle='black';
            pincel.strokeRect(x,y, 100, serie);

        }
    }

    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }


    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');

    /* var cores = ['blue', 'green', 'yellow', 'red'];
     for (var i = 0; i < cores.length; i++) {

         serie = cores[i]; 

           console.log(serie);
    } */
</script>

4 respostas

por FABIO

| 35.5k xp | 46 posts

28/02/2017

Ola Jose,

Sou novato na área tbm e algumas vezes fico mais de 1 dia tentando resolver um problema, até durante o sono rsrsrsr. Acho que isso é bom que acaba ajudando a pensar em varias coisas e fixando melhor as coisas. Por isso não vou colocar por definitivo a solução aqui, mas vou corrigir algumas coisas e lhe dar uma ideia para a resolução do exercício.

A primeira observação, é quanto aos dados gerais que foi colocado dentro da função e quando voce chama estes dados em "desenhaBarra(50, 50, serie2015, cores, '2015');" eles não estão acessíveis por isso eles tem que estar declarados antes da chamada "desenhaBarra"

    var cores = ['blue', 'green', 'yellow', 'red'];
    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];

    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');

Outra observação e quando ao desenho dos retângulos de cada série. No seu código está o seguinte:

serie = cores[i];
pincel.fillStyle=cor;
pincel.fillRect(x,y, 100, serie);
pincel.strokeStyle='black';
pincel.strokeRect(x,y, 100, serie);

A linha "serie = cores[i];" está errada e tbm não era necessária, pois voce poderia fazer direto "pincel.fillStyle=cores[i];", mas aproveitando seu cógido poderia corrigir a linha "serie = cores[i];" para "cor = cores[i];"

Quanto as linhas "pincel.fillRect(x,y, 100, serie);" e "pincel.strokeRect(x,y, 100, serie);" a variável "serie" se trata de um vetor com diversos número, então faltou acrescentar o ponteiro "i" para indicar qual posição você ira pegar os dados. Corrigindo o problema, você terá que alterar "serie" para "serie[i]".

Agora a ultima é mais importante que deixarei para voce solucionar e caso nao consiga avise que completo para voce, mas acho importante você tentar resolver.

Dica:

Cada série possui retangulos que vão se completando um em baixo do outro.

Por exemplo: serie2015
|------------|
| blue       |
|------------|
| green      |
|------------|
| yellow     |
|------------|
| red        |
|------------|

Observe que todos os retangulos estão na mesma coordenada "x" o que varia é a coordenada "y" pois cada retangulo é desenhado um em cima do outro.

Quando ó primeiro retangulo é desenhado, a altura dele vai ser a posição inicial para o proximo retangulo e assim sucessivamente ate o ultimo.

Você precisa trabalhar esta informação para que toda vez que o "for" seja executada dentro da função "desenhaBarra" a posição "y" varie a cada desenho e não fique fixa como voce fez no seu codigo

pincel.fillRect(x,y, 100, serie);
pincel.strokeRect(x,y, 100, serie);

Espero não ter lhe confundido e caso não consiga resolver ou ainda tenha dúvida, nos avise que sempre tem alguém aqui no forum para ajudar.

Abraços!

solução!

por Flavio Henrique de Souza Almeida

| 3119.3k xp | 6969 posts

Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

01/03/2017

Fabio, excelente resposta!

José ,é comum travar sim. Teve vezes que já até me tranquei no banho de uma empresa que trabalhava para chorar, porque não conseguia resolver um problema. A boa notícia é que sempre que isso aconteceu eu sempre resolvia, mesmo que denorasse muito.

Uma dica é parar um pouco, fazer outra coisa que não tem nada a ver com programação e voltar. Quando resolver ficará ainda mais confiante do que já é.