项目结构——JavaScript版本的2048实现[0]
最近在看一本书《HTML5 Canvas开发详解》 看到了一定程度，打算找一个项目练练手 遂想到了前几年玩过的一个游戏
2048于是开始了尝试实现一个JavaScript版2048
项目结构
项目地址：https://github.com/jiasm/2048 LiveDemo: http://jiasm.org/2048
代码语言：javascript复制.
├── LICENSE
├── README.md
├── dist
│ ├── bundle.js
│ └── main.js.map
├── index.html
├── package.json
├── src
│ ├── Base.js
│ ├── Config.js
│ ├── Utils.js
│ ├── Game.js
│ ├── GameController.js
│ ├── GameRender.js
│ └── index.js
└── webpack.config.js使用webpack进行打包，因为有用到了babel，所以整体语法采用ES6、ES7写法 （写起来无比的舒心）。
因为该GitHub项目设置了Git Pages 所以dist文件夹就保留在项目中了，没有删除。
文件夹src里边就是所有的代码了。
Base
一个聊胜于无的基类。。就是让类拥有一个通过.init就可以实现实例化对象的功能
export default class Base {
static init (...arg) {
return new this(...arg)
}
}Config
该文件里边存储了一些配置参数，比如默认的矩阵数量、2048中各个方块显示的文本&颜色之类的。
方便拿走即用。。修改一个配置文件即可得到你想要的2048
Utils
里边提供了一个log方法以及一个增强版的logMatrix
log方法只在window.debug === true时生效。logMatrix方法接收一个二维数据，会将数组中的数据格式化后展示出来，方便调试。
Game
该游戏的核心类，生成渲染所需要的二维数据矩阵 提供如下几个方法
start
初始化一个游戏实例 生成矩阵数据
canMove
返回一个Boolean值，来确定是否可以继续移动
move
将当前矩阵按照传入函数的direction来进行移动，并在移动后会随机塞入一个新的item
GameRender
用来将矩阵数据渲染到
Canvas中（由于Game实例返回的是一个二维数组，GameRender就可以非常灵活的使用了，你也可以选择使用DOM来渲染，只不过我本意是要练练Canvas，所以选择了这个方案，后期在添加一些动画时差点搞死自己。。。）
该类只提供一个API，那就是render，将二维数组渲染至Canvas（具体的实现，以后再谈）。
GameController
用来控制与用户的交互
该类是作为一个控制器来存在的。
监听了键盘&触摸的一些事件，并调用Game获取数据，遂即调用GameRender来进行渲染。
index
index作为应用的入口文件entries
只做了两件事：
- 对界面进行响应式处理。放大
Canvas为一个正方形 - 实例化一个
GameController
小记
整体的项目结构就是这些。 开发时间貌似是用了四个晚上，周一到周四，9点-1点。。 这一套做下来，目前是遇到了两个坑：
- 矩阵合并&移动的逻辑
- 动画的实现
一些还未完成的
- 本地缓存矩阵数据，防止页面刷新后只能重新开始
- 积分的统计
