第24课：抽奖小程序
进度 0/30
🎰
抽奖小程序
项目四：转盘转起来
📖知识引入
🎲需求脑洞
输入候选人名单，点按钮随机出一个：课堂抽人回答问题、和爸妈决定谁洗碗、抽周末去哪玩——超实用！
🎲核心是随机数
Math.random()产生0到1的小数，乘以数组长度再向下取整，就得到一个随机下标——这就是抽奖的骰子。
🌀动画锦上添花
用CSS动画让名字快速滚动再慢慢停下，「开奖」感拉满。动画代码让AI写，你负责说「要越来越慢」。
🚫防重复策略
抽中的人从名单移除（不重复抽）；或者标记「已抽中」置灰（可控重复）。两种策略，看场景选。
🎉你的第一个游戏
随机+动画+音效组合出游戏感——这一课做出来的是真正「好玩」的小程序，成就感爆棚！
💡
Math.random()是你的骰子：随机数×长度取整=随机选项！
🔍3行代码的抽奖核心
luckyDraw() {
const names = ['小明','小红','小刚','小丽']
// 随机取一个下标
const i = Math.floor(Math.random() * names.length)
this.setData({ winner: names[i] })
wx.vibrateShort() // 震动一下，更有感觉！
}随机数是怎么抽人的：
Math.random() → 0.7331… × 4（人数） → 2.93… Math.floor 取整 → 2 names[2] → 小刚中奖！🎉
滚动动画思路：
启动：每50ms随机换名字
↓ 快！
刹车：间隔越来越慢
↓ 慢…
定格：显示最终赢家
（定时器+减速，让AI写）用途脑洞： 课堂抽人回答问题 ✅ 和爸妈决定谁洗碗 ✅ 抽周末去哪玩 ✅ 组队随机分队 ✅
🎯小测验
第1题：从4个人的名单里随机抽1人，正确的下标计算是？
第2题：想让抽奖「不重复抽中同一个人」，应该？
第3题：wx.vibrateShort()能给抽奖加什么效果？
📝本课知识点
- ✓Math.random()是抽奖骰子
- ✓随机数×长度取整得下标
- ✓动画+震动让开奖有感觉
- ✓移除或标记可防重复
- ✓随机+动画=游戏感
第24课完成！继续探索下一课吧 🚀