最近花了兩三天時(shí)間做了一個(gè)簡易的2048 React版本(配色山寨)褐缠,供大家參考娛樂~
首先看效果:
可以看到,整體畫面還算流暢风瘦,有可以優(yōu)化的地方:1.有時(shí)候移動(dòng)還沒有結(jié)束队魏,新的棋子已經(jīng)產(chǎn)生;2.同行(列)的移動(dòng)時(shí)間有時(shí)候不一致万搔;3.可以利用localStorage胡桨,實(shí)現(xiàn)保存功能。有興趣的可以直接訪問地址(同時(shí)瞬雹,支持手機(jī)和PC端哦)昧谊,有迫不及待的同學(xué),可以直接訪問源碼地址
關(guān)鍵思路:
- 組件劃分酗捌;棋子和棋盤的Dumb及Smart組件呢诬;
- Redux設(shè)計(jì);棋子的移動(dòng)主要依賴兩個(gè)State分支:以棋子id為屬性名的棋子list和以棋盤坐標(biāo)為索引的map胖缤,這樣做的好處是:1.對(duì)棋子的增刪改查利用list尚镰;2.操作棋子移動(dòng)利用map。
- 算法設(shè)計(jì)哪廓;利用算法狗唉,實(shí)現(xiàn)map中的移動(dòng)問題。
- 動(dòng)畫設(shè)計(jì)涡真;此處做的比較簡易分俯,直接利用React15版本的
react-addons-css-transition-group
和CSS3 transition肾筐。