接上一篇儿童编程 Scratch 精选项目解析 :Shape Of Your Name 之一的内容本篇我们将学习如何读代码
读代码往往比自己写代码还要困难, 这是正常现象其实, 代码编写时是个逐渐添砖加瓦的过程, 所以, 读代码时只要化整为零, 把整个代码按照要实现的功能拆解成多个部分来分析就容易理解了
备份源码
在开始拆解之前, 先要保存一份原始的代码有时候因为作者还在持续更新程序, 所以, 稳妥起见, 是把源码保存一份到本地或者源码托管网站上本例中, 我保存了一份 Shape Of Your Name Radial Symmetry_original.sb2, 至于作者最新的源码则保存为: Shape Of Your Name Radial Symmetry-latest.sb2
有了原始备份, 就可以放心大胆的去拆解代码了
第一步, 不是马上要去看代码, 而是先运行程序, 了解程序实现的功能, 正如我们在上一篇中所做的那样我们应该先阅读作者的说明文档, 直接运行程序来了解程序的功能, 这是非常重要的
第二步, 初步了解程序的角色变量和自定义积木块
了解有哪些角色
角色
可以看到这里有五个角色, 我试着删掉了后面 4 个, 发现没有对执行结果产生影响估计是留待以后作者想实现的功能用的暂时我们只需要关注第一个角色就可以了
了解有哪些变量和列表
变量
如图, 项目中有 4 个变量: ABCLetter # Speednumber 其中 Speed 变量需要显示在界面上, 所以它前面是有勾选, 其他的则没有从变量名称和实际运行的情况, 我们可以明白 Speed 这个变量是用来设定和控制运行速度的其他三个暂时还不清楚它们的用途
Speed
然后, 项目中有 3 个列表: LettersXY
X,Y 有可能是绘图的坐标 (我们先这样猜测, 猜测是阅读代码中很重要的, 除非作者直接给你说明, 不然怎么样?)
了解有哪些自定义的积木块
Scratch2.0 开始可以自定义积木块, 这些组装好的积木块往往会实现非常重要的作用积木块的具体代码也在代码区, 这里我们只需要知道有哪些积木块会用到就可以
积木块
第三步, 开始正式进入代码开始前, 先右键运行一下整理, 把程序员遗留的垃圾代码先整理到旁边去, 以免形成干扰
初始化变量和列表
初始化
在这组代码里, 我们看到对界面画笔变量 ABC 和 Letter# 列表做初始化设置包括:
清空界面, 设定画笔隐藏角色 (小猫)
将 ABC 设定为: abcdefghijklmnopqrstuvwxyz
清空三个列表中的数值
将 Letter# 设为 1
通过部分代码, 我们获得一个重要的信息, 变量 ABC 是用来定义 26 个字母的
获取用户输入
输入
用侦测工具中的询问等待积木获取用户输入的数据, 并提示用户只输入字母: What's your name? Use only letters.
根据回答给列表赋值
列表 Letters
用循环语句对列表进行赋值是个好办法循环的次数是用户输入的内容长度, 这样一来, 不管输入多少内容, 都可以应对自如了
把用户输入的内容逐个字母读取出来, 保存在列表 Letters 中
变量 Letter# 是作为指针, 也可以理解为是计数器
列表 Letters 赋值
列表 X 和列表 Y
图片. png
接下来, 作者根据列表 Letters 的值, 给列表 X 和 Y 进行赋值方法与前面类似, 每次循环前都把指针 Letter# 进行了复位这部分的代码有些啰嗦了, 在下一篇的重构中, 我将改写这部分的代码, 提高程序的运行效率
调用自定义积木块
调用自定义积木块
自定义积木块在这里出现了, 从名称上我们可以猜测是一个转码模块让我们去看看这个模块的代码
解读自定义积木块
Encodex
这里可以发现, 变量 number 有两个作用, 一个作用是作为计数器, 一个是根据 ABC 里的 26 个字母表来把输入的字母转换为数字 (a 对应 1,b 对应 2)
这个转换过程分为三层, 第一层是 1-10 位, 第二层是 10-20 位, 第三层是 20-26 这三层起到的作用是按照 26 个字母的顺序, 把 Letters 中的字母提取出来, 然后转换对应位置的个位数, 记录到列表 X
这个转换动作实现了字母到数字的转换
接下来, 我们去看 Encodey, 会发现做的是同样的事情, 只不过这次是记录到列表 Y 当中去
在下一篇中, 我也会重构这部分, 作者在最新的代码中也把两个积木块合并成了一个
绘制图形
在使用的时候, 我们会发图形实际上是由四个部分组成, 四个部分的形状相同, 但方向有改变这部分代码中, 可以看到很明显的四个部分, 我们可以通过拆开这四个部分看执行的效果, 了解对应的作用
绘制图形
也可以直接阅读代码来理解这个绘制过程: 定位 - 落笔 - 滑行 - 抬笔
我只截取了其中两个部分, 通过这两个部分, 我们可以看出来, 绘制是基于前面转换的数据再进一步生成坐标, 在坐标间进行滑行实现绘制输入的字母数越多, 绘制的次数也越多, 图形也就越复杂
小结
通过运行和上述对代码的解读, 我们基本搞明白作者的想法: 根据输入的内容长度来生成列表, 根据字母在字母表中的位置来转换为数字, 然后, 根据得到的数字列表来生成绘图坐标转换位置, 实现镜像的重复绘制, 得到最终的图形
来源: http://www.jianshu.com/p/6dd6e62bd822