第20课：让AI加交互
进度 0/30
🎮
让AI加交互
说出玩法，AI帮你实现
📖知识引入
🎮交互剧本公式
向AI描述交互，用这个公式：什么时候（点击按钮）+谁变化（卡片）+怎么变（翻面显示答案）。三个要素说清，AI一次写对。
🧩组合的威力
显示隐藏+动画+计时器，能组合出翻牌记忆游戏、倒计时、抽签机……就像乐高：零件不多，组合无限。
🐛交互出bug了
「点击没反应」？把现象+代码告诉AI，它像侦探一样排查：是没找到元素？还是监听写错了？AI揪出真凶。
🧠学会读AI的JS
不要求会写，但求看懂：哪行管「找到元素」、哪行管「监听点击」、哪行管「改变内容」。能读懂，你就是半个程序员！
🚀从模仿到创造
先让AI做经典效果（轮播图、倒计时、选项卡），看懂原理后改造成自己的创意玩法——这是最快的学习路径。
💡
交互描述公式：什么时候+谁+做什么+变成什么样！
🔍委托AI做一个翻牌游戏
<div class="card" data-fruit="🍎">?</div>
<div class="card" data-fruit="🍌">?</div>
<style>
.card {
display: inline-block;
width: 80px; height: 80px;
line-height: 80px;
text-align: center;
font-size: 40px;
background: #667eea;
border-radius: 12px;
cursor: pointer;
transition: transform 0.4s;
}
.card.open {
background: white;
transform: rotateY(180deg);
}
</style>
<script>
document.querySelectorAll(".card")
.forEach(function (card) {
card.addEventListener("click", function () {
// 翻开：显示水果 + 戴上open帽子
card.innerText = card.dataset.fruit;
card.classList.toggle("open");
});
});
</script>实战！看一次完整委托：
📝 你的提示词： 「帮我做一个翻牌记忆游戏： 4张卡片，点击任意一张就翻开， 显示背面的 emoji（🍎🍌🍇🍓）， 再次点击翻回去。」
✅ AI交付：右边代码（节选）
🔁 迭代1：
「翻牌时加个翻转动画」
→加上transform: rotateY
🔁 迭代2：
「两张相同的水果配对成功后
保持翻开并变绿色」
→加配对逻辑
🔁 迭代3：
「加个计分板，翻错扣分」
→完整游戏成型！
看懂结构了吗？
· 找元素→querySelector
· 听事件→addEventListener
· 变内容→classList.toggle
老三部曲，万变不离其宗！
🎯小测验
第1题：描述交互需求最完整的说法是？
第2题：AI写的交互代码，你的正确态度是？
第3题：交互出bug时，最有效的求助方式是？
📝本课知识点
- ✓交互公式：什么时候+谁+怎么变
- ✓显示隐藏+动画+计时器=无限组合
- ✓bug描述：现象+代码一起给AI
- ✓读懂找元素/听事件/变内容三大块
- ✓先模仿经典效果再搞原创
第20课完成！继续探索下一课吧 🚀