web版《合成10》代码分享

变成月更了。

想做的事情很多，继续扩展『格斗节奏』，把『小红帽』文字冒险游戏成立一个童话系列，优化『月千之夜』和『破壳曼』，上线『Boo』。继续完成各个漫画系列，另一个次元的小故事系列，甚至还有想新开几个坑，比如领养一些『人工智障AI』（3d宠物）。

然而时间成本却像一道大墙堵在眼前，这些成本不是依靠『合理的时间管理』就能抵消的。

没画过漫画的人，大概很难理解，一页A4纸要画一两天是什么感觉。依靠自己贫瘠的中学写作文的经验，甚至可能得出这样的结论『一面A4纸啊，要画一整天吗？写作文的话，连800字都不到吧？』

用个更极端的例子，一个对足球一无所知的人，在这种情况下就可能发出这样的声音『什么？一分钟踢不进3个球吗？球门那么大，踢完捡回来再踢，踢进一个球要花你20秒时间吗？啊？球不用自己去捡，有人会帮忙捡？』

当然，其实这也不过是托辞，时间是够的，如果专心一件事一件事做完整的话。

想做的事情太多，导致弃的坑也多，心态太浮躁了。

正文

这个游戏，我提了好几次了，公众号SignACG回复『合成10』可以获取游戏链接。

前面有一篇讲『合成10』的游戏实现逻辑。

这次来直接分享代码吧。

阅读本文需要有一定的html+css+javascript的基础水平。

我把代码放到github上了，阅读原文可查看，或访问这个链接

https://github.com/ccx01/get10

index-done.html就是完整的代码了，无注释。

实际上这个游戏的代码量并不多：

286行，比一些普通web页面的代码量还要少。但是里面的游戏逻辑却不是一个数量级的。

首先是游戏的样式：

因为游戏内画面表现由dom呈现，所以我直接把一些对应的数据存在dom内

v代表当前方块的值，r，c分别代表当前方块的竖排横排的位置。

on是方块的当前状态，1：方块被选中，2：方块位移中，3：方块隐藏

这样，游戏的基本画面就完成了。

接下来是游戏的逻辑代码：

1、初始化

以5x5的格式，把随机生成的方块数据存入方块的数组box_data中，然后利用绘图函数initBox把box_data中的数据依次以dom的形式呈现在web页面上。

完成这些后，为了后续的计算，我们可以把方块的『归类』提前实现。

在生成方块并置入画面的同时，我们不停的对方块进行遍历：

当判断到新的方块的与相邻的旧方块的值v相同时，我们会给这个新方块与旧方块一样的set值。这个set值在相同值并且相邻的时候，会保持一致。

完成这一步后，初始化布局基本算是完成了。

2、点击操作

因为是dom结构，所以我们可以直接把点击操作塞到dom节点中，当然，提取到js里也可以，这个没有太多要求。

点击时的函数

由于之前的布局，点击操作的步骤就变得相当简单。

点击方块后，会获取这个方块的各个属性，v，r，c，on，set。

那么只要把相同的set的方块的on值都设为1，就会出现，同方块被选中的情况。

在确定第一步选择后，点击功能出现第二个情况，点击已经选中的方块：

这个时候，把方块们的on值切到2，v值加1，然后开始做方块的移动操作。（setTimeout是为了省事）

移动方块的方式也比较简单，把on值为2的方块的r，c值切换到当前点击的方块的r，c值，这样，方块们就会『聚拢』到被点击的方块上。（聚拢也是为了省事）

『聚拢』完成后，需要更新一下方块数组box_data的数据，同时清除那些进行『聚拢』的方块。然后对数据进行遍历，查到被清除的方块周围是否有方块需要进行位移，如果没有则对当前方块位置进行补充。

这一步骤的逻辑最为复杂，但是完成后，又能得到一个完整的全新数组box_data。

3、重新布局

当数据重新整理完成后，只要按照第一步初始化函数，把新的数组box_data放入initBox中，生成一个新的画面，至此，一个完整的游戏过程就完成了。

最后，增加一些判定条件，比如每个方块的set值都不一样，这说明已经没有方块可以再进行合成了，那么此时就可以提示游戏结束，然后做一些『别的事情』，比如提交分数到排行榜，设置分享参数之类的。（当然我没去搞这个）

4、小结

不知道这样介绍下来，大家能否看的懂。

我有个很糟糕的习惯，对于之前的东西，我总是动不动就想完全推倒重做，这个其实是对以前的劳动成果极度的不尊重。如果在多人合作中，这种行为是要被打的（但不知道为啥，与人合作的时候，其实我还蛮能克制自己要重写的心情）。

比如这个『合成10』，如果现在的我来写的话，我可能就不会在这些代码上进行扩展了，而是重新开始从0写一份。这种情况，导致我很多东西在完成一小部分后就弃坑了，即使当时在制作过程中，明明想着如何为以后的自己继续制作时有更好的扩展空间。

为了改掉这个糟糕的情况，就像开头说的那样，我想要把以前弄的东西进行扩展，而不是再从头弄一次。

之后，应该还是会尽量维持在周更的情况吧。（日更？不可能-___,-）

但是创作是一个很漫长的过程，所以中途可能会穿插的发一些比较轻松点的故事和游戏介绍。