React 系列教程2：編寫蘭頓螞蟻演示程序

時間 2019-12-09

標籤 react 系列教程編寫螞蟻演示程序欄目 React 简体版

原文原文鏈接

簡介

最先接觸蘭頓螞蟻是在作參數化的時候，那時候只感受好奇，覺得是很複雜的東西。因無心中看到生命遊戲的 React 實現，因此但願經過蘭頓螞蟻的例子再學習一下 React。git

蘭頓螞蟻的規則很是簡單：github

若是螞蟻位於白色方塊，則向右旋轉 90°，反轉方塊的顏色，而後向前移動一步。
若是螞蟻位於黑色方塊，則向左旋轉 90°，反轉方塊的顏色，而後向前移動一步。算法

以下圖所示：redux

螞蟻在前一百步有必定規律，以後陷入混沌，直到一萬步以後將走出混沌造成一條高速公路。canvas

蘭頓螞蟻和生命遊戲都是元胞自動機的一種，關於蘭頓螞蟻的更多介紹能夠看維基百科app

開始編寫程序

在本教程中，我主要仍是說一下項目中的問題及難點，不會對整個項目作太詳細的介紹，把代碼粘貼一遍也沒什麼意義，你們能夠本身摸索一遍，其中 Webpack 用了 4.0，順便說一句，Webpack4.0 仍是有很多坑的，項目在 GitHub 中有，遇到問題能夠翻閱一下源代碼佈局

源碼：https://github.com/nzbin/langton-ant-redux性能

先看一下最終效果的動圖演示：學習

這個項目能夠說是 React + Redux 很是基礎的練習。主要就是繪製網格，根據螞蟻規則重繪網格。如下是項目目錄：code

src
├── actions
│    └── index.js
├── components
│    ├── app.js
│    ├── button.js
│    └── cell.js                    
├── containers                       
│    ├── board.js
│    ├── control.js
│    └── counter.js            
├── reducers
│    ├── index.js
│    ├── reducer_board.js
│    ├── reducer_generations.js
│    └── reducer_play_status.js          
└── index.js

螞蟻法則的算法

蘭頓螞蟻演示程序的關鍵就是螞蟻規則的算法，其實算法也很簡單，設置方向變量，模擬螞蟻的前進線路便可。如下是邏輯代碼：

// status: true -> black square
if (gameState[row][col].status) {
    gameState[row][col].status = false;
    // ant: turnLeft90 -> move forward 1 step
    switch (dir) {
        case 'T':
            ant['pos'] = [row, col - 1];
            ant['dir'] = 'L';
            break;
        case 'B':
            ant['pos'] = [row, col + 1];
            ant['dir'] = 'R';
            break;
        case 'L':
            ant['pos'] = [row + 1, col];
            ant['dir'] = 'B';
            break;
        case 'R':
            ant['pos'] = [row - 1, col];
            ant['dir'] = 'T';
            break;
        default:
    }
}
// status: false -> white square
else if (!gameState[row][col].status) {
    gameState[row][col].status = true;
    // ant: turnRight90 -> move forward 1 step
    switch (dir) {
        case 'T':
            ant['pos'] = [row, col + 1];
            ant['dir'] = 'R';
            break;
        case 'B':
            ant['pos'] = [row, col - 1];
            ant['dir'] = 'L';
            break;
        case 'L':
            ant['pos'] = [row - 1, col];
            ant['dir'] = 'T';
            break;
        case 'R':
            ant['pos'] = [row + 1, col];
            ant['dir'] = 'B';
            break;
        default:
    }
}