俄罗斯方块游戏，webpack + jquery + typescript 单一职责、开闭原则
- 安装 webpack
- 安装 html-webpack-plugin
- 安装 clean-webpack-plugin
- 安装 webpack-dev-server 启动一个开发服务器
npm run dev - 安装 ts 的相应 loader： ts-loader, awsome-typescript-loader, 他们依赖 typescript， 配置
tsconfig.json
单一职能原则：每个类只做跟它相关的一件事 开闭原则：系统中的类，应该对扩展开放，对修改关闭
基于以上两个原则，系统中使用如下模式： 数据-界面分离模式
传统面向对象语言，书写类的属性时，往往会进行如下操作：
- 所有的属性全部私有化
- 使用公开的方法提供对属性的访问
小方块类：它能处理自己的数据，知道什么时候需要显示，但不知道怎么显示 属性： 显示者、坐标、颜色
react、react-dom / react-native
作用：用于显示一个小方块到页面上SquarPageViewer
属性/方法：小方块 dom、 展示、移除
组合类中的属性/方法：
- 小方块的数组
思考：该数组的组成能不能发生变化。
回答：不能发生变化，是只读数组
思考：该数组的每一项从何而来
一个方块的组合，取决于组合的形状（一组相对坐标的组合，该组合中有一个特殊坐标，表示形状的中心）
如果知道：形状、中心点坐标、颜色，就可以设置小方块的数组
- 形状
- 中心点坐标
- 根据中心点坐标设置每一个小方块的坐标，
setSquarePoint - 旋转：旋转后的形状，旋转方向，旋转后重新设置小方块坐标
根据不同的中心坐标和颜色随机生产不同形状的俄罗斯方块， 每一个方块的旋转规则都不同。
游戏规则： 是否可以移动，方块移动，旋转，消除，
旋转的本质：根据当前形状 -> 新的形状
- 有些方块是不旋转的，有些方块旋转时只有两种状态
rotate 方法有一种通用的实现方式，但是，不同的情况下，会有不同的具体实现
将 SquareGroup 作为父类，其他的方块都是它的子类，子类可以重写父类的方法
- 旋转不能超出边界
Game 类清楚什么时候进行显示的切换，但不知道如何显示 游戏开始，暂停，下/左/右操作，自由下落，方块切换，触底，增加分数，
触底：当前方块到达最底部
什么时候可能发生触底？（什么时候调用函数）
- 自动下落
- 玩家控制下落
触底之后做什么？（函数如何编写的问题）
- 切换方块
- 保存已落下的方块
- 消除方块的处理
消除时做哪些事？ 从界面上移除、从 exists 数组中移除，改变 y 坐标
- 游戏是否结束
为什么要讲面向对象？
- 面向对象带来了新的开发方式
面向对象开发已经非常成熟，特别善于解决复杂问题
-
TypeScript 的某些语法是专门为面向对象准备
-
学习一些设计模式
开发：高内聚、低耦合