别再纠结了!AI 帮你写一个搞笑“中午吃什么”大转盘
提示词描述:
专治选择困难症!让AI用原生Canvas帮你写一个搞笑的“中午吃什么”大转盘。选项设计极其接地气,自带真实的物理缓动动画和搞笑弹窗。还加入了连抽3次一样的强制换结果机制。代码注释详尽,适合前端新手边玩边学Canvas底层逻辑。
提示语关键词:
Canvas动画,AI做网页,抽奖大转盘,前端小游戏,AI生成代码,JavaScript转盘
提示词内容:
请帮我用HTML5 Canvas和纯JavaScript写一个“今天中午吃什么”的趣味大转盘抽奖网页,单文件实现,不要引入任何第三方库,我要自己掌控所有细节,顺便学学Canvas的底层逻辑。
首先,转盘的设计要接地气且搞笑。转盘分成8个等份,上面的选项千万别写普通的“面条、米饭”,要写成“沙县小吃(穷鬼套餐)”、“疯狂星期四(V我50)”、“老板请客(做梦)”、“吃土(月底常态)”、“轻食沙拉(减肥失败)”、“泡面加肠(豪华版)”、“外卖盲盒(生死有命)”、“下楼随便吃(随缘)”。每个选项配上不同的马卡龙背景颜色,看起来有食欲一点。文字要沿着圆弧排列,别重叠了。
转盘中间要有一个固定的指针,转盘自己动。点击“开始干饭”按钮后,转盘要开始旋转。旋转动画必须真实,要有从慢到快,再到慢,最后带有惯性慢慢停下来的缓动效果(比如用ease-out),不能是匀速转圈然后生硬停止。停下来后,指针指向哪个选项,就要弹出一个搞笑的提示框,比如抽到“老板请客”,提示框就写“醒醒,你连老板微信都没有,赶紧去点外卖吧”。
另外,请加入一个“防选择困难症”模式。如果用户连续抽到3次一样的结果,转盘会自动触发“绝对公平”机制,强制把结果换成另一个选项,并在控制台输出一句吐槽:“看你纠结的,帮你换一个,别墨迹了”。
代码注释请用大白话,详细解释Canvas画圆弧、计算文字角度、旋转动画和缓动函数的逻辑,让我这个前端小白也能看懂。最后,帮我加上一些简单的CSS美化,让按钮和弹窗看起来有质感一点,带点阴影和圆角,整体风格保持轻松幽默。