Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Dúvida no Ex. 1 da Aula 2 - Extraindo funções

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo, no capítulo Extraindo funções e atividade Quadrado verde

por David William do Nascimento
| 19.2k xp | 46 posts

Fiz um exercício por conta própria e preciso de ajuda para melhorar. Preciso fazer a borda geral para formar o tabuleiro e como melhorar o meu loop?

<h3> Tabuleiro de Dama<h3>
<canvas id="tabuleiro" width="450" height="450"> </canvas>

<script>

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

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

}

 for(var x = 0;x < 400;x = x + 100){
    tabuleirodedamapreto(x,0);
 }
 for(var x = 50;x < 400;x = x + 100){
    tabuleirodedamapreto(x,50);
 }
 for(var x = 0;x < 400;x = x + 100){
    tabuleirodedamapreto(x,100);
 }
 for(var x = 50;x < 400;x = x + 100){
    tabuleirodedamapreto(x,150);
 }
 for(var x = 0;x < 400;x = x + 100){
    tabuleirodedamapreto(x,200);
 }
 for(var x = 50;x < 400;x = x + 100){
    tabuleirodedamapreto(x,250);
 }
 for(var x = 0;x < 400;x = x + 100){
    tabuleirodedamapreto(x,300);
 }
 for(var x = 50;x < 400;x = x + 100){
    tabuleirodedamapreto(x,350);
 }

</script>
6 respostas
por César Augusto Noronha Araujo
| 134k xp | 57 posts

David,

Não sei se é seu objetivo, mas porque não faz da seguinte maneira :

for(var x = 0;x < 400;x =+ 100){
     for(var y = 50;y < 400; y=+ 50){
        tabuleirodedamapreto(x, y);
     }
}

Faz um teste, creio que não está incorreto. Mas dessa forma obterá o mesmo resultado. Espero ter lhe ajudado.

por David William do Nascimento
| 19.2k xp | 46 posts

Bom dia. Fiz e não deu certo. Fiz algo parecido ontem no teste mas o resultado foi incorreto. Segue a linha de comando para verificar. Mas muito obrigado pela resposta.

<h3> Tabuleiro de Dama<h3>
<canvas id="tabuleiro" width="450" height="450"> </canvas>

<script>

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

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

}

 for(var x = 0;x < 400;x = x + 100){
    for( y = 50;y < 400;y = y + 50){
    tabuleirodedamapreto(x,y);
   }
 }
</script>

Preciso saber também como colocar borda em todo o meu canvas...se possível. kkk

por César Augusto Noronha Araujo
| 134k xp | 57 posts

Desculpe pela resposta anterior, acertei a lógica. Pesquisei uma forma de colocar a bordar via canvas e não encontrei uma maneira legal para fazer, então coloquei via css.

<h3> Tabuleiro de Dama<h3>
<canvas id="tabuleiro" width="350" height="350" style="border:1px solid #000000"> </canvas>

<script>

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

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

}

for(var y = 0;y < 400; y= y + 100){
    for(var x = 0;x < 400;x = x + 100){ 
            tabuleirodedamapreto(x,y);
     }
}
for(var y = 50;y < 400; y= y + 100){
     for(var x = 50;x < 400;x = x + 100){
            tabuleirodedamapreto(x,y);
     }
}

</script>
por David William do Nascimento
| 19.2k xp | 46 posts

Sensacional Cesar Augusto. Suas dicar me ajudaram a finalizar meu exercício pessoal e a aprender colocar borda em CSS...KKKKKKK Obrigado.

solução!
por César Augusto Noronha Araujo
| 134k xp | 57 posts

As ordens...rs...precisando estamos a sua disposição, por gentileza, marque sua dúvida como solucionada.

por Wellington de Souza Lima
| 81.9k xp | 23 posts

Sei que é tópico já foi fechado, mas é possível colocar a borba usando o strokeStyle e o strokeRect, colocaria o código abaixo de onde onde vc crias os quadrados, daí é só pegar o tamanho total da sua tela que no caso é 350 por 350;

c.strokeStyle = "black";
c.strokeRect(0,0,350,350);