React-2048-game

react 毫无疑问是目前最热门的前端视图库，redux 是 React 社区基于函数式编程**也是最热门的应用状态管理容器；本项目构建的 2048 游戏通过践行社区的最佳实践来学习这套前端编程**。

👉 开始游戏

预览

桌面端

移动端

特性

响应式

自适应桌面和移动平台不同分辨率和尺寸，支持移动平台浏览器触控操作。下面的动图模拟了不同分辨率下的显示效果。

数据持久化

网页应用最怕断电和离线，第一个问题通过store.subscribe订阅 redux 状态更新，把状态序列化到localStorage储存，即使刷新，断电，程序奔溃再次打开仍然是最新的状态，第二个问题借助 chrome 的 PWA 技术，即使断开网络仍然可以访问缓存的资源文件。

Redux 状态

redux 是一个可预测的 JS 状态管理容器，结合 Redux DevTools extension 扩展可以很方便的进行应用状态穿梭，对辅助开发和debug大有裨益。

评论系统

借助 github issue api，使用 github 账号登录之后以回复 issue 的方式留言。留言支持 markdown 格式，和 github issue 体验类似。

PWA

在支持 PWA 技术的浏览器上（比如较新的 chrome）打开页面会自动询问你添加到屏幕，添加过程就像原生应用的安装一样。应用添加之后就可以像原生应用一样离线操作，也可以卸载应用。下图演示了 PWA 在 chrome 上面的添加过程，添加完成之后桌面会出现添加的应用，即便关闭所有网络仍然可以像原生应用一样正常操作。

i18n

应用支持多语言，且自动适配浏览器语言设置。目前检测到中文优先使用中文，否则默认使用英文显示。需要更多语言支持，编辑src/utils/i18n.js的 data对象，添加对应语言文字即可。

技术栈

react，组件式构建 UI
redux，管理应用状态
babel，把 es2017+ 语法转成 es5 兼容语法
webpack，代码热加载，scss 样式文件处理，组件打包编译等等
scss，成熟的 css 预处理器（之所以没有用 CssInJS 的方案是因为这些方案普遍不完美，也考虑到要遵循样式和结构分离的原则）
eslint，使用流行的 airbnb 的代码规范严格约束代码风格
stylelint，scss 代码风格检查
jest，fb 出品的代码测试框架，snapshot 功能对测试 react 组件 UI 十分方便
Prettier，js 和 scss 代码格式美化工具
PWA(Progressive Web Apps)，借助浏览器 service worker 能力，使 web 应用在移动平台有接近原生应用的能力，可离线使用，接收通知消息等等

运行 & 测试 & 打包

因为配置文件用了 es6+ 语法所以要求 node 的版本大于 6.10，同时建议使用 yarn 来管理依赖包。fork 项目之后可以按如下命令操作。

  npm i -g yarn # 安装 yarn
  git clone git@github.com:<你的名字>/React-2048-game.git
  cd React-2048-game
  yarn # 安装依赖包
  yarn start # 开启调试模式
  yarn test # 自动测试
  yarn build # 打包代码

踩坑记录

在调烟花动画的时候发现没效果，仔细对比了下 webpack 编译后的 css 文件发现所有的 @keyframes 的名字都加了 hash 值（也就是当成普通的局部 css 类名），解决办法就是在 @keyframes 的名字前面和整个 scss 文件添加伪类 :global，可以参考烟花的 scss 文件，这不是完美的解决办法(css 类名不再有局部特性)，后续再深挖一下。

License

MIT

danielfengyu/React-2048-game