JavaScript Swap X Game实现原理
圣诞、元旦将至，简单写了一个小游戏来应应景。

先上图，简单制作了4种皮肤：圣诞、WIN32系统图标、中国风和CSDN水园头像代表 ^_^














Swap X，不知道要为这个游戏取个什么名字，貌似没有专门的名字，有的叫魔法寿司，有的叫碰碰球，不同的实现有不同的名字，只好通过它的游戏方式来给它命名了，通过交换两个东东来消除相同的部分，所以就叫它Swap X了。

游戏规则：

通过交换水平及垂直方向上的两个物件，如果交换后的行或列中有连续3个（视具体实现而定，有的是4个）相同的，则消除它们，然后填充消除的部分，继续游戏。

所以，在这个游戏中，我们至少要有一个能够找出这些相同物件的算法，而且，考虑到有时候消除后，游戏界面中可能不存在可以继续消除的玩法了，这时候，我们还会需要一个能够检测游戏界面中是否还能继续玩下去的算法，这个算法可以同时用在游戏提示上。比如，使用提示时，则提示玩家某个物件可以进行交换。

查找相同数据的算法仍然沿用了上一个游戏“玛丽医生”中的算法（参见：http://www.jslab.org.cn/?tag=getsamelistfrommartix），在本游戏中只做了一点点改变，即加上了起始维数。因为本游戏中的数据格式由两部分组成，hide区域数据和show区域数据。

整个游戏是一个完整的表格，通过对折，将上半部分划分为hide区域，下半部分划分为show区域。

hide区域被用作预存下一次需要掉落到show区域中被消除的空格中去的数据，此部分对玩家不可见。

show区域则作为玩家的操作界面。

为了保持数据的连贯性，在算法中，我们对这两个区域的数据还是视为整个表格的数据，以免未来在不同的数据栈中切换操作，所以，查找相同数据算法及后面的检测是否可以继续交换的算法都有一个起始维数用于对该数据进行切割，以取到游戏操作部分的数据。

由于本游戏使用Table元素作为游戏原型，所以在处理掉落及交换的时候，视觉效果不太好处理。虽然可以加上一些额外的补偿，不过由于偶比较懒，凑合着能玩，就没去做这部分优化了。

好了，一起来试试这个游戏吧：

http://www.v-ec.com/games/swapx/default.htm

------解决方案--------------------
我觉得最好加上拖动效果。画面看起来会更加流畅
------解决方案--------------------
不过还是不错。学习了
------解决方案--------------------
不错，纯支持
------解决方案--------------------
菜鸟 来学习！
------解决方案--------------------
JF
------解决方案--------------------
代码提供下载吗？
------解决方案--------------------
代码提供下载吗？
------解决方案--------------------
顶一个，HOHO
------解决方案--------------------
好玩
------解决方案--------------------
顶
------解决方案--------------------
好的.留名
------解决方案--------------------
学习
------解决方案--------------------
学习
------解决方案--------------------
纯支持。
------解决方案--------------------
以后我要写一个网页版的魔兽争霸,大家一起玩.
------解决方案--------------------
漂亮呀
------解决方案--------------------
终于了解了不错
------解决方案--------------------
明白了谢谢
------解决方案--------------------
呵呵 这么强大啊 牛
------解决方案--------------------
强！顶
------解决方案--------------------

------解决方案--------------------
好像很强哦，占位，以后来学学！
------解决方案--------------------
不错。
------解决方案--------------------
顶一个，HEHE
------解决方案--------------------
鼓励，鼓励