Шахматная доска - одной формулой

#javascript #svg #математика

Замечал, что в шахматных задачках часто рисуют доску через условие, - если остаток
от деления на 8 равен 0, то не меняют цвет. Чисто из спортивного интереса, захотелось
найти решение через одну формулу. Оно нашлось, но пока не покажу.

Может найдутся разные прикольные решения. Краткость - не главное. Допускается использование
встроенных JS функций.

( Fiddle )



let board = document.getElementById('board');

let color = ["white", "black"];
// Задумка была в том, чтобы выводить 0 или 1, в зависимости от нужного цвета.

for( let i = 0; i < 64; i++ ){
  let cell = document.createElement('div');
  let index = ( i % 2 ); // Ваша формула
  cell.className = 'cell ' + color[ index ];
  board.appendChild( cell );
}
#board {
  width: 400px;
  height: 400px;
  line-height: 0;
  padding: 20px;
  box-shadow:
    inset 0 0 0 18px #fff1ba,
    inset 0 0 0 20px #800,
    1px 1px 5px 1px #000;
}
.cell {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: orange;
  color: white;
  box-sizing: border-box;
  padding-top: 25px;
  text-align: center;
}
.black {
  background-image: url('https://gyazo.com/2ab3718369a23d98cf4cb8f74d1af7e4.png');
}
.white {
  background-image: url('https://gyazo.com/1b53d5bd1715435422adeea81a5fbf73.png');
}




    

Ответы

Ответ 1

Побитовый сдвиг на 3 вправо = целочисленное деление на 2^3 или 8 без остатка, 
таким образом получим номер строки, прибавляем к этому текущий индекс и выясняем
четное или нечетное число.

let index = ((i>>3) + i) % 2; 




let color = ["white", "black"];
for( let i = 0; i < 64; i++ ) {
  let index = ((i>>3) + i) % 2; 
  board.innerHTML += `
`
}
#board {
  display: flex;
  flex-wrap: wrap;
  width: 170px;
  height: 170px;
  box-shadow: 0 0 5px 0 #0005;
}
.cell {
  width: 12.5%;
  height: 12.5%;
}
.black {
  background-color: black;
}
.white {
  background-color: #eee;
}



Ответ 2

Сумма координат клетки четна - клетка белая, нечетна черная.

let index = (Math.floor(i/8)+ i % 8)%2;


Ответ 3

Еще один вариант, слегка запутанный, но претендент на самый короткий.

let index = 9/8*i&1; 




Как это работает:

последним применяется &1 побитовое И с единицей - по сути возвращает последний бит
от двоичного представления числа - т.е для четных чисел вернется 0 для нечетных 1.

перед этим индекс умножается коэффициент- 9/8*i - это уже упрощенная запись от i/8
+ i, тут индекс строки i/8 (дробную часть отбросит побитовый оператор) складывается
с индексом ячейки i.

т.е. до упрощения это выглядело бы так:

let index = (i/8 + i)&1


Если сложить все это вместе получится все та же формула... как и в других ответах



for (let i=0; i<64; i++)  
  document.body.innerHTML += ``
body {
  display: flex;
  flex-wrap: wrap;
  width: 170px;
  height: 170px;
  box-shadow: 0 0 5px 0 #0005;
}
cell {
  width: 12.5%;
  height: 12.5%;
  background-color: black;
}


Ответ 4

Svg Pattern

Можно использовать pattern для заполнения прямоугольника шахматными квадратами. 

  

Подробнее здесь и здесь   



	 




Немного не по теме, но может быть полезно при заполнении любой фигуры. 

Например заполнение контура рисунка зебры: 






  

Поворачиваем рисунок зебры - patternTransform="rotate(30)"