web《合成10》制作过程

2017. 02. 26

《合成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的基础样式绘制就能完成了,主要是逻辑上的一些判断。

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

这里记录了另一个宇宙的故事

动画游戏