relembrando funções Exercicio 2 logica 2

Olá Rogério,

no final da explicação do capítulo tem um loop que desenha duas linhas, uma de quadrados vermelhos e outra de verdes. Para desenhar um tabuleiro de xadrez você vai precisar fazer algo parecido com aquele loop.

Primeiro, você precisa criar uma forma de intercalar os quadrados. Então, além de desenhar para cada posição x um quadrado verde na primeira linha e um vermelho na segunda, você precisa desenhar do lado deles um vemelho e um verde, respectivamente. Só tome cuidado com o incremento do x no for.

Depois, para imprimir todas linhas do tabuleiro, basta colocar o loop de cima dentro de outro loop que vai definir a posição y dos quadrados.

Lucas

confuso!

O que você não entendeu?

coloca um exemplo para ficar mais claro, si possivel

olha ai do jeito que estou tentando fazer, mas até agora nada de funfar , alguém aqui que poder dar um helper fico agradecido vlw galera

<meta charset="UTF-8">
<canvas id="tela" width="600" height="600" />

<script>

  function desenharQuadradoVerde(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

     c.fillStyle="green";
     c.fillRect(x,y,50,50);

     c.strokeStyle="black";
     c.strokeRect(x,y,50,50)
  }

  function desenharQuadradoVermelhor(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

     c.fillStyle="red";
     c.fillRect(x,y,50,50);

     c.strokeStyle="black";
     c.strokeRect(x,y,50,50)
  }

for ( y = 50 ; y < 600 ; y = y + 100){
 var x = 0;
  while(x < 600){
    desenharQuadradoVerde(x,0);
     x = x + 100;
  };

  var x = 50;
  while(x < 600){
    desenharQuadradoVermelhor(x,0);
     x = x + 100;
  };

}



</script>

Bom, você não passa a variável y do for como segundo parâmetro das funções. Então ele sempre está desenhando os quadrados em (x, 0).

Mas se você apenas passar o y como segundo parâmetro o que ele vai desenhar são 6 linhas, com um espaço de 50 pixels entre elas. Para obter o tabuleiro, basta no primeiro while desenhar um quadrado vermelho em (x, y + 50) e no segundo while um quadrado verde também em (x, y + 50)

não entendi

No seu for:

for(y = 50; y < 600; y = y + 100) {
    var x = 0;
    while(x < 600) {
        desenharQuadradoVerde(x, 0);
        x = x + 100;
    }
    var x = 50;
    while(x < 600) {
        desenharQuadradoVermelhor(x, 0);
        x = x + 100;
    }
}

quando você chama as funções que desenham o quadrado verde e vermelho você passa como segundo parâmetro um 0. Ou seja, você sempre está desenhando os quadrados no mesmo y, como você pode ver neste link. Para desenhar os quadrados em diferentes linhas você precisa passar o y do for como parâmetro para as funções. Então, na hora de desenhar o quadrado verde no primeiro while ficaria:

desenharQuadradoVerde(x, y)

O vermelho no segundo while segue a mesma ideia. Mas só isso não basta para você construir um tabuleiro. Se você reparar em como fica a imagem neste link, depois de passar y como parâmetro fica um espaço em branco entre as linhas. Isso acontece porque no for você tem um incremento de y = y + 100 e os quadrados tem 50 pixels de altura, ou seja, o espaço que existe entre as linhas é de 50 pixels.

Para obter uma imagem do tabuleiro como neste link, você precisa desenhar os quadrados que faltam nos espaços em branco. Olhando a segunda linha do tabuleiro nesta imagem, o primeiro quadrado é um vermelho e ele está embaixo do quadrado verde. Ou seja, você precisa desenhar um quadrado vermelho na mesma posição x do verde em cima (x = 0), mas o y deverá ser a posição y do verde mais 50 pixels. Então, se no primeiro while da sua função você executa um:

desenharQuadradoVerde(x, y)

que desenha o quadrado verde em cima, para desenhar o quadrado vermelho embaixo dele basta colocar no mesmo while um:

desenharQuadradoVermelhor(x, y + 50)

Analogamente, você desenha um quadrado verde no segundo while e assim surge o tabuleiro.

Cara difícil explicação valeu pela tentativa.

Si alguém entendeu a explicação acima , e explicar de outra forma!

Não funcionou . E até agora não consegui fazer o tabuleiro simples meu codigo esta assim até agora, que poderá me ajudar a terminal vlw galera

<meta charset="UTF-8">
<canvas id="tela" width="600" height="600" />

<script>

  function desenharQuadradoVerde(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");
     c.fillStyle="green";
     c.fillRect(x,y,50,50);
     c.strokeStyle="black";
     c.strokeRect(x,y,50,50)
  }

  function desenharQuadradoVermelhor(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");
     c.fillStyle="red";
     c.fillRect(x,y,50,50);
     c.strokeStyle="black";
     c.strokeRect(x,y,50,50)
  }

  for ( y = 0 ; y < 600 ; y = y + 100){

    var x = 50;
    while(x < 600){
      desenharQuadradoVerde(x,y);
       x = x + 100;
    };

    var x = 100;
    while(x < 600){
      desenharQuadradoVermelhor(x,y);
       x = x + 100;
    };
  }

</script>

Rogério, na primeira versão do seu código postado, você já consegue desenhar uma linha completa do tabuleiro certo? isso porque você passa as posições x(horizontal) e y(vertical) e no seu for você passa apenas as posições de x de forma variável e as de y como constante, no caso 0(zero), para construir um tabuleiro completo você só precisa agora criar as mesmas linha, porém, variando a também a posição de y concorda? você realmente poderia criar um for dentro de outro, mas isso é de uma complexidade muito grande, tente sempre procurar uma forma de deixar seu código mais simples. Vamo tentar uma solução elegante:

Como vamos desenhar várias linhas, esse for tornou-se um ótimo candidato a virar uma função, logo, ele será promovido! a gente pode fazer assim:

function desenhaLinha(posicaoY){
   for ( y = 50 ; y < 600 ; y = y + 100){ 
      var x = 0;
      while(x < 600){
      desenharQuadradoVerde(x,posicaoY);
      x = x + 100;
      };
      var x = 50;
      while(x < 600){
      desenharQuadradoVermelhor(x,posicaoY);
      x = x + 100;
      };
   }
}

note que estou passando a posição de y agora, porque ele também será variável.

daí basta chamar essa nova função passando 0 da primeira vez:

desenhaLinha(0);

logo abaixo dessa chamada nos criamos um novo for, cuja única finalidade é chamar nossa função com a posição de y atualizada a cada "rodada":

for ( posicaoY = 50 ; posicaoY < 600 ; posicaoY = posicaoY + 50){ 
   desenhaLinha(posicaoY);
}

Pronto. agora ele já esta desenhando novas linhas, porém se você rodar o código agora vai perceber que não temos exatamente um tabuleiro de xadrez, porque as cores ficaram repetidas, precisamos alternar as cores. Na primeira linha devemos começar com vermelho, na segunda com verde e assim por diante, então criamos uma nova função que é uma cópia da primeira só com as cores invertidas:

function desenhaLinhaAlternada(posicaoY){
   for ( y = 50 ; y < 600 ; y = y + 100){ 
      var x = 0;
      while(x < 600){
      desenharQuadradoVermelhor(x,posicaoY);
      x = x + 100;
      };
      var x = 50;
      while(x < 600){
      desenharQuadradoVerde(x,posicaoY);
      x = x + 100;
      };
   }
}

daí no nosso for basta alternarmos entre uma e outra. Criamos uma variável booleana pra dizer de quem é a vez de imprimir a linha:

var alternador = true;

e usamos dentro do for

var alternador = true;
for ( posicaoY = 50 ; posicaoY < 600 ; posicaoY = posicaoY + 50){
   if(alternador){
      desenhaLinhaAlternada(posicaoY);
      alternador = false;
   }else{
      desenhaLinha(posicaoY);
      alternador = true;
   }

}

segue o código completo:

<meta charset="UTF-8">
<canvas id="tela" width="600" height="600" />
<script>
    function desenharQuadradoVerde(x,y){
        var tela = document.getElementById("tela"); 
        var c = tela.getContext("2d");
         c.fillStyle="green";
         c.fillRect(x,y,50,50);
         c.strokeStyle="black";
         c.strokeRect(x,y,50,50)
    }
    function desenharQuadradoVermelhor(x,y){
        var tela = document.getElementById("tela");
        var c = tela.getContext("2d");
         c.fillStyle="red";
         c.fillRect(x,y,50,50);
         c.strokeStyle="black";
         c.strokeRect(x,y,50,50)
    }

    desenhaLinha(0);

    var alternador = true;
    for ( posicaoY = 50 ; posicaoY < 600 ; posicaoY = posicaoY + 50){
        if(alternador){
            desenhaLinhaAlternada(posicaoY);
            alternador = false;
        }else{
            desenhaLinha(posicaoY);
            alternador = true;
        }

    }


    function desenhaLinha(posicaoY){
        for ( y = 50 ; y < 600 ; y = y + 100){
         var x = 0;
          while(x < 600){
            desenharQuadradoVerde(x,posicaoY);
             x = x + 100;
          };
          var x = 50;
          while(x < 600){
            desenharQuadradoVermelhor(x,posicaoY);
             x = x + 100;
          };
        }
    }

    function desenhaLinhaAlternada(posicaoY){
        for ( y = 50 ; y < 600 ; y = y + 100){
         var x = 0;
          while(x < 600){
            desenharQuadradoVermelhor(x,posicaoY);
             x = x + 100;
          };
          var x = 50;
          while(x < 600){
            desenharQuadradoVerde(x,posicaoY);
             x = x + 100;
          };
        }
    }

</script>

PS.: estamos praticamente repetindo o mesmo código para as duas funções que criamos, isso não é uma boa prática, fica como desafio transformar essas duas funções em apenas uma.

valeu! com coisas simples na verdade são sempre importantes aprendizado.