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

[本日志由 dh20156 于 2009-12-12 02:07 PM 编辑]
文章来自: DHTML精英,WEB前端专家!
引用通告: 查看所有引用 | 我要引用此文章
Tags: swapxswapx GameGame 游戏游戏