《合成10》是一个很容易上瘾的游戏。
之前尝试的写了个网页版，游戏地址 ccx01.com/game/get10/
现在写一下网页版合成10的制作过程。
这个游戏是用html，css，javascript写的。
这3个东西正常情况下是用来写网页的，就是你现在看到的这些文章之类的东西。但我觉得这些东西本来就是用来写游戏的。
关于游戏，每个人的理解都不一样，在我看来，只要能玩的，都可以叫游戏。比如一个按钮，一段文字，都可以称作游戏。如果按钮的图像换成地鼠，点击就躲起来，放开鼠标又冒出头来；如果文字中间的语序可以延伸出多个意思，让人第一遍懵然不知，第二遍恍然大悟，这些不就是游戏么？
第一步，制作方块：
我们需要先制作方块，简单分析一下，每个方块都有2个属性：数字与位置。
确定每个方块用<div>来存储信息，那么批量生成5x5个方块，每个方块有一个随机的数字，对不同数字的方块设置对应的css样式，然后一行排5个，一共排成5行，排完后大概长这样。
第二步，点击判断：
当玩家点击一个方块的时候，需要查找到周围与其相连接的数字相同的方块。
效果：
首先，当玩家点击一个方块的时候，我们可以得到这个方块的信息，它的数字及位置。
接着开始进行扩展判断，对当前方块的4个方向进行判断，如果它的4个方向中有数字相同的方块则记录下来，接着继续对记录过的方块进行同样的判断。
比如点击第三行第四列的方块，那么就可以得到信息，上、右、下三个方块与当前方块是一样的，那么把这3个方块一起记录下来。
接着轮流对上、右、下3个方块做同样的判断。
这时候会遇到一个问题，就是有些方向上的数字相同的方块之前已经记录过了。比如对上方向的方块来说，它的下方向必定是相同的数字。
为了解决这个问题，我们可以把检测过的方块做上标记，如果这个方块已经做过方向判断，那么就不需要再进行判断，因此整个计算的路线是这样的。
由于下方向的方块在右方向的方块判断时已经被记录过，因此不再需要判断。
再加个图帮助理解：
找到所有相同数字并且相连的方块后，再点击一下，则将所有方块收拢。
记录中的方块全部去除，在点击的位置添加一个新的方块，方块上的数字加1。
第三步，再次布局：
方块去除了，我们需要生成新的方块补全去除的位置，但是旧的方块需要移动位置。
做遍历，多次循环判断方块下方是否是空格。（我写的游戏是从右往左收拢，原理是一样的）
直到所有的方块下面都没有空格为止
最后，以列为单位判断当前列有多少空格，则通过第一步的方法补充对应个数的方块。
至此，合成10的游戏的基本玩法就完成了。不过因为界面有点丑，所以稍微用css美化一下。
因为合成10整体的界面也比较简单，所以不需要图片，几行css就搞定了。
最终效果图：
关于这个游戏，代码部分的话，只要会js的循环操作，数组的一些简单替换以及css的基础样式绘制就能完成了，主要是逻辑上的一些判断。
不过没想到我到最后居然一行代码都没贴╮(￣▽￣")╭
网友评论