2048小游戏(JavaScript版) (1) 游戏介绍

1. 游戏介绍

如今开始学编程的，基本上都过手机游戏2048吧，那么这个游戏的玩法相信不少人都熟悉，我在这里再给你们回顾下吧。

1.1 游戏规则

每次控制全部方块向同一个方向运动，两个相同数字的方块撞在一块儿以后合并成为他们的和，每次操做以后会在空白的方格处随机生成一个2或者4，不断的组合让分数提升，在手机上有分数排行榜，那些大佬的分数真的使人叹服。若是16个格子所有填满而且相邻的格子都不相同也就是没法移动的话，那么恭喜你，gameover。

1.2 游戏基本原则

1. 最大的数必定要放到角落

2. 数字要按顺序紧邻排序

3. 保证最大数和次大数那一行/列是满的

这就是我给新手玩家分享的经验，遵照这几个规则，能够保证达到几万分的水准。

1.3 主要实现功能

而后就要来分析一下咱们须要实现的功能了：

1. 初始化界面，而且随机生成两个数字为2或者4的格子

2. 方块移动和合并适合的效果，方块的颜色要随着值的改变而改变

3. 判断在某个方向上是否能够移动，不能移动就不变化

4. 在后续生成随机数字的时候判断是否还有空间，有则生成下一块，没有则判断四个方向是否都没法移动，都知足时提示gameover并结束游戏

5. 在任意两个格子合并后，分数都要加上值为合并后格子的值

6. 判断每一个格子移动到什么位置，会不会合并

实现思路：

用向右方向移动为例，先判断格子是否可以向右方向移动，若是能够，循环每个格子。若是这个格子的值不为0，遍历格子右侧的元素，判断落脚的位置是否为空以及落脚位置的数字是否和原本的数字相等 。若是落脚的位置为空 && 中间没有障碍物，更新样式，将落脚位置格子的值设为移动格子的值，原格子值设为空。若是落脚位置的数字和原本的数字相等&& 中间没有障碍物，更新样式，将落脚位置格子的值设为移动格子值与落脚位置格子值相加后的值，原格子值设为空。

1.4 使用技术

HTML

CSS

JavaScript

jQuery

Vue

我准备作三个版本的，原生JavaScript版、jQuery版以及Vue版。

这也是第一次作录音视频，讲的很差的地方你们见谅。