1. 程式人生 > >用 React + es6 完成一個著名的生命遊戲(Game of life,Conway)

用 React + es6 完成一個著名的生命遊戲(Game of life,Conway)

http://elevenbeans.github.io/2017/04/05/Game-of-life/

這是有名的康威生命遊戲, 描述的是一種細胞自動機。

對一個 M*N 的區域,每一個位置有兩種狀態,1為活細胞,0為死細胞,對於每個位置都滿足如下的條件:

  1. 如果活細胞周圍八個位置的活細胞數少於兩個,則該位置活細胞死亡

  2. 如果活細胞周圍八個位置有兩個或三個活細胞,則該位置活細胞仍然存活

  3. 如果活細胞周圍八個位置有超過三個活細胞,則該位置活細胞死亡

  4. 如果死細胞周圍正好有三個活細胞,則該位置死細胞復活

我們用置換方法 in-place 來解題,不新建一個相同大小的陣列,只更新原有陣列。所有的位置在同一個週期必須被同時更新,但是在迴圈程式中我們還是一個位置一個位置更新的,那麼當一個位置更新了,這個位置成為其他位置的 neighbor 時,我們怎麼知道其未更新的狀態呢,我們可以使用狀態機轉換:

狀態0: 死細胞轉為死細胞 (dead 黑色)

狀態1: 活細胞轉為活細胞 (old 紅色)

狀態2: 活細胞轉為死細胞 (dead 黑色)

狀態3: 死細胞轉為活細胞 (young 粉色)

最後我們對所有狀態對2取餘,那麼狀態0和2就變成死細胞,狀態1和3就是活細胞。

我們先對原陣列進行逐個掃描,對於每一個位置,掃描其周圍八個位置,前序細胞(左上/中上/右上/左)如果遇到狀態1或2,就計數器累加1,後續細胞(右/右下/中下/左下)遇到取餘為1,計數器也累加1。
掃完8個鄰居,如果少於兩個活細胞或者大於三個活細胞,而且當前位置是活細胞的話,標記狀態2,如果正好有三個活細胞且當前是死細胞的話,標記狀態3。

完成一遍掃描後對資料更新一遍,變成我們想要的結果。