万物皆可画

孩子们在编程的世界中，往往对创作自己的游戏充满热情，他们构建自己的英雄，这既是兴趣也是梦想，一个属于自己世界属于自己的英雄梦。

说到编程，很多小朋友的创作热情都会在游戏上。其实，这并不是沉迷游戏，而是在这里可以自由构建世界，自由创造人物。

但要创作一个不错的游戏，不仅需要巧妙地构思，还需要掌握许多技能。

前几天，我收到一位小读者的留言，他想创作一个独立英雄的游戏，但却被英雄的血条问题难住了。玩过游戏的小伙伴都知道，每位英雄都有属于自己的血量，在闯关过程中受到伤害会少血，通过采集果子或药品可以恢复。

为了解决读者遇到的技术难点，我写了这篇技术贴，案例清晰，没有多余内容，专注于血条制作，方便快速搬运到任何游戏之中。

拆解分析

将复杂问题简单化，一起看看血条吧！对血条进行拆解，主要分为两部分：1、血条的绘制；2、血量的控制。

其中最难的还要数血条的绘制，而血量的控制可以通过变量来实现。

针对绘制再进一步拆解

1、绘制血槽

2、绘制血条

3、跟随角色移动

接下来，创建一个空白角色作为“血条”，用这个角色完成血条的绘制。

程序编写

使用自制积木创建一个血条绘制积木块，包含血条起始位置的X坐标x、Y坐标y、最大血量值max，当前血量值blood等参数。

第一步：绘制血槽

选用灰色的画笔在角色的头顶绘制一条灰色的血槽。

第二步：绘制血条

修改画笔颜色为绿色，将角色剩余血量绘制出来。

血槽+血条的绘制方法，我想到了两种方法。

1、从左往右先绘制血槽，再将画笔移至最左端绘制血条。

2、将画笔移至最右端，先使用灰色绘制失血部分的血槽，然后使用绿色绘制血条部分。

或许你会问，为什么不直接从最左端先绘制绿色血条再绘制失血的血槽呢？这个疑问留给你尝试下，然后仔细观察血条的样子。

在这里，我挑选第二种血条绘制方案开始编写程序。

① 通过参数设置，我们知道画笔的起始坐标分别是参数中的x和y。

将画笔移动到初始位置，使用移动积木块来完成。

② 将画笔移动至血条的最右端。

将x坐标增加总血量max的长度，再调整方向向左开始绘制。

③ 绘制开始前，进行画笔初始化设置。

将之前绘制内容擦除，调整画笔粗细，设置画笔颜色，落笔后开始绘制。

灰色血槽的长度，是血条总量减去剩余血量，这也就是灰色血槽绘制时画笔移动的步数。

④ 绘制血条

将画笔颜色设置成绿色，移动血量的长度，绘制完成后抬笔。

⑤ 接下来设计一个广播来控制血条绘制，因为英雄角色和绘制角色是两个不同的角色，需要使用广播来完成通信。

第三步：跟随角色移动

自己调整血条和角色之间的位置关系，通过参数x和y进行设置。

到这，我们的血条也就绘制完成了。

尽善尽美

但是为了更加完善血条功能，还有需要修复的bug。

Bug1：血量小于0怎么办？

Bug2：血量大于血槽怎么办？

给程序增加判断来完成。

① 设置血量不能大于血槽。

② 设置血量不能小于0。

③ 通过“如果，那么”积木块来实现，只有满足以上两个条件才绘制血条。

修改两个Bug后的代码

增强视觉效果

如果想要增加血量预警，当血量过低的时候通过红色来预警。

当血量小于总血量的20%使用红颜色绘制血条。

全部整合起来，就得到了完整的血条程序。

Bug3：当血量为零的时候，还是会在血槽上有一个小点的血量，这难免会让人误解以为还有一点点血量。

再增加一个判断，当血量为零的时候，我们就不进行血量的绘制，连画笔颜色也不做改变。

血量的控制

1、少血

2、回血

回到英雄角色

通过创建“血量”变量来控制英雄的实际血量，并通过广播来完成血量的实时传输。

如何控制血量的增加和减少呢？只需要改变变量的值即可。

血量增加

血量减少

你学会了吗？快去创建你的游戏英雄吧！