Entrar Ainda não tem acesso?
3
respostas

Tabuleiro de xadrez em javascript

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Uma função mais genérica

por Maksuedson Gomes da Silva
| 87.8k xp | 21 posts
<canvas width="600" height="400"></canvas>
<title>Tabuleiro de Xadrez</title>
<script>
  function desenhaQuadrado(x, y, cor) {
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = cor;
    pincel.fillRect(x, y, 50, 50);
    pincel.fillStroke = "black";
    pincel.strokeRect(x, y, 50, 50);
  }

  function desenharFilaHorizontal1(y, x) {
    y = 0;
    desenhaQuadrado((y += 50), x, "white");
    desenhaQuadrado((y += 50), x, "black");
    desenhaQuadrado((y += 50), x, "white");
    desenhaQuadrado((y += 50), x, "black");
    desenhaQuadrado((y += 50), x, "white");
    desenhaQuadrado((y += 50), x, "black");
    desenhaQuadrado((y += 50), x, "white");
    desenhaQuadrado((y += 50), x, "black");
  }

  function desenharFilaHorizontal2(y, x) {
    y = 0;
    desenhaQuadrado((y += 50), x, "black");
    desenhaQuadrado((y += 50), x, "white");
    desenhaQuadrado((y += 50), x, "black");
    desenhaQuadrado((y += 50), x, "white");
    desenhaQuadrado((y += 50), x, "black");
    desenhaQuadrado((y += 50), x, "white");
    desenhaQuadrado((y += 50), x, "black");
    desenhaQuadrado((y += 50), x, "white");
  }

  function desenharTabuleiro(y, x) {
    y = 0;
    x = 0;
    desenharFilaHorizontal1(0, (y += 50));
    desenharFilaHorizontal2(0, (y += 50));
    desenharFilaHorizontal1(0, (y += 50));
    desenharFilaHorizontal2(0, (y += 50));
    desenharFilaHorizontal1(0, (y += 50));
    desenharFilaHorizontal2(0, (y += 50));
    desenharFilaHorizontal1(0, (y += 50));
    desenharFilaHorizontal2(0, (y += 50));
  }

  desenharTabuleiro();
</script>

Fiz um tabuleiro de xadrez, aceito sugestões para melhorar o código, como usar laço for ou while, e reutilização.

Tabuleiro

3 respostas
por Maksuedson Gomes da Silva
| 87.8k xp | 21 posts

Consegui da uma evoluida, vou melhorar mais

<canvas width="600" height="400"></canvas>
<title>Tabuleiro de Xadrez</title>
<script>
  function desenhaQuadrado(x, y, cor) {
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = cor;
    pincel.fillRect(x, y, 50, 50);
    pincel.fillStroke = "black";
    pincel.strokeRect(x, y, 50, 50);
  }


  function desenharPrimeiraHorizontal(x, y) {
    var x = 0;

    while(x <400){
        desenhaQuadrado((x += 50), y, "white");
        desenhaQuadrado((x += 50), y, "black");
    }

  }

  function desenharSegundaHorizontal(x, y) {
    var x = 0;

    while(x <400){
        desenhaQuadrado((x += 50), y, "black");
        desenhaQuadrado((x += 50), y, "white");

    }
  }

    desenharPrimeiraHorizontal(0,0);
    desenharSegundaHorizontal(0,50);

    desenharPrimeiraHorizontal(0,100);
    desenharSegundaHorizontal(0,150);

    desenharPrimeiraHorizontal(0,200);
    desenharSegundaHorizontal(0,250);

    desenharPrimeiraHorizontal(0,300);
    desenharSegundaHorizontal(0,350);


</script>
por Maksuedson Gomes da Silva
| 87.8k xp | 21 posts
  1. Projeto concluido
<canvas width="600" height="400"></canvas>
<title>Tabuleiro de Xadrez</title>
<script>
  function desenhaQuadrado(x, y, cor) {
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = cor;
    pincel.fillRect(x, y, 50, 50);
    pincel.fillStroke = "black";
    pincel.strokeRect(x, y, 50, 50);
  }

  function desenharLinhaPretoBranco(x, y) {
    var x = 0;

    while (x < 400) {
      desenhaQuadrado((x += 50), y, "black");
      desenhaQuadrado((x += 50), y, "white");
    }
  }

  function desenharLinhaBrancoPreto(x, y) {
    var x = 0;

    while (x < 400) {
      desenhaQuadrado((x += 50), y, "white");
      desenhaQuadrado((x += 50), y, "black");
    }
  }

  function desenharTabuleiro() {
    var y = 0;

    desenharLinhaBrancoPreto(0, 0);
    while (y < 400) {
      desenharLinhaPretoBranco(0, (y += 50));
      desenharLinhaBrancoPreto(0, (y += 50));
    }

  }
  desenharTabuleiro();
</script>
por Akemi Alice
| 852.4k xp | 2192 posts
Alura Scuba Team Monitora no Scuba Team
O post foi fechado por inatividade após 3 meses. Para continuar o assunto, recomendamos criar um novo tópico. Bons Estudos!