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
[解决办法]
鼓励，鼓励

[解决办法]
学习
[解决办法]
很牛啊的
[解决办法]
真厉害啊
[解决办法]
heihei
[解决办法]
学习
[解决办法]
我要下载代码
[解决办法]
看看 强人
[解决办法]

[解决办法]

探讨

以后我要写一个网页版的魔兽争霸,大家一起玩.

[解决办法]
哇 ，原来 是 汇编 写的呢
[解决办法]
这个好玩。。。
[解决办法]
学习中
支持
[解决办法]
顶
[解决办法]
嘿嘿，看源文件学习学习，谢谢分享！
[解决办法]
Very good!
[解决办法]
啥时候我也能搞出这样的啊
[解决办法]
接分,帮顶
[解决办法]
顶!很强大!
[解决办法]
xuelile
[解决办法]
顶!很强大!
[解决办法]

[解决办法]

[解决办法]
学习了 有创意
[解决办法]
哇 好东西呢 lz能够有源代码没 让我们这些小弟也研究学习学习呢 做得不错哦
[解决办法]
不错！！！
[解决办法]
真的做的不错，呵呵 我还玩了蛮久的，
楼主给点分我吧 我没分了
[解决办法]
觉得自己是那么的渺小。 学习了 不错
[解决办法]
ding........................
[解决办法]
牛逼 鼓励 再接再厉

[解决办法]
.
[解决办法]

[解决办法]
强悍的楼主。。。
[解决办法]
台词被指下贱 洪晃狂批张艺谋
[解决办法]
好强··

[解决办法]
纯支持一下。
[解决办法]
up!
[解决办法]
太厉害了 。。。
[解决办法]
好资料,thank you
[解决办法]
我是来支持楼主的
[解决办法]
怎么样学精通啊
[解决办法]
强大！
[解决办法]
不错，代码在哪 啊，应该开源吧
[解决办法]
谈笑有鸿儒往来无白丁
[解决办法]
java技术交流群100756746，希望大家加入，我们共同讨论，共同进步！
[解决办法]
有bug
[解决办法]
很强大啊
[解决办法]
nb
[解决办法]
好厉害啊 强力啊 我也要钻研一番
[解决办法]
大牛~~啊。膜拜一下~~~
[解决办法]
牛人啊牛人
膜拜啊膜拜
[解决办法]
留名 顶你
[解决办法]
支持风兄！
[解决办法]
好
[解决办法]
怎么全搞了水源的头像
[解决办法]
保存的源文件，没有图片
[解决办法]
还是不知道怎么下？
我用的是FF的页面另存为

探讨

引用:
保存的源文件，没有图片


先下CSS文件，然后再将里边的背景图片下载下来~~``

[解决办法]
代码下载完了
[解决办法]
jf
[解决办法]
友情up
[解决办法]
第二次up
[解决办法]
元旦快乐！
春节快乐！！！！！

元旦快乐！
春节快乐！！！！！


元旦快乐！
春节快乐！！！！！