(DÚVIDA) Tabuleiro de Xadrez | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Lucas Teixeira

| 37k xp | 12 posts

Olá!

Depois de assistir a aula 04 ("Como eu amo esse tal de loop!") e experimentar o código com dados diferentes, decidi tentar fazer um tabuleiro de xadrez, porém veio uma dúvida hahaha.. Como eu faço para usar o Y como uma variável nesse caso? Eu tentei de diversos jeitos e nenhum acabou funcionando, o único jeito que funcionou foi esse primeiro código, onde eu teria que copiar e colar as funções e ir alterando todos os Y's para preencher todas as linhas, porém eu gostaria de fazer isso de um jeito mais prático.

Esse é o código até agora:

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

<script>

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStroke = 'black';
pincel.strokeRect(0, 0, 400, 400);

function linhaPreta(){

  function casaPreta(x) {

    pincel.fillStyle = 'black';
    pincel.fillRect(x, 0, 50, 50);
    pincel.strokeRect(x, 0, 50, 50);

  }

  x = 0;
  for (x = 0; x < 400; x = x + 50){
    casaPreta(x);
    x = x + 50;
  }


  function casaBranca(x) {

    pincel.fillStyle = 'white';
    pincel.fillRect(x, 0, 50, 50);
    pincel.strokeRect(x, 0, 50, 50);
  }

  x = 50;
  for (x = 50; x < 400; x = x + 50){
    casaBranca(x);
    x = x + 50;
  }

}


function linhaBranca(){

  function casaBranca(x) {

    pincel.fillStyle = 'white';
    pincel.fillRect(x, 50, 50, 50);
    pincel.strokeRect(x, 50, 50, 50);
  }

  x = 0;
  for (x = 0; x < 400; x = x + 50){
    casaBranca(x);
    x = x + 50;
  }

  function casaPreta(x) {

    pincel.fillStyle = 'black';
    pincel.fillRect(x, 50, 50, 50);
    pincel.strokeRect(x, 50, 50, 50);

  }

  x = 50;
  for (x = 50; x < 400; x = x + 50){
    casaPreta(x);
    x = x + 50;
  }

}

linhaPreta();
linhaBranca();

</script>

E esse é um exemplo dos códigos com a variável Y que não funcionou:

function casaPreta(x, y) {

    pincel.fillStyle = 'black';
    pincel.fillRect(x, y, 50, 50);
    pincel.strokeRect(x, y, 50, 50);

    x = 0;
    for (x = 0; x < 400; x = x + 50){
      casaPreta(x, y);
      x = x + 50;
    }

    y = 50;
    for (y = 50; y < 400; y = y + 100) {
      casaPreta(x, y);
      y = y + 100;
    }
  }

3 respostas

por Lucas Teixeira

| 37k xp | 12 posts

07/05/2018

Depois de várias tentativas (mais de 2horas falhando), tentando raciocinar de jeitos diferentes, consegui completar o tabuleiro!

Aqui vai o código dele completo:

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

<script>

var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStroke = 'black';
pincel.strokeRect(0, 0, 400, 400);

function linhaPreta(x, y){
  pincel.fillStyle = 'black';
  pincel.fillRect(x, y, 50, 50);
  pincel.strokeRect(x, y, 50, 50);

}

var x = 0;

while (x < 400) {
  linhaPreta(x, 0);
  x = x + 100;
}
var x = 0;
while (x < 400) {
  linhaPreta(x, 100);
  x = x + 100;
}
var x = 0;
while (x < 400) {
  linhaPreta(x, 200);
  x = x + 100;
}
var x = 0;
while (x < 400) {
  linhaPreta(x, 300);
  x = x + 100;
}
var x = 0;
while (x < 400) {
  linhaPreta(x, 400);
  x = x + 100;
}

function linhaBranca(x, y) {

  pincel.fillStyle = 'black';
  pincel.fillRect(x, y, 50, 50);
  pincel.strokeRect(x, y, 50, 50);
}

var x = 50;
while (x < 400) {
  linhaBranca(x, 50);
  x = x + 100;
}
var x = 50;
while (x < 400) {
  linhaBranca(x, 150);
  x = x + 100;
}
var x = 50;
while (x < 400) {
  linhaBranca(x, 250);
  x = x + 100;
}
var x = 50;
while (x < 400) {
  linhaBranca(x, 350);
  x = x + 100;
}
</script>

Porém está muito repetitivo, não consigo fazer funcionar uma variável para o Y. Alguém sabe como eu poderia fazer isso? Estou ha 20horas sem dormir e 2 horas em cima desse código.. não consigo mais pensar em nenhum outro jeito possível, mas não queria ir dormir sem ter completado ele. hahahah

Muito obrigado!

solução!

por Tiago Lage Payne de Pádua

| 127.8k xp | 25 posts

Instrutor Analista de TI

07/05/2018

Boa noite! Não vá dormir sem uma solução! Olha, seu código está bem interessante, mas tomei a liberdade de dar uma encurtada nele e ajustei tb a questão da variável y, sem mudar muito a sua lógica, a principal diferença é o "aninhamento" dos whiles, ou seja, um while dentro do outro, dá uma olhada e diga o que vc achou:

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

<script>

  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  pincel.fillStroke = 'black';
  pincel.strokeRect(0, 0, 400, 400);

  function linhaPreta(x, y) {
    pincel.fillStyle = 'black';
    pincel.fillRect(x, y, 50, 50);
    pincel.strokeRect(x, y, 50, 50);

  }

  function linhaBranca(x, y) {
    pincel.fillStyle = 'black';
    pincel.fillRect(x, y, 50, 50);
    pincel.strokeRect(x, y, 50, 50);
  }

  var x = 0;
  while (x < 400) {
    var y = 0;
    while (y < 400) {
      linhaPreta(x, y);
      y = y + 50;
      linhaBranca(x + 50, y);
      y = y + 50;
    }
    x = x + 100;
  }
</script>

por Lucas Teixeira

| 37k xp | 12 posts

11/05/2018

Perfeito!! Eu estava buscando exatamente isso!! haha Não sabia como fazer esse aninhamento dos whiles.

Muito obrigado!!