Skip to content

Latest commit

 

History

History
 
 

2048

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

HTML/CSS/JavaScript实现的2048小游戏

说明文章:http:https://blog.csdn.net/liusaint1992/article/details/51549596

演示地址:http:https://runningls.com/demos/2016/2048/

实现功能:主要实现的功能:

1.初始化的时候随机生成两个为2的格子。注意两个格子别生成到一个格子上去了。

2.方块的移动和合并。方块移动的动画。 根据移动后的值。改变方块的颜色。注意操作的顺序。 颜色主要是添加和移除 2到2048所代表的颜色的class。 位置也添加和移除对应位置所代表的类。 动画则是用css3的过渡。0.2s。

3.判断某个方向上不能移动,不能出现新的格子。

4.随机在空白处出现下一块。

5.判输。 需要满足条件 1.没有空格子。2.横方向上没有相邻且相等的方块。3.纵方向上没有相邻且相等的方块。 任何一项不满足都没输。

6.判赢。 某个格子的值达到2048。

7.分数。任意两个格子合并的时候,分数增加合并之后方块的值。

8.包裹div的大小任意设置,方块中的数字始终垂直居中。

9.核心算法是判断每个格子移动到什么位置。应不应该合并。

我这里使用的方法是,循环到每一个格子。 然后这个格子的值,依次去跟它移动方向上的下一位做比较。 下一位是空,可以继续跟下一位比较 ,直到比较到下一位不是空且跟当前比较值相等或不相等或遇到比较的边界(之前有合并的值对应的格子或移动方向上最后一格), 判断是移动并合并还是只移动,最终的移动方位。 值。

2016年5月完成。