【总结篇】js编写的2048小游戏开发（上：思路）

2048是大家都熟悉的一款魔性小游戏，其操作简单，却极其有效地杀时间。本篇将详细讲解如何构建这款小游戏的开发思路、如何根据玩法进一步分析设计编程结构，适合有一定html、css、js、jquery语言基础的读者阅读。

 

一.游戏试玩

      游戏玩法大家都很熟悉，每次可以选择上下左右中的一个方向滑动一次，所有数字方块都会向滑动的方向靠拢，每次滑动后空白的地方随机出现一个数字方块2或4，相邻的相同数字的方块在靠拢时会相加融合为一个方块。不断叠加以拼凑出标志性数字2048，并仍可以无休止地继续叠加下去，直至空间塞满方格无法移动游戏结束。

二.游戏剖析

2.1 界面

    界面主体部分就是由4×4的方格框与其中会动的数字方格构成，再加上游戏分数累计。空方格框的界面编写较为简单，float：left与宽高百分比结合即可实现。根据观察我们可发现数字方格具有以下重要属性：数值与其对应颜色、位置，在系统增加随机格子或操作移动格子时，界面所呈现的是某位置格子的出现或伴随某位置格子的消失，以及某数值格子的出现或消失。因而我们想到用一组名为坐标的class类定义位置属性，用一组名为数值的class类定义对应数值的对应背景颜色属性，通过jquery中addClass与removeClass方法操控格子属性变化，注意方格布局不能采用流式布局，position属性值应为absolute，对应方格框div容器的position属性值为relative。总结即：