2048小游戏

*之前看一个课程视频，教做一个Web端的2048的小游戏，现在重复看下，对之前的笔记做个总结。*

**游戏**：逻辑，技术，架构，==创意==，美术

技术这里面除了最基本的，还用到了jQuery（动画部分）。
架构是MVC的。

主要需要以下几个部分：
- UI（V）
- 动画效果逻辑
- 游戏主逻辑（C）
- 支撑逻辑
- 游戏数据（M）

jquery的源选择可以用百度的lib，速度还行，不过为了放心，还是自己复制下吧

---

1. 加载各项资源（board（Array）， score）
- grid-container position：relative
- grid-cell position:absolute

在main.js里面：
$().ready(){} ——加载
function newgame() {

//初始化棋盘格
init()——两个for循环，创建grid-cell-x-y , .css()控制位置,具体的实现可以调用support.js里面的函数（对top和left进行计算）。

number-cell —— var board
遍历数组（生成二维数组）
updateBoardView（）

number-cell是动态定位，pos:absolute

数字的生成也可以带一点动画，这个可以将方法写在动画的控制逻辑
数字的不同，颜色也不同。

number-cell放在grid-cell中间

//在随机两个格子生成数字
随机位置，随机数字，放进去
}

2. 游戏循环

- 基于时间的游戏循环
- 基于玩家响应的循环（JS事件响应机制）
.keydown(function(){})

3. 交互细节
canMoveLeft()
左边是否没有数字
左边数字是否和自己相等
遍历
障碍物

if(moveLeft()){
    generateOneNumber();
    isGameover();
}

isGameover：nospace,nomove

score:分数统计 updateScore()

交互逻辑调试

4.优化
生成随机数，不要死循环，设置一个值，如果超过那个值，就人工找一个。