html5绘制图形幸运大转盘,幸运大转盘 - 慧编程 - 专注于青少年 STEAM 教育的图形化编程平台...

案例详情

1.实现效果

按下板载按钮后，开始一次抽奖，大转盘的指针不断旋转，然后随机停留在一个位置上，指针指向的盘面就能获得相对应的奖品。

2.实现思路

为了实现每次指针的指向无法预测，需要使用随机数。可以将指针旋转的次数(每次旋转15度)设置为一定范围内的随机数，从而实现每次按下板载按钮，最后指针的指向都是随机的。

3.实现过程

1)删除舞台上默认的熊猫角色，点击新建角色里的“画笔”图标，绘制新角色，此时跳转到一个画板的操作界面，在画板里绘制一个“大转盘”，根据自己生活中的观察，并发挥想象力，画出自己独特的“大转盘”，下图为一个简单的“大转盘”示例；

2)绘制完成后点击右上角的“十字”图标设置角色的造型中心为圆盘中心；

3)点击右上角工具栏的“放大”图标将转盘调整为合适的大小；

4)从角色库中选择一个角色导入作为“指针”，点击进入角色的“造型”页面，设置角色的造型中心为指针的末端，角色左右旋转时，会将造型中心点作为旋转中心，将指针的末端放在大转盘角色的中心区域处；

5)点击“指针”角色，添加如下脚本，按下板载按钮后，观察指针的变化；

6)修改脚本，按下板载按钮后，指针分别旋转1圈、2圈、3圈后停留在同一位置，由于指针转一圈是360度，而指针每次旋转15度，因此重复执行24次“旋转15度”操作后，指针刚好转一圈，同理，重复执行48次和72次“旋转15度”操作后，指针分别旋转2圈和3圈；

7)由于是大转盘抽奖，因此每次按下板载按钮后指针应该旋转随机的角度，由于每次旋转的度数固定为15度，此时需要设置指针重复旋转的次数为随机数，让指针每次旋转超过2圈但不到3圈再随机停下，此时将重复执行的次数设置成48到72之间的随机数；

8)从背景库中导入一个合适的背景，使作品更生动；

9)完成脚本，按下板载按钮，观察作品效果，为不同颜色的盘面设置不同的奖品，一个互动抽奖工具“幸运大转盘”就诞生了，让你的同学试试手气吧。

4.作品的改进方向

1)发挥创意，绘制独特的转盘角色，比如可将转盘的盘面直接设置为相关的奖品，或者转盘上标明中了几等奖；

2)修改脚本，使得每次抽奖指针都从同一个方向开始旋转；

3)将大转盘设置为按下按钮后转盘运动，指针不动，将指针角色的脚本复制给转盘角色，然后删掉指针角色的脚本；