最近花了两三天时间做了一个简易的2048 React版本(配色山寨),供大家参考娱乐~
首先看效果:
可以看到,整体画面还算流畅,有可以优化的地方:1.有时候移动还没有结束,新的棋子已经产生;2.同行(列)的移动时间有时候不一致;3.可以利用localStorage,实现保存功能。有兴趣的可以直接访问地址(同时,支持手机和PC端哦),有迫不及待的同学,可以直接访问源码地址
关键思路:
- 组件划分;棋子和棋盘的Dumb及Smart组件;
- Redux设计;棋子的移动主要依赖两个State分支:以棋子id为属性名的棋子list和以棋盘坐标为索引的map,这样做的好处是:1.对棋子的增删改查利用list;2.操作棋子移动利用map。
- 算法设计;利用算法,实现map中的移动问题。
- 动画设计;此处做的比较简易,直接利用React15版本的
react-addons-css-transition-group
和CSS3 transition。