0

Estou com dificuldade em montar um tabuleiro de xadrez, deixei 4x4 só por questão de estética mesmo, alguém poderia me ajudar com a resolução disto?

	casas = 4

	for(i=0;i<casas;i++){
		for(j=0;j<casas;j++){
			tabuleiro.innerHTML += "<div></div>"
		}
	}
	#tabuleiro{
		width: 400px;
	}
	#tabuleiro div{
		background-color: red;
		width: 100px;
		height: 100px;
		float: left;		
	}
	#tabuleiro div:nth-child(2n){
		background-color: #b58763
	}

	#tabuleiro div:nth-child(2n+1){
		background-color: #f0dab5
	}
<div id='tabuleiro'></div>

2

2 Respostas 2

2

Fiz uma validação e marcação de classe para linhas impares e pares:

casas = 4

for (i = 0; i < casas; i++) {
  for (j = 0; j < casas; j++) {
    if(i%2==0){
      tabuleiro.innerHTML += "<div class='linha-par'></div>"
    }else{
      tabuleiro.innerHTML += "<div class='linha-impar'></div>"
    }
    
  }
}
#tabuleiro {
  width: 400px;
}

#tabuleiro div {
  background-color: red;
  width: 100px;
  height: 100px;
  float: left;
}

#tabuleiro div.linha-par:nth-child(2n) {
  background-color: #b58763
}

#tabuleiro div.linha-par:nth-child(2n+1) {
  background-color: #f0dab5
}

#tabuleiro div.linha-impar:nth-child(2n) {
  background-color: #f0dab5
}

#tabuleiro div.linha-impar:nth-child(2n+1) {
  background-color: #b58763
}
<div id='tabuleiro'></div>

0

casas = 4

for(i=0;i<casas;i++){
  for(j=0;j<casas;j++){
    if(i%2 ==0){
      if(j%2 == 0){
        tabuleiro.innerHTML += "<div class='black'></div>"
      }else{
        tabuleiro.innerHTML += "<div></div>"
      }
    }else{
      if(j%2 == 0){
        tabuleiro.innerHTML += "<div></div>"
      }else{
        tabuleiro.innerHTML += "<div class='black'></div>"
      }
    }
  }
}
#tabuleiro{
  width: 400px;
}
#tabuleiro div{
  background-color: #f0dab5;
  width: 100px;
  height: 100px;
  float: left;		
}
#tabuleiro div.black{
  background-color: #b58763
}
<div id='tabuleiro'></div>

Fiz uma solução bem mais simples, utilizei a matriz que você criou usando os dois for i e j, dar uma olhadinha!

https://codepen.io/caioalexandrebr/pen/vvPZor

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .