web版《合成10》制作过程

《合成10》是一个很容易上瘾的游戏。

之前尝试的写了个网页版，游戏地址 ccx01.com/game/get10/

现在写一下网页版合成10的制作过程。

这个游戏是用html，css，javascript写的。

这3个东西正常情况下是用来写网页的，但我觉得这些东西就是用来写游戏的。

关于游戏，每个人的理解都不一样，在我看来，只要能玩的，都可以叫游戏。比如一个按钮，一段文字，都可以称作游戏。如果按钮的图像换成地鼠，点击就躲起来，放开鼠标又冒出头来；如果文字中间的语序可以延伸出多个意思，让人第一遍懵然不知，第二遍恍然大悟，这些不就是游戏么？

第一步，制作方块：

我们需要先制作方块，简单分析一下，每个方块都有2个属性：数字与位置。

确定每个方块用<div>和js数组来存储信息，那么批量生成5x5个方块，每个方块有一个随机的数字，对不同数字的方块设置对应的css样式，然后一行排5个，一共排成5行，排完后大概长这样。

第二步，点击判断：

当玩家点击一个方块的时候，需要查找到周围与其相连接的数字相同的方块。

效果：

首先，当玩家点击一个方块的时候，我们可以得到这个方块的信息，它的数字及位置。

接着开始进行扩展判断，对当前方块的4个方向进行判断，如果它的4个方向中有数字相同的方块则记录下来，接着继续对记录过的方块进行同样的判断。

比如点击第三行第四列的方块，那么就可以得到信息，上、右、下三个方块与当前方块是一样的，那么把这3个方块一起记录下来。

接着轮流对上、右、下3个方块做同样的判断。

这时候会遇到一个问题，就是有些方向上的数字相同的方块之前已经记录过了。比如对上方向的方块来说，它的下方向必定是相同的数字。

为了解决这个问题，我们可以把检测过的方块做上标记，如果这个方块已经做过方向判断，那么就不需要再进行判断，因此整个计算的路线是这样的。

由于下方向的方块在右方向的方块判断时已经被记录过，因此不再需要判断。

再加个图帮助理解：

找到所有相同数字并且相连的方块后，再点击一下，则将所有方块收拢。

记录中的方块全部去除，在点击的位置添加一个新的方块，方块上的数字加1。

第三步，再次布局：

方块去除了，我们需要生成新的方块补全去除的位置，但是旧的方块需要移动位置。

做遍历，多次循环判断方块下方是否是空格。（我写的游戏是从右往左收拢，原理是一样的）

直到所有的方块下面都没有空格为止

最后，以列为单位判断当前列有多少空格，则通过第一步的方法补充对应个数的方块。

至此，合成10的游戏的基本玩法就完成了。不过因为界面有点丑，所以用css美化一下。

因为合成10整体的游戏界面比较简单，所以不需要图片，几行css就搞定了。

在画面上，方块有两种状态：未选中及选中状态，另外每个数字有独立的样式。

未选中状态：

选中状态：

最终效果图：

关于这个游戏，代码部分的话，只要会js的循环操作以及数组的一些简单替换就能完成了，主要是逻辑上的一些判断比较绕。

不过没想到我到最后居然一行代码都没贴……╮(￣▽￣")╭