web版《合成10》代码分享

变成月更了。

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

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

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

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

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

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



正文

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

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

这次来直接分享代码吧。

web版《合成10》代码分享_第1张图片

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

https://github.com/ccx01/get10

web版《合成10》代码分享_第2张图片

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

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

web版《合成10》代码分享_第3张图片
web版《合成10》代码分享_第4张图片

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

首先是游戏的样式:

web版《合成10》代码分享_第5张图片

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

web版《合成10》代码分享_第6张图片

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

web版《合成10》代码分享_第7张图片

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

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

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


1、初始化

web版《合成10》代码分享_第8张图片
web版《合成10》代码分享_第9张图片

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

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

web版《合成10》代码分享_第10张图片

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

web版《合成10》代码分享_第11张图片

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

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

2、点击操作

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

点击时的函数

web版《合成10》代码分享_第12张图片

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

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

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

web版《合成10》代码分享_第13张图片

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

web版《合成10》代码分享_第14张图片

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

web版《合成10》代码分享_第15张图片

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

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

web版《合成10》代码分享_第16张图片

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

3、重新布局

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

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

4、小结

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

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

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

为了改掉这个糟糕的情况,就像开头说的那样,我想要把以前弄的东西进行扩展,而不是再重新开始,毕竟这是『理解自己』的一个重要步骤。

之后,应该还是会尽量维持在周更的情况吧。(日更?不可能-___,-)

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


web版《合成10》代码分享_第17张图片
这里记录了另一个宇宙的故事


你可能感兴趣的:(web版《合成10》代码分享)