2048 React版开发

作者: 小前seant | 来源:发表于2017-10-17 09:07 被阅读59次

    最近花了两三天时间做了一个简易的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。

    相关文章

      网友评论

        本文标题:2048 React版开发

        本文链接:https://www.haomeiwen.com/subject/aozkuxtx.html