Dificuldade na compreensão da resolução proposta | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Não consegui entender a lógica das variáveis de altura, achei que extrapolou o conteúdo ensinado até então. De qualquer forma, fiz o exercício de uma forma mais básica.

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

<script>

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

    function desenhaRetangulo(x, y, largura, altura, cor) {

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

    }

    function desenhaTexto(x, y, texto) {

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

    }

    desenhaRetangulo(10, 100, 50, 50, 'blue');
    desenhaRetangulo(10, 150, 50, 25, 'green');
    desenhaRetangulo(10, 175, 50, 20, 'yellow');
    desenhaRetangulo(10, 195, 50, 5, 'red');

    desenhaTexto(10, 90, '2015');

    desenhaRetangulo(100, 100, 50, 65, 'blue');
    desenhaRetangulo(100, 165, 50, 20, 'green');
    desenhaRetangulo(100, 185, 50, 13, 'yellow');
    desenhaRetangulo(100, 198, 50, 2, 'red');

    desenhaTexto(100, 90, '2016');

</script>

Olá Paula, tudo bem com você?

Realmente esse exercício é um pouco mais pesado por trabalhar com arrays e ter uma lógica um pouco mais complexa, da maneira que você fez também está ótimo para quem está começando nesse mundo novo :)

Vou tentar te explicar a lógica do instrutor fazendo um paralelo com seu código, ok?

Então eu vou simular com se tivessemos chamado:

desenhaBarra(10, 100, serie2015, cores, '2015');

Então vamos lá para a função:

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

Temos que:

x: 10
y: 100
serie2015 = [ 50, 25, 20, 5 ]
cores = [ 'blue', 'green', 'yellow', 'red' ]
texto = '2015'

Também criamos a nossa variável:

somaAltura = 0

Vamos para o for:

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

Em nossa primeira execução teremos que:

i = 0 e series.length = 4

A altura vale então serie[0] que no caso é 50:

var altura = serie[i];
var altura = serie[0]
var altura = 50

Dessa forma iremos desenhar a primeira barra:

desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);

Como somaAltura = 0 e `cores[0] = 'blue', teremos que:

desenhaRetangulo(10, 100 + 0, 50, 50, 'blue')

Que foi basicamente o que você fez:

Seu código:

desenhaRetangulo(10, 100, 50, 50, 'blue');

Agora vem a questão do somaAltura, iremos gravar o tamanho da barra até o momento para colocar sempre um empilhado no outro, no caso:

somaAltura = somaAltura + altura
somaAltura = 0 + 50

Isso nos auxilia para que na próxima execução do for, que teremos: i = 1 e series.length = 4

Pois agora:

var altura = serie[i]
var altura = serie[1]
var altura = 25

Novamente iremos desenhar o retângulo:

desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);

Como somaAltura = 50 e `cores[1] = 'green', teremos que:

desenhaRetangulo( 10, 100 + 50, 50, 25, 'green')
desenhaRetangulo( 10, 150, 50, 25, 'green')

Que novamente foi o que você fez aqui: Seu código

    desenhaRetangulo(10, 150, 50, 25, 'green');

E a somaAltura:

somaAltura = somaAltura + altura
somaAltura = 50 + 25 
somaAltura = 75

E como já podemos ver a próxima barra será desenhada em y= 175 igual seu código :)

Seu código:

desenhaRetangulo(10, 175, 50, 20, 'yellow');

Da mesma forma iremos fazer somaAltura = 75 + 20 = 95, e teremos y= 100 + 95 = 195, que equivale a sua última barra:

desenhaRetangulo(10, 195, 50, 5, 'red');

Então somaAltura nada mais é do que a conta que temos que fazer para saber em que posição y temos que colocar a próxima barra, enquanto a variável altura é o tamanho da barra atual :)

Conseguiu Compreender?

Fique tranquila que esse exercício realmente é beeem mais complexo, mas com o tempo vai sendo mais natural :)

Qualquer coisa estou a disposição :)

Abraços e Bons Estudos!