JS开发-2048游戏文档

2048游戏文档

游戏规则：

1.按键操作

上下左右控制数字移动，移动过程中相邻的相同数字进行相加

2.如何开始

页面加载完毕后即可开始游戏。

3.游戏目标

让相同的数字相加，获得更高分！

页面内容：

1.4*4个格子

2.分数显示

3.合成最大数字显示

4.新游戏按钮

游戏主要逻辑：

游戏使用上下左右键分别控制4个方向格子的移动和合并

   以←键为例：

1.向左移动：从左开始，把所有非空格的数字迁移到空格子中，另一个格子置为空

2.向左合并：把所有相邻的具有相同数字的格子合并（数值增倍）到左边格子中，另一个格子置为空

3.向左移动：从左开始，把所有非空格的数字迁移到空格子中，另一个格子置为空

   在以上操作中，如有有移动或者是合并的情况发生就随机在空格子中生成一个新的数字

←向左移动

→向右移动

游戏实现：

1. 初始化界面：4*4格子：div，分数：label，合成值：label，新游戏：button

游戏逻辑的初始化：默认只产生两个数字

 

2. 设置键盘监听事件：根据用户输入执行移动操作

3. 移动操作：包含①移动②合并③移动 三步（关于移动和合并的具体步骤）

4. 生成新数字：判断上一步操作中是否有数字进行移动或者合并的情况，如果有就生成一个新数字

5. 记录游戏中因为合并产生的分数，并在“分数”label中进行显示

6. 记录游戏中合并的最大值，并在“合成值”label中进行显示

7. 判断游戏是否继续：两种情况表示游戏继续：①有空格子②相邻的格子数值相等（上下左右4个方向）

8. 游戏结束：如果游戏结束显示当前游戏分数和最大值

9. “新游戏”按钮：点击“新游戏”按钮重置游戏界面，回到第1步