Как нарисовать простую шахматную доску?

#javascript #html #css

Как нарисовать простую шахматную доску с помощью html/css и javascript?
    

Ответы

Ответ 1

Простой пример.



var chessWrap = document.querySelector('.ch-wrap');

var i = 0, count = 0;

while (count < 8 * 8) {
  var item = document.createElement('div');
  chessWrap.appendChild(item);

  item.classList.add('ch-item');

  if (i && i % 2)
    item.classList.add('ch-black')

  i += ((i + 2) % 9) ? 1 : 2;
  count++;
}
.ch-wrap {
  width: 400px;
  height: 400px;
  border: 1px solid #111;
}
.ch-item {
  width: 50px;
  height: 50px;
  float: left;
}
.ch-black {
  background: #111;
}



Ответ 2

Проверено в Chrome 54 и Firefox 50. А вообще:


http://caniuse.com/#feat=css-mixblendmode
http://caniuse.com/#feat=css-repeating-gradients




html {
  background: white;
  display: flex;
}

body {
  width: 100vmin;
  height: 100vmin;
  margin: auto;
  border: 1px solid red;
  box-sizing: border-box;
  background: repeating-linear-gradient(90deg, white, white 12.5%, black 12.5%, black
25%);
}

div {
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(0deg, black, black 12.5%, white 12.5%, white
25%);
  mix-blend-mode: difference;
}



Ответ 3

function shahmatLine(number){
    let summ = '';
    if(number % 2 == 0){
       for(let k=0; k<8; k++){
            summ = summ + " " + "#";
        } 
    }
    else{
        for(let k=0; k<8; k++){
            summ = summ + "#" + " ";
        } 
    }

    return summ;
}


function Shahmat(lineCount) {
    for(let i = 0; i < lineCount; i++){
        console.log(shahmatLine(i));
    }
}