别再手搓Canvas了！AI一键生成接星星小游戏
提示词描述：
专为想快速实现网页交互效果的开发者设计。利用AI生成原生HTML/JS Canvas接星星游戏，涵盖动画循环与碰撞检测。代码结构清晰，开箱即用，适合前端新手练手与快速原型开发。
提示语关键词：
AI做网页游戏, JavaScript小游戏, Canvas动画代码, AI辅助编程, 浏览器接星星游戏, 前端开发提示词
提示词内容：
假设你是个懂前端又爱玩休闲小游戏的技术老炮，咱们今天一起搓个能在浏览器里直接玩的“接星星”小游戏。不用搞复杂框架，原生HTML加JavaScript就行，画布用Canvas。我想要的效果是，背景是深蓝色夜空，天上随机掉彩色星星，底下有个小木桶左右移动去接。
你写代码的时候按这个节奏来：第一步，先把HTML骨架和CSS样式写好，让画布全屏居中，去掉滚动条，看着清爽点；第二步，写JS初始化函数，创建玩家木桶对象、星星数组和分数显示逻辑，记得用requestAnimationFrame做动画循环，别用setInterval，这样画面才丝滑；第三步，把键盘左右键和鼠标拖动都绑上，控制木桶移动，加个边界限制别跑出屏幕；第四步，搞碰撞检测和计分，星星碰到木桶就加分并消失，漏掉就扣一条命，满屏掉满三颗就Game Over，弹出重新开始按钮。
代码里关键的地方多写点注释，用大白话解释清楚物理碰撞咋算的、动画帧咋刷新的。最后直接给我能跑的一整套文件代码，把HTML、CSS、JS分开写清楚，或者全塞一个HTML里也行，我图省事。顺便提醒我一下，如果想换背景图或者改星星下落速度，该改哪几行变量。跑起来之后，如果画面卡顿，记得在注释里告诉我怎么优化渲染逻辑。咱们不搞花里胡哨的特效，先保证流畅好玩，跑起来有成就感再说，等你代码！