javascript – Chessboard – in one formula

Question:

I noticed that in chess puzzles they often draw a board through the condition – if the remainder of division by 8 is equal to 0, then they do not change color. Purely out of sports interest, I wanted to find a solution through one formula. It was found, but I will not show it yet.

There may be different cool solutions. Brevity is not the main thing. The use of built-in JS functions is allowed.

(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');
}
<div id="board"></div>

Answer:

Bitwise shift by 3 to the right = integer division by 2 ^ 3 or 8 without a remainder, so we get the line number, add the current index to this and find out the even or odd number.

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 += `<div class='cell ${color[index]}'></div>`
}
#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;
}
<div id="board"></div>
Post Views: 0
Scroll to Top