第六课：极客拼装术 —— 用 AI 零基础打造你的第一款智能网页小程序
想象一下，如果你不需要死记硬背成百上千行的复杂代码，仅需用日常语言与 AI 助手对话，就能在几秒钟内拼装出属于你自己的动态网页和游戏，这是不是很酷？
💡 极客思维：像搭积木一样写程序
很多厉害的极客和产品经理，在编写小程序时，都会遵循“由易到难、模块拆解”的拼装思路。我们不需要一开始就写出庞大的工程，而是像盖高楼一样——先拉起框架，再做精美装修，最后注入交互灵魂。今天，AI 就是你的“全能代码副驾驶”，我们将零基础协同拼装出一款火爆全网的互动小程序！
🎮 极客拼装公式：[极简 HTML 骨架] + [精修 CSS 样式] + [趣味 JavaScript 交互] = 独立网页小程序
一、 魔法体验舱 —— 纯代码交互实验室
为了让大家切实感受“代码与算法”的力量，我们先在下方进行一次充满魔力的交互体验：
🔮 极客魔力：点击敲击“赛博电子木鱼”
请点击下方的木鱼，感受纯网页 JS 运算带来的碰撞音效和文字浮空魔法！
电子功德: 0
黑科技揭秘：刚才这个极其魔性的“敲木鱼”，没有下载任何外部图片，敲击声也是由浏览器的 Web Audio API 直接用算法实时合成的！这代表着只要掌握了极客拼装思路，无需服务器和安装包，代码走到哪里，特效就跟到哪里！
二、 拼装四部曲：从极简骨架到完整应用
现在，让我们扮演“极客制作人”，一起指挥 AI，从最简单的一行按钮出发，步步递进，拼装出你的专属小游戏！
🧱 第一步：拉起极简骨架（HTML 结构） HTML_SKELETON
首先，我们要让 AI 帮我们生成网页最基础的“骨骼”——也就是木鱼按钮和用来计数的文字。
👉 极客提问动作：请复制下方提示词发送给 AI 助手（如豆包），获取你的第一版骨架代码：
你是一个极简前端工程师。请帮我用 HTML+CSS+JS 编写一个单文件网页小游戏。
要求如下：
1. 界面：正中间放一个圆形的按钮（代表木鱼），按钮下方显示一行文字“电子功德：0”。
2. 逻辑：每次我点击圆形按钮，功德数值就增加 1。
请直接输出包含完整 HTML、CSS 和 JS 结构的代码。
💡 提示：此时的网页还比较简陋，没关系，我们的骨架和底层加分逻辑已经通了，准备进入下一步！
🎨 第二步：精修高颜值皮肤（CSS 样式） CSS_DESIGN
现在，我们要给网页进行“精装修”——穿上帅气的极客外衣。我们将把它改成充满神秘科技感的深色极客风，并给木鱼按钮加上按压悬浮特效！
👉 极客提问动作：将第一步 AI 吐给你的完整代码复制，并在其后附带上这句指令发送给 AI：
非常棒！下面是我的第一步代码：
[在这里粘贴第一步AI给你的完整代码]
现在请在这个代码的基础上进行第二步精修美化：
1. 视觉风格：将整体背景改成深邃科技感的暗黑色（比如 #0B0F19），功德文字和标题使用亮白色。
2. 按钮打磨：把中间的按钮改为渐变深灰色的立体圆形，加上好看的发光阴影和边框。
3. 微交互：当鼠标悬停在按钮上时，按钮微微放大；点击时按钮要有按压下去的缩放反馈。
【铁律】：必须保持 JavaScript 里的点击计数逻辑完全不变，只重修 CSS 样式，并输出完整单文件代码。
💫 第三步：注入动态文字特效（JavaScript 核心交互） JS_INTERACTION
骨骼和皮肤都齐了，接下来我们要加入“浮空字”交互——当鼠标点击木鱼按钮时，让“功德 +1”或者“好运 +1”等动态字样，在鼠标点击的位置浮现并缓缓升空消失！
👉 极客提问动作：将第二步生成的完整代码复制，附带上这句指令发送给 AI：
太棒了，界面非常炫酷！在刚才第二步的代码基础上，我们进行第三步升级：
要求：
1. 每次我点击木鱼时，在鼠标点击的坐标位置，弹出一个发光绿色的文字“功德 +1”或“好运 +1”（随机出现）。
2. 这个文字要有一个向上浮动并逐渐变透明消失的 CSS 动画特效。
请直接输出修改后的完整单文件代码，确保原有的计数器功能不会损坏。
🎵 第四步：合成算法电子音效（Web Audio API 终极声光电） AUDIO_SYNTHESIS
最后一步，赋予它生命的声音！我们不需要去网络下载沉重的 MP3 文件，直接用浏览器的**音频合成芯片**实时计算发声！
👉 极客提问动作：将第三步的代码复制，加上最后这句终极指令发送给 AI，见证完整应用的诞生：
完美！最后一步，我们给它加上声音特效，拒绝外部 MP3 文件，我们要用纯算法合成！
要求如下：
1. 当我点击木鱼按钮时，利用浏览器的 Web Audio API 实时合成并播放一声【清脆、短促的木鱼敲击声】（可用短促的 triangle 三角波形配合指数衰减实现）。
2. 确保在第一次点击时初始化音频上下文，以避免浏览器的自动播放策略拦截。
请给我最终整合了视觉、动画、音效和计数的终极完整单文件代码！
🏆 随堂挑战：你的专属作品发布会
当 AI 吐出最终的第四步代码后：
- 在电脑上新建一个文本文件，将代码粘贴进去，并保存重命名为
index.html。
- 双击在浏览器打开它，大功告成！你拥有了一款完全属于你自己的、带音效和撒字特效的解压小游戏！
- 点击“西洲免费工具箱”主页上的 [第 6 课云端作业]，输入你的名字，把你的
.html 文件提交到云端，向全班展示你的极客之作吧！