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.

``````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;
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;
text-align: center;
}
.black {
background-image: url('https://gyazo.com/2ab3718369a23d98cf4cb8f74d1af7e4.png');
}
.white {
}``````
``<div id="board"></div>``

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>``
Scroll to Top