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的循环操作以及数组的一些简单替换就能完成了,主要是逻辑上的一些判断比较绕。

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

原文发布于微信公众号 - Sign(SignACG)

原文发表时间:2017-02-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏青蛙要fly的专栏

Android技能树 — View小结

这次是相对View做个小结,主要是View的工作原理,绘制流程等。为什么要总结这块,因为平时自定义View的情况多多少少都会遇到,如果能深刻了解这块知识,对自定...

35820
来自专栏coding for love

CSS入门9-定位机制

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

8030
来自专栏企鹅号快讯

Web前端:浅析“HTML+CSS的基本应用”

Hyper Text Markup Language,简称HTML,超文本标记语言,因页面中可以包含图片、链接、音乐、程序等非文本元素,所以称为超文本。 ? H...

252100
来自专栏小狼的世界

em是否到了退出的时候

今天看到 YUI CSS 框架中的时,看到用了其用来表示宽度的时候,很多地方都用了 em,在调整字体大小的时候,用了百分比。官方的说法是这样的:

7920
来自专栏Danny的专栏

前端基础——CSS+DIV布局

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

35110
来自专栏菩提树下的杨过

水平/垂直都居中的div

用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div...

29790
来自专栏24K纯开源

用Qt写软件系列四:定制个性化系统托盘菜单

导读     一款流行的软件,往往会在功能渐趋完善的时候,通过改善交互界面来提高用户体验。毕竟,就算再牛逼的产品,躲藏在糟糕的用户界面之后总会让用户心生不满。界...

440100
来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

12830
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

10420
来自专栏ionic3+

【技巧】ionic3如何实现优雅的弹窗动画

关于这篇文章,很早前就准备写了,只是内容属于我了解的非官方资料,怕有Bug风险误导别人,又怕我表述不清楚一直没动笔,后来群里有人专门找我问这个,那我还是写一下,...

31430

扫码关注云+社区

领取腾讯云代金券