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写一份。这种情况,导致我很多东西在完成一小部分后就弃坑了,即使当时在制作过程中,明明想着如何为以后的自己继续制作时有更好的扩展空间。

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

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

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

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

原文发表时间:2017-05-21

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

采用DIV+CSS布局对SEO优化有何好处?

DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道。代码精简所带来SEO优化直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完...

20560
来自专栏十月梦想

css3 flex弹性布局总结

本文涉及内容如下: flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器,但属性实在太多让人无从下手,因此将自己所学的...

12230
来自专栏菜鸟前端工程师

html+css学习笔记019-H5响应式布局0自适应布局

40820
来自专栏数据结构笔记

c++俄罗斯方块(一):程序设计

俄罗斯方块几乎是 c/c++课设的经典题目了,网上一搜一大把,那我为什么还要写呢。

24310
来自专栏Coding迪斯尼

寿司快卖:实现游戏主流程--制作寿司和客户显示动画特效

上一节我们搭建了游戏的基本框架。游戏界面被分为若干个板块,其中一个板块显示了各种制作寿司的材料,它的目的是用于玩家根据信息组装各种寿司,本节我们进入游戏的主流程...

8830
来自专栏cs

学markdown怎能不知道与之相关的html了include <iostream>

<h2>导言</h2> <strong> markdown,hthl都是超文本标记语言,markdown是简化版本的html,兼容html语言,熟悉一下ht...

24640
来自专栏互联网杂技

轮播图也就是看看而已,确实越来越少的网站,采用轮播图了

轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它: ? 但轮播图对用户真的有意义吗...

46270
来自专栏程序人生 阅读快乐

CSS设计指南 (第3版)

《图灵程序设计丛书:CSS设计指南(第3版)》是一本面向初中级读者的经典设计指南。全书共分8章,前4章分别介绍了HTML标记和文档结构、CSS工作原理、定位元素...

7310
来自专栏葡萄城控件技术团队

基于Html5的Canvas实现的Clocks (钟表)

Canvas是Html5中非常重要的Feature 之一,究竟Canvas的未来会怎么样? 各大巨头有着不同的想法,微软的IE9会全面支持Canvas, Saf...

20860
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术之设计规范

以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

43360

扫码关注云+社区

领取腾讯云代金券