Is there a better way to generate a chess board?

Question

I am planning on creating a chess game inside of JavaScript in order to test my current skill level, which is not very high. I am trying to dynamically render elements without React because it is difficult to create a React application without create-react-app, so instead I a using document.createElement().

Using document.createElement creates something like this: the original chess board that I tried to make

class Grid {
    constructor (length, height) {
        this.length = length;
        this.height = height;
    }
    render() {
        let total = this.length * this.height;
        for (let i = 1; i <= total; i++) {
            const whiteSquare = document.createElement('div');
            whiteSquare.style.cssText = 'height:50px;width:50px;background-color:#ff9c9c;display:inline-block;padding:0;';
            whiteSquare.id = `ws${i}`;
            const blackSquare = document.createElement('div');
            blackSquare.style.cssText = 'height:50px;width:50px;background-color:#fa6666;display:inline-block;padding:0;';
            blackSquare.id = `bs${i}`;
            const br = document.createElement('br');
            console.log(`${i}`)
            i % 2 != 0 ? document.getElementById('board').appendChild(whiteSquare) : document.getElementById('board').appendChild(blackSquare);
            i % this.length == 0 ? document.getElementById('board').appendChild(br) : console.log('not it');
        }
    }
}

let board = new Grid(8, 8);
board.render()

I want a chess board that alternates colors, and I know that every 8 it generates it uses another one of the square it used before, so it alternates. However, I am not entirely sure how to implement this into my code.

You might wanna use a canvas. – john-jones Feb 27 '23 at 21:14 — john-jones, Feb 27 '23 at 21:14

Nina Scholz · Accepted Answer · 2023-02-27T21:27:33.540

You could check the rest with two and the rest of the value divided by 8 and take the ceiled value. Or in other words, respect the row.

BTW, please do not use conditional operator for not using the expression. In this case use simple if statement instead.

class Grid {
    constructor (length, height) {
        this.length = length;
        this.height = height;
    }
    render() {
        let total = this.length * this.height;
        for (let i = 1; i <= total; i++) {
            const whiteSquare = document.createElement('div');
            whiteSquare.style.cssText = 'height:50px;width:50px;background-color:#ff9c9c;display:inline-block;padding:0;';
            whiteSquare.id = `ws${i}`;
            const blackSquare = document.createElement('div');
            blackSquare.style.cssText = 'height:50px;width:50px;background-color:#fa6666;display:inline-block;padding:0;';
            blackSquare.id = `bs${i}`;
            const br = document.createElement('br');
            console.log(`${i}`)
            document
                .getElementById('board')
                .appendChild(i % 2 === Math.ceil(i / this.height) % 2
                    ? whiteSquare
                    : blackSquare
                );
            if (i % this.length == 0) document.getElementById('board').appendChild(br);
            else console.log('not it');
        }
    }
}

let board = new Grid(8, 8);
board.render()

<div id="board"></div>

If the intent is to generate a grid of dynamic dimensions, then hardcoding the value `8` will lead to undesirable outcomes — instead, the value should be derived from the input dimension. — jsejcksn, Feb 27 '23 at 21:24

001 · Answer 2 · 2023-02-27T21:39:08.100

Since you are creating a 2d board, why not use 2 (nested) loops?

class Grid {
  constructor(length, height) {
    this.length = length;
    this.height = height;
  }
  render() {
    let color = 0;
    for (let row = 0; row < this.height; row++) {
      for (let col = 0; col < this.length; col++) {
        const square = document.createElement('div');
        square.classList.add(color % 2 == 0 ? "white-square" : "black-square");
        square.id = `${color++ % 2 == 0 ? 'w' : 'b'}s${color}`;
        document.getElementById('board').appendChild(square);
      }
      color++;  // Remove this to have columns same color
      document.getElementById('board').appendChild(document.createElement('br'));
    }
  }
}

let board = new Grid(8, 8);
board.render()

.white-square {
  height: 50px;
  width: 50px;
  background-color: #ff9c9c;
  display: inline-block;
  padding: 0;
}

.black-square {
  height: 50px;
  width: 50px;
  background-color: #fa6666;
  display: inline-block;
  padding: 0;
}

<div id="board"></div>

score 0 · Answer 3 · answered Feb 27 '23 at 21:41

You could exploit the fact that rowNumber + columnNumber mod 2 will give you the desired checkered pattern, by virtue of the fact that an even number plus an odd number is an odd number.

class Grid {

    board;
    length;
    height;

    constructor (length, height) {
        this.length = length;
        this.height = height;
        this.board = document.getElementById('board');
    }
    
    createSquare() {
      const el = document.createElement('div');
      el.classList.add('square');
      return el;
    }
    
    render() {
    
        for (let column = 1; column <= this.length; column++) {
          for (let row = 1; row <= this.height; row++) {
            let index = row+column;
            let colour = 'black';
            if ( index % 2 !== 0) {
              colour = 'white';
            }
            let square = this.createSquare();
            square.classList.add(colour);
            this.board.appendChild(square);
          }
        }
    
    }
}

let board = new Grid(8, 8);
board.render()

.square {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0;
  float: left;
}

.white {
  background-color: #ff9c9c;
}

.black {
  background-color: #fa6666;
}

#board {
  border: 3px solid gray;
  height: 400px;
  width: 400px;
    padding: 0;
}

<div id="board"></div>

Is there a better way to generate a chess board?

3 Answers3