十一、程序设计

1 十一、程序设计

1. 故事板

在Alice中程序设计是将场景中的对象按剧情的要求动作起来，因此进行程序设计的第一步是熟悉并描述剧情，也就是对一个故事或一个游戏的描述，需要什么背景，有些什么角色或对象，剧情有哪些情节，在每个情节中这些对象有什么动作和行为等等都要描述清楚。第二步是要使用一种工具去描述剧情，在Alice中是釆用故事板（storyboard）这种工具来描述剧情，它为每一个情节设计了所需要的动作序列。在迪斯尼(Disney)等大的动画公司都是将大故事分成很多小故事，然后对毎个小故事来用故事板去描述一些场景和情节，设计对象的动作或行为。第三步是根据故事板来编写代码，以实现故事板所要求的情节动作，这也是通常所说的编程。最后一步是测试，看程序是否正常运行，是否达到原设计要求。

故事板有图形式和文本式两种，动画师们爱用手绘图形来描述场景，附以文字说明对象动作，如描述雪地上有三个人，两人女雪人区在交谈，来了一个男雪人，向一女雪人眨眼，可用下面手绘图形来描述场景，灰色波纹表示雪地，远处有山作背景等。

而文本式故事板是一个用文字表达的任务列表，它概括故事的各个场景及完成某一任务的一些动作，同时还列出了写代码时应遵循的结构，在程序设计中一个程序的结构是指程序执行的顺序，一般是三种结构：顺序结构、选择结构和循环结构，程序中所有的代码都是按这三种结构组织的，文本式故事板不仅指出动作而且给出结构，这样根据它来写编码更为方便。下面以一实例来介绍用文本式故事板描述剧情，并根据它来写编码。

实例34：男雪人与女雪人

剧情是：在雪之歌音乐背景下，在冬天的雪地里有两个女雪人正在交谈，而旁边的男雪人试图吸引其中一个女雪人的注意，朝她叫了一声”Ahem”并向她眨了眨眼，女雪人转过身来脸红地看了看男雪人，她对见他没有兴趣，冷眼看了看他转身继续和如她的朋友交谈，他只好转身离她而去。

在这个故事中有三个雪人，一个男的二个女的，冬天有雪的场景，在故事的情节中涉及雪人的动作有：男雪人试图引起女雪人的注意，叫了一声，眨了眨眼；女雪人转过身，脸红，冷眼看了看他转身；男雪人转身离开。因此可以把剧情看作四个动作序列：(1)男雪人通过呼叫以引起女雪人注意。(2) 女雪人转过身时男雪人向她眨了眨眼。(3)女雪人脸红，冷眼看了看他转身。(4) 男雪人转身离开。

可以想象这个故事有这样三个场景：

(1)初始场景，场景响起背景音乐，看到雪地上有三个雪人，其中男雪人想约见带红帽的女雪人 2

(2)场景2：男雪人向女雪人说”Ahem”

(1) 女雪人转身，男雪人向女雪人眨眼

对这三个场景可以设计出一个文本故事板去描述它

Do the following steps in order

snowman look at the snowwoman

snowman calls out to the snowwoman

Do the following steps together

snowman blinks his eyes at the snowwoman

snowwoman turns to see who is calling her.

在这故事板上给出了雪人要完成的动作以及动作的顺序关系，男雪人前二个动作是顺序完成的而后两个动作则要求同时完成。因此故事板是给出了完成某一任务的动作序列，并规定了程序的结构，本例是给出程序的顺序结构。显然，这块故事板还只是描述了故事的一部分，还需把后半部分的情节补充进去，由于前后联系紧密，将它放在同一块故事板上。

Do in order

snowman looks at the snowwoman

snowman calls out to the snowwoman

Do together

snowman blinks his eyes at the snowwoman

snowwoman turns to see who is calling her. 3 Do together

snowwoman blushes (her head turns red)

snowwoman turns back to her friends

snowwoman’s face turns back to white

snowman turns away (gives up)

下面就要将故事板的描述转换成程序代码，在Alice中程序就是完成某一任务的命令(动作)序列，而对象的命令即为对象的方法(methods)，每个对象都有内置的方法，这可从该对象的方法列表中找到，如果没有对应该动作的方法，就要建立新的方法去实现它。编码主要是指方法的编码，如果涉及到交互动作，则要进行事件编码。

在方法编码前，首先要建立剧情要求的场景，即选择snow为背景，在场景中加入三个雪人(二女一男)，调整他们的位置如上面初始场景所示的图形。

方法编码是在World.my first method方法编辑区内编辑，按故事板上的顺序，第一步是要求后面二项动作是依序执行，Alice提供了两种顺序结构的命令Do in order及Do togather，因此只要将Do in order拖入到编辑区内。

4 第二步是要求snowman转向snowwoman去看她，因此要点击对象树上snowman，在methods列表中找到方法turn to face，该方法能满足要求。

第三步是snowman要向snowwoman打招呼，在方法列表中找到say，可用此方法向snowwoman说Ahew。

第四步要求后面两个动作同时执行，因此要将Do togather拖入到编辑区内，并放在Do in order之内

第六步要求snowwomam要转头，点击对象树中snowwomam左边的+号，让snowwomam的组成部件也显示出来，点击其中的head，就能从其方法列表看到跟头部动作有关的命令，找到并拖turn to face至Do Nothing处，并选择snowman， 5

第七步要求snowman眨眼，它要左右眼都要眨，而且是与第六步同时进行。点击对象树上snowman左边+号，先拖leftEye move至编辑区，选择up并设置0.04 meter，再拖leftEye move至编辑区，选择down并设置0.04 meter，类似地对rightEye也拖二条move命令，分别选择up私down并设置0.04 meter

上下眨眼的距离是需要经过多次试验才得令0.04这个数据较为合适，这是一种试错法（trial-and- error），即不断地试验、纠错、再试验，最终可获得理想的结果。 6

至此可去测试所编代码的正确，没有必要一定等整个程序都完成了才测试。按Play后发现snowman的左右眼既不向上也不向下，因而也就不能眨眼，这就是程序中通常所说的bug，分析其原因是因为要求move up和move down要同时进行，实际上就等于不动，因此只要把move up和move down放在Do in order之下，让它们依次执行就可以了。

另外还要给出眨眼的持续时间，通常在Do togather下同时执行动作的时间应该是相同的，如果眨眼时间为1 second，那么up和down各占0.5 second，为此点击move命令后面的more，设置duration为0.5 second。 7

第八、九、十步是关于snowwomam的三个动作，首是脸红，要改变snowwomam的脸色，要用到snowwomam的属性，先拖入Do togather到编辑区，使八九步同时进行。先点击对象树上snowwomam左边的+号，对出现的扩展项点击head，在属性列表中拖color至Do

togather下面并选择red

第九步是转回头面向snowwomam2，因此要它snowwomam.head的方法列表中将turn to

face拖入其后，并选择snowwomam2。第十步是snowwomam脸色变回白色，显然它不能放在Do togather之下，而第十步是snowman失望而离开，这里用他的头转向前且整个人转向右来表示。 8

程序编完后应为程序的某些部分写上注解，如说明要完成什么动作等，便于程序阅读者理解。

2.一些实例

实例36 青蛙跳游戏。水池表上飘浮着五个睡莲叶子，它们在水靣上不规则移动，要求青蛙从一个睡莲叶子跳到另一个睡莲叶子直至对岸，如果青蛙掉入水中游戏结朿，如果青蛙到达对岸的红圈则嬴。

(1).先从/~veerasam/alice_old/中下载文件名frog_game_setup.a2w，并存入能找到的文件系统中。打开Alice 2.3，点击File及Open world ，找到frog_game_setup.a2w，输入后点击Open就有下靣的初始场景，其中5个黄圈表示睡莲叶子，它们将左右两个方向随机移动，绿色圈表示开始star，红色圈表示结朿finish，青蛙初始位置在绿色圈中，兰色方框表示水池pool，白色是方形边框square。

设计用up键控制青蛙向前跳，当睡莲叶子靠近青蛙时，就用rightl和left键使青蛙迅速右或左移开一点，当青蛙跳上睡莲叶子时，青蛙和它一起移动，直到青蛙再次跳起。当青蛙跳至红圈要表示取得胜利，而青蛙掉入水中则表示失败。 9 (2). 先建立一个事件，当按键盘中任何一键时，青蛙向前跳0.7米。点击 create new event，选择When the mouse is clicked on something。再将对象树中frog拖至do后靣，选择move，forward，other，打入0.7。

(3). 为了使5个黄圈能同时左右移动，先建立一个list。点击对象树根world后再点击 world

details中的create new veriable，在出现的对话框中打入list名circles，选择Type为Object，并在make a list 前打勾，在item0至item4中分别打入circle，circle2，circle3，circle4，circle5。

将For all together拖入方法编辑区内，选择expressionss，world.circles

为了验证circle向右运动，可右击对象树中circle，选择methods，move，right，0.5 meter，场景中circle向右移动了0.5米，因此可以在方法编辑区内编写该条命令。点击Undo，circle回到原位。将item_from-circles拖至下一行并选择move，right，1 meter，右击该命令行，选择make

copy，则将该行复制到下一行，同时将right攺为left，此时按Play可看到5个黄圈同时右移1米后又移回来。

v

下靣将移动距离1米改为pool的宽度。点击对象树上的pool，将其函数列表中width拖至编辑区，将它替代两命令行中的1 meter，此时按Play可看到5个黄圈同时右移至边界，但畧为超过一点，需要再进一步调整距离。点击两命令行中的width后靣三角形，选择math，pool

width -，0.5，再按Play，就能保证在水池内移动。再点击对象树中circle，将其函数列表中width拖至0.5，按Play后就能保证在水池内移动。

(4).拖入loop至两命令行前，使两条命令无限循环执行，为了使5个黄圈随机移动，点击两命令行中的more，选择durationn，并暂时选择1 second，然后点击对象树中world，将其函数列表中的random number拖至编辑区，将它替代两命令行中的1 second，按Play可看到5个黄圈