開源日報每天推薦一個 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