React 系列教程2：编写兰顿蚂蚁演示程序

简介

最早接触兰顿蚂蚁是在做参数化的时候，那时候只感觉好奇，以为是很复杂的东西。因无意中看到生命游戏的 React 实现，所以希望通过兰顿蚂蚁的例子再学习一下 React。

兰顿蚂蚁的规则非常简单：

如果蚂蚁位于白色方块，则向右旋转 90°，反转方块的颜色，然后向前移动一步。如果蚂蚁位于黑色方块，则向左旋转 90°，反转方块的颜色，然后向前移动一步。

如下图所示：

React 系列教程2：编写兰顿蚂蚁演示程序

蚂蚁在前一百步有一定规律，之后陷入混沌，直到一万步之后将走出混沌形成一条高速公路。

React 系列教程2：编写兰顿蚂蚁演示程序

兰顿蚂蚁和生命游戏都是元胞自动机的一种，关于兰顿蚂蚁的更多介绍可以看维基百科

开始编写程序

在本教程中，我主要还是说一下项目中的问题及难点，不会对整个项目做太详细的介绍，把代码粘贴一遍也没什么意义，大家可以自己摸索一遍，其中 Webpack 用了 4.0，顺便说一句，Webpack4.0 还是有不少坑的，项目在 GitHub 中有，遇到问题可以翻阅一下源代码

源码：https://github.com/nzbin/langton-ant-redux

先看一下最终效果的动图演示：

React 系列教程2：编写兰顿蚂蚁演示程序

这个项目可以说是 React + Redux 非常基础的练习。主要就是绘制网格，根据蚂蚁规则重绘网格。以下是项目目录：

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:
    }
}