【ppt代码教程】保姆级教程,用代码制作幸运大转盘课件,让你的PPT卷起来

少儿编程教学资料，仅供参考，需要可下载并修改后使用！10-幸运大转盘1-教学设计一、课程概述课程名称：幸运大转盘1课程时长：60分钟课程内容：使用网易卡搭平台进行Scratch图形化编程，制作一个抽奖使用的幸运大转盘。

二、教学目标[知识与技能]1.复习使用绘图工具绘制舞台背景。

2.学会使用填充工具进行颜色填充。

3.掌握造型中心点的设置方法和其意义。

4.理解随机数的概念以及其应用场景。

5.复习巩固循环指令以及其具体应用。

6.掌握旋转角度的概念。

[过程与方法]1.通过生活场景的引入，从程序设计的角度分析如何实现幸运大转盘。

2.通过自主实践，掌握大部分绘图工具的使用。

3.通过分组游戏，理解随机数的概念。

[情感态度与价值观]。

1.通过幸运大转盘实例，进一步感受作品实现流程，如何与用户进行交互。

2.通过游戏的趣味性激发对程序设计的热情和兴趣。

3.通过拓展任务的布置，让家长使用学生完成的作品进行抽奖，学生讲解其作品实现的过程，促进亲子关系的和谐发展。

三、教学重点与难点[教学重点]1.各种绘图工具的具体操作。

2.随机数的概念理解和指令使用。

3.造型中心点的设置和理解。

[教学难点]1.对造型中心点的理解。

2.使用程序设计思想解决现实生活中出现的问题。

四、教学准备[学生]可上网的电脑[教师]1.可上网的电脑2.卡搭账号3.投影设备4.课程教学资料5.随机数卡片五、教学过程1.生活场景导入（3分钟）提问：生活中，超市或者一些卖场门口搞促销活动时，经常会有抽奖，抽奖的方式是一个大转盘，转盘上四周是各种各样的奖品，转盘中间有一个大指针，当你抽奖时，指针或者转盘转动起来，直到停止运动，指针指向的位置就是所中的奖品。

今天我们可以使用网易卡搭来实现一个类似生活中抽奖大转盘的作品。

2.展示实现效果（2分钟）演示最终的实现效果，带领学生入情入境，让学生知晓本节课的目标。

并说明最终的效果可以由学生自己把握，自行设计（比如转盘和指针的图案，样式），可以与老师给出的示例不同，激发学生创作的热情和兴趣。

第二十五课幸运大转盘今日任务：今天我们将要模拟设计一个幸运大抽奖的转盘，当我们点击屏幕上的开始按钮时，转盘开始旋转，转盘缓缓停下时，指针指到的礼品就是你抽奖得到的礼品！我们一起来动手试试看吧！任务拆解：（1）如何设计转盘？（2）如何设计指针？（3）如何设计按钮？（4）点击按钮→转盘旋转→缓缓停下？动手设计：第一步：我们需要一个指针角色，绘制出来，大概如下形状第二步：制作一个“开始”按钮，可以利用矩形和文本工具进行设计，大概如下第三步：重点是转盘角色，我们先要绘制一个空心的圆圈出来圆圈绘制好之后，我们利用左侧提供的导入按钮，从“素材”文件夹中导入“礼品”图片，每次导入进来的图片都需要适当的缩小摆放好，大概如下：第四步：三个重要角色全部绘制完毕，我们接下来就可以考虑脚本的问题了第五步：我们首先考虑第一个问题，点击按钮之后转盘才开始转动，所以我们应该为“开始”按钮角色添加一个脚本：（在我的程序里，按钮是“角色2”）好，那我们再接着想，谁应该接收到“roll”这个信号并做出反应呢？我们在接受这个“roll”信号的角色上添加第一个脚本接下来，考验我们思维的时候来了，一大问题要解决：如果每次我们点击“开始”按钮都想得到不同的结果，那么，每次“转盘”应该随机转N圈后停下来，这个怎么实现？提示：变量times用来规定每次按下“开始”按钮后，转盘旋转的次数；变量angle用来规定“转盘”每次旋转的角度我们规定每次转盘旋转的次数是随机数在30~50之间接下来，我们规定转盘第一次的旋转角度好了，每次点击开始按钮，转盘随机旋转的角度=times X angle，这个咋实现呢？我就提示到这儿，请同学们自己设计一下这个程序吧！难度提升我们希望“转盘”可以缓慢旋停止，而不是突然就停止下来，那么这个缓缓停止的效果应该如何实现？提示：。

微信⼩程序实现幸运⼤转盘功能的⽰例代码⽬录⼀、项⽬展⽰⼆、抽奖页三、领奖页⼀、项⽬展⽰幸运⼤转盘是⼀个简单的抽奖⼩程序参与⽤户点击抽奖便可抽取轮盘的奖品⼆、抽奖页抽奖页是⼀个⼤轮盘和活动规则页⾯形式简单主要核⼼在于轮盘核⼼代码【轮盘旋转】如下：getLottery: function () {var that = thisvar awardIndex = Math.random() * 6 >>> 0;// 获取奖品配置var awardsConfig = app.awardsConfig,runNum = 8if (awardIndex < 2) awardsConfig.chance = falseconsole.log(awardIndex)// 旋转抽奖app.runDegs = app.runDegs || 0console.log('deg', app.runDegs)app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / 6))console.log('deg', app.runDegs)var animationRun = wx.createAnimation({duration: 4000,timingFunction: 'ease'})that.animationRun = animationRunanimationRun.rotate(app.runDegs).step()that.setData({animationData: animationRun.export(),btnDisabled: 'disabled'})// 绘制转盘var awardsConfig = app.awardsConfig.awards,len = awardsConfig.length,rotateDeg = 360 / len / 2 + 90,html = [],turnNum = 1 / len // ⽂字旋转 turn 值that.setData({btnDisabled: app.awardsConfig.chance ? '' : 'disabled'})var ctx = wx.createContext()for (var i = 0; i < len; i++) {// 保存当前状态ctx.save();// 开始⼀条新路径ctx.beginPath();// 位移到圆⼼，下⾯需要围绕圆⼼旋转ctx.translate(150, 150);// 从(0, 0)坐标开始定义⼀条新的⼦路径ctx.moveTo(0, 0);// 旋转弧度,需将⾓度转换为弧度,使⽤ degrees * Math.PI/180 公式进⾏计算。