项目结构——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. 积分的统计