How To Create Chess Board Using Html And Css

How to Build a Chess Board With JavaScript

Checkmate!

My friend and accountant, Jon Sarowitz, has been kicking my butt in chess lately so naturally, I was inspired to build a chess app.

While the logistics will take me a while to implement, I was able to generate the rank and file game board. To render the board, I needed to consider the parameters involved in the rank and file system.

Number of squares: 64.
Square colors: White, black.
Color organization: alternating*.

I put an asterisk next to alternating, because it's not as simple as alternating every time.

For instance, the firsts row starts with a white square and ends with a black one. The next row starts with a black square and ends with a white one. If you were to render the squares with pure alternation, you'd end up with identical rows populating the board.

So, how do we properly render the squares on the board? We can do it one of two ways.

Option 1: By Rows

One way would be to alternate the direction in which the rendering takes place. First row, render left to right. Next row, render right to left, etc.

This direction of render can be determined by the CSS property flex-direction. If the index of the row is odd, don't apply the flex-direction. If it is, apply flex-direction: row-reverse;.

We can determine which is an odd/even row by using the modulo operator. If i % 2 === 0 then it's an even row. Otherwise, it's odd. See below.

While this does use a nested loop (which translates to On²) and is an example of an exponential regression, since you're looping through a dataset of 8 items, and for each of those items, you're performing another loop of 8 iterations, this can be seen as 8 iterations by 8 iterations.

This translates to 64 total iterations; the same amount of iterations for our next option.

Option 2: By Squares

By initializing a variable (we'll call it change), we can determine when to change the initial color, and then starting from that color continue the alternating color assignment.

So, for the first row, change = false and the initial color is white. As we move down the squares, we alternate between black and white until we reach the last square.

This is where we change the value of change to true, before continuing the pattern. Repeat the procedure until you've rendered all 64 squares. See below.

By initializing a variable, we can determine when to change the start color. The start color determines the next color and so on. We can determine when it's time to change the initial color by checking if i % 8 === 0 || i === 0.

This conditional checks if the value of index divided by 8 is 0, meaning it is a multiple of 8 and indicates the end of a row. The i === 0 check is for the first index.

At the end of the function, we change change back to false so as to not re-initialize the start color accidentally and throw off the pattern.

Both of these options consist of the same number of lines of code and perform the same amount of iterations.

One could argue that the second option declares more variables than the first one, but in this case, it doesn't amount to much of a difference (if any) in performance. Both options render the below result.

There you have it! A quick file and rank game board generator. Stay tuned for my next blog as I continue to build out my own chess game using React. The code for this post can be found at this code pen.

Upgrade your free Medium membership to a paid one here and for just $5/month you'll receive unlimited, ad-free, stories from thousands of writers on a wide variety of publications. This is an affiliate link and a portion of your membership helps me be rewarded for the content I create. Thank you!

References