开源日报每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文，坚持阅读《开源日报》，保持每日学习的好习惯。
今日推荐开源项目：《编程语言 Julia》
今日推荐英文原文：《How to Build a Chess Board With JavaScript》

今日推荐开源项目：《编程语言 Julia》传送门：GitHub链接
推荐理由：Julia 是一个面向科学计算的高性能动态高级程序设计语言，其语法与其他科学计算语言相似，整合了C、Python、R等诸多语言特色，在许多情况下拥有能与编译型语言相媲美的性能。

今日推荐英文原文：《How to Build a Chess Board With JavaScript》作者：Matthew Croak
原文链接：https://medium.com/better-programming/how-to-build-a-chess-board-with-javascript-480ab182739e
推荐理由：宅在家里的时候，下棋似乎是个不错的选择。棋盘已经完成，接下来可以开始写棋子了。

How to Build a Chess Board With JavaScript

Checkmate!

(Photo by sk on Unsplash)

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: 84.
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.

var board = document.getElementById('boardInner');
const renderBoard1 = (useLabels) =>{
  for (var i = 0; i < 8; ++i){
    var row = document.createElement('DIV')
    row.className = 'row'
    row.style.flexDirection = i % 2 === 0 ? '' : 'row-reverse'; 
    for (var j = 0; j < 8; ++j){
      var square = document.createElement('DIV')
      square.className = 'square'
      square.style.backgroundColor = j % 2 === 0 ? 'white' : 'black'
      row.appendChild(square)
    }
    board.appendChild(row)
  }   
 }

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 = falseand 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.

var board = document.getElementById('boardInner');
const renderBoard2 = (useLabels) =>{
  var change = false //initialized variable
  var backgroundColor = 'white'
  for (var i = 0; i < 64; ++i){
    var el = document.createElement('DIV')
    el.className = 'square'
    change = i % 8 === 0 || i === 0
    backgroundColor = change ? backgroundColor : backgroundColor === 'white' ? 'black' : 'white'
    el.style.backgroundColor = backgroundColor
    board.appendChild(el)
    change = false
  }
}

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.

References

Exponential Regression:https://www.varsitytutors.com/hotmath/hotmath_help/topics/exponential-regression

下载开源日报APP：https://openingsource.org/2579/
加入我们：https://openingsource.org/about/join/
关注我们：https://openingsource.org/about/love/

JavaScript julia

开源日报第727期：《编程语言 Julia》

How to Build a Chess Board With JavaScript

Checkmate!

Option 1: By Rows

Option 2: By Squares

References