React 系列教程2:编写兰顿蚂蚁演示程序
简介
最早接触兰顿蚂蚁是在做参数化的时候,那时候只感觉好奇,以为是很复杂的东西。因无意中看到生命游戏的 React 实现,所以希望通过兰顿蚂蚁的例子再学习一下 React。
兰顿蚂蚁的规则非常简单:
如果蚂蚁位于白色方块,则向右旋转 90°,反转方块的颜色,然后向前移动一步。
如果蚂蚁位于黑色方块,则向左旋转 90°,反转方块的颜色,然后向前移动一步。
如下图所示:
蚂蚁在前一百步有一定规律,之后陷入混沌,直到一万步之后将走出混沌形成一条高速公路。
兰顿蚂蚁和生命游戏都是元胞自动机的一种,关于兰顿蚂蚁的更多介绍可以看维基百科
开始编写程序
在本教程中,我主要还是说一下项目中的问题及难点,不会对整个项目做太详细的介绍,把代码粘贴一遍也没什么意义,大家可以自己摸索一遍,其中 Webpack 用了 4.0,顺便说一句,Webpack4.0 还是有不少坑的,项目在 GitHub 中有,遇到问题可以翻阅一下源代码
源码:https://github.com/nzbin/langton-ant-redux
先看一下最终效果的动图演示:
这个项目可以说是 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 stepswitch (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 stepswitch (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:}
}
布局
演示程序的网格如果只是写死的话就非常简单,但是为了有更好的体验,我做成了响应式,无论有多少网格,总能全部显示在屏幕上。看似很简单的问题,其实有很多可以学习的地方。
制作响应式网格的方式有很多,比如结合媒体查询,百分比。为了效果更好一点,我选择了百分比。
其次正方形网格也有多种方式实现,比如 vw 单位,百分比+padding。其中使用 vw 单位会有一个问题,就是它的相对父元素是视窗,所以网格总是全屏显示,比较恶心。最后使用了百分比+padding 的方式。细节方面还使用了 calc 运算。
但是百分比计算的网格存在精度问题,适当放大尺寸可以解决。
查看在线 Demo:https://nzbin.github.io/langton-ant-redux
性能
因为我对 React 的研究不深,所以在这个项目中遇到了一些性能问题,绘制一个 100X100 的网格的话,在 FireFox 中明显感觉到卡顿(与我的机子也有关系),Chrome 表现还可以。
其实用 canvas 做演示程序可能更好一些,同时跑多个蚂蚁也没有问题。
总结
因各种各样的原因,没想到这篇文章又拖了半年多才写完,与其说是教程,不如说是对兰顿蚂蚁的介绍,更惭愧的是文章内容不深,无法帮助更多的初学者。我不是 React 的拥泵,目前专注 Angular,所以关于 React 的译文以及简易教程就到此为止吧。
转载于:https://www.cnblogs.com/nzbin/p/9243294.html
React 系列教程2:编写兰顿蚂蚁演示程序相关推荐
- java兰顿蚂蚁解题思路_程序员面试金典 - 面试题 16.22. 兰顿蚂蚁(deque模拟)
1. 题目 一只蚂蚁坐在由白色和黑色方格构成的无限网格上. 开始时,网格全白,蚂蚁面向右侧. 每行走一步,蚂蚁执行以下操作. (1) 如果在白色方格上,则翻转方格的颜色,向右(顺时针)转 90 度,并 ...
- 程序员面试金典 - 面试题 16.22. 兰顿蚂蚁(deque模拟)
1. 题目 一只蚂蚁坐在由白色和黑色方格构成的无限网格上. 开始时,网格全白,蚂蚁面向右侧. 每行走一步,蚂蚁执行以下操作. (1) 如果在白色方格上,则翻转方格的颜色,向右(顺时针)转 90 度,并 ...
- 蓝桥杯 兰顿蚂蚁(模拟)
历届试题 兰顿蚂蚁 时间限制:1.0s 内存限制:256.0MB 问题描写叙述 兰顿蚂蚁.是于1986年,由克里斯·兰顿提出来的,属于细胞自己主动机的一种. 平面上的正方形格子被填上黑色或白色 ...
- [蓝桥杯][2014年第五届真题]兰顿蚂蚁(模拟)
题目描述 兰顿蚂蚁,是于1986年,由克里斯·兰顿提出来的,属于细胞自动机的一种. 平面上的正方形格子被填上黑色或白色.在其中一格正方形内有一只"蚂蚁". 蚂蚁的头部朝向为:上下左 ...
- [蓝桥杯][2014年第五届真题]兰顿蚂蚁-模拟
题目描述 兰顿蚂蚁,是于1986年,由克里斯·兰顿提出来的,属于细胞自动机的一种. 平面上的正方形格子被填上黑色或白色.在其中一格正方形内有一只"蚂蚁". 蚂蚁的头部朝向为:上下左 ...
- [Java] 蓝桥杯PREV-33 历届试题 兰顿蚂蚁
问题描述 兰顿蚂蚁,是于1986年,由克里斯·兰顿提出来的,属于细胞自动机的一种. 平面上的正方形格子被填上黑色或白色.在其中一格正方形内有一只"蚂蚁". 蚂蚁的头部朝向为:上下左 ...
- 第五届蓝桥杯 软件类省赛真题 第八题:兰顿蚂蚁
标题:兰顿蚂蚁 兰顿蚂蚁,是于1986年,由克里斯·兰顿提出来的,属于细胞自动机的一种. 平面上的正方形格子被填上黑色或白色.在其中一格正方形内有一只"蚂蚁". 蚂蚁的头部 ...
- 历届试题 核桃的数量(3个数的最小公倍数),翻硬币(贪心),买不到的数目(在范围内暴力,找范围,最小公倍数是上界,最小的数是下界),兰顿蚂蚁(dfs,模拟)
历届试题 核桃的数量 问题描述 小张是软件项目经理,他带领3个开发组.工期紧,今天都在加班呢.为鼓舞士气,小张打算给每个组发一袋核桃(据传言能补脑).他的要求是: 各组的核桃数量必须相同 各组内必须能 ...
- 【菜鸟算题】兰顿蚂蚁
题目 兰顿蚂蚁,是于1986年,由克里斯·兰顿提出来的,属于细胞自动机的一种. 平面上的正方形格子被填上黑色或白色.在其中一格正方形内有一只"蚂蚁". 蚂蚁的头部朝向为:上下左右其 ...
最新文章
- Linux磁盘空间满的处理方法
- 2020 年开源许可证最新趋势:67% 为宽松许可证
- javaweb登录系统账号密码验证等
- 敏捷个人第五次练习:个人使命宣言
- php 没有libmysql.dll,PHP5.3以上版本没有libmysql.dll,以及由此带来的困扰
- open***2.3.12安装与easy-rsa3的使用
- linux鼠标键盘被禁用了,debian squeeze下鼠标、键盘突然被系统禁用
- App引导页学习进阶临摹模板|UI界面设计步骤
- extjs4 冻结列_extjs4 事件处理
- 知乎人均985?Python爬50W数据,BI做出可视化后,我有了答案
- STC单片机 命名规则,最小系统 图示
- 交互设计精髓之理解输出
- html设置字体为小型大写字母,css – 启用小型大写字母
- 总结Windows查看产品密匙方法
- iOS控件使用和多样布局
- Google APK下载
- 2015年3月31日通过VMware VCP 认证
- 手机行业影像突破,谁能成为下一个“苹果”?
- arm 协处理器cp14 cp15
- 汉诺塔(Tower of hanoi)