1. 1. 项目结构
    1. 1.1. Base
    2. 1.2. Config
    3. 1.3. Utils
    4. 1.4. Game
      1. 1.4.1. start
      2. 1.4.2. canMove
      3. 1.4.3. move
    5. 1.5. GameRender
    6. 1.6. GameController
    7. 1.7. index
  2. 2. 小记
  3. 3. 一些还未完成的

项目结构——JavaScript版本的2048实现[0]

最近在看一本书《HTML5 Canvas开发详解》 看到了一定程度，打算找一个项目练练手
遂想到了前几年玩过的一个游戏2048 于是开始了尝试实现一个JavaScript版2048

项目结构

项目地址：https://github.com/jiasm/2048
LiveDemo: http://jiasm.org/2048

.
├── 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
只做了两件事：

  1. 对界面进行响应式处理。放大Canvas为一个正方形
  2. 实例化一个GameController

小记

整体的项目结构就是这些。
开发时间貌似是用了四个晚上，周一到周四，9点-1点。。
这一套做下来，目前是遇到了两个坑：

  1. 矩阵合并&移动的逻辑
  2. 动画的实现

一些还未完成的

  1. 本地缓存矩阵数据，防止页面刷新后只能重新开始
  2. 积分的统计