2048 React版开发

最近花了两三天时间做了一个简易的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。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容