🤖 AI 迷你应用 — 自主决策初体验

初中生编程探究课 · 让程序自己"会思考"

AI 自主决策 🎮 游戏开发 🔍 策略设计
📚

课程内容

🎯 课程目标

🧠
懂决策

理解 AI 如何判断

🛠️
会制作

完成 AI 应用

🔧
会调参

调整策略参数

👀
会观察

分析行为变化

🏆
会挑战

完成拓展任务

💡 什么是「AI 自主决策」?

程序不再是被动执行指令,而是——

👁️
感知

获取环境信息

🧠
决策

根据信息判断

🏃
行动

执行决策

感知 → 决策 → 行动 → 循环往复 🔁

🎮 项目:三选一(必须有一个 AI 角色自主决策)

🏓
选项 A
AI 乒乓球大师

改造 Pong,右侧球板由 AI 控制。简单(1球慢)→中等(2球)→困难(3球快+失误)

🐺
选项 B
智能生态模拟器

兔子移动、狼自动追猎。饥饿值驱动速度——饿了就跑得快!

🚦
选项 C
城市交通大脑

AI 控制红绿灯,车多就给绿灯。🚑 救护车优先通行!

🏓

选项 A:AI 乒乓球大师

🎮 试玩

鼠标上下控制左板 | AI 控制右板

0 : 0 中等 · 2球
📋 要求
  • 球反弹、玩家左板、AI 右板、比分
  • 难度升级:球数↑ 球速↑;困难模式 AI 会随机失误

🧠 AI 核心逻辑(乒乓球)

// AI 的脑子只有一句话:提前去球的落点等着 目标Y = 球Y + 球垂直速度 × ( 画面宽度 ÷ 球水平速度 )

👩‍🏫 大白话:球从左边飞到右边需要一段时间,AI 用「球的当前高度 + 球每帧上下移动的距离 × 飞到右边需要的帧数」算出球的落点,提前去那里等着——这就叫预测拦截

R 角色你是一位游戏开发者 I 意图做一个乒乓球 Pong 游戏 C 内容球反弹,玩家控制左板,AI 控制右板 E 风格简洁运动风 S 技术HTML + Canvas + JS,单文件 L 约束浏览器打开就能玩
R 角色你是一位 前端游戏开发工程师 I 意图制作 带 AI 对手的 乒乓球游戏,AI 追踪球的位置 C 内容1.球在边界反弹 2.玩家鼠标控制左板 3.AI 追踪球的 Y 坐标 4.球出界=对方得分 5.实时比分 E 风格深色背景,球板带发光,白色球体 S 技术HTML+Canvas+JS + requestAnimationFrame 循环 L 约束不依赖外部资源,适合课堂展示
R 角色你是一位 精通 AI 游戏开发的 资深工程师 I 意图制作 多难度(简单/中等/困难) AI 乒乓球游戏 C 内容1.物理反弹 2.鼠标左板 3.AI 预测球落点 4.简单(1球慢) 中等(2球中速) 困难(3球快+AI偶尔失误) 5.空格暂停 E 风格深色背景,紫板(#A78BFA)+橙板(#F59E0B)发光,白球光晕 S 技术HTML+Canvas+JS + AI预测拦截算法 + 60fps循环 L 约束无外部依赖,AI参数可调,代码清晰
🐺

选项 B:智能生态模拟器

🐺 观察 Demo

🐰 随机移动 | AI 狼按饥饿程度追猎

🐰 存活:10 🐺 狼:1 🍖 捕食:0 0s
饥饿进度条 → 不饿·慢 有点饿 很饿·快 | 饥饿值越高,追猎速度越快!

🧠 AI 核心逻辑(生态)

// AI 的脑子:越饿跑得越快 狼的速度 = 0.15 + 饥饿值% × 4.85

👩‍🏫 大白话:刚吃饱时速度只有 0.15(几乎爬不动),随着饥饿值涨到 100%,速度涨到 5.0(疯狂冲刺)。AI 的内部状态(饿不饿)直接决定外部行为(跑多快)——这就是「状态驱动 AI」!

R 角色你是一位游戏开发者 I 意图做一个狼追兔子的生态模拟 C 内容兔子随机移动,狼自动追最近的兔子 E 风格绿色草原风格 S 技术HTML + Canvas + JS,单文件 L 约束浏览器打开就能看
R 角色你是一位 生态模拟开发者 I 意图制作 捕食者-猎物生态模拟器,狼自动追猎 C 内容1.10只兔子随机移动 2.1-3只狼追踪最近兔子 3.兔被吃后重生 4.显示存活数和捕食次数 E 风格深绿草地+纹理,白色兔子有耳朵眼睛,深灰狼有尖耳黄眼 S 技术HTML+Canvas+JS + requestAnimationFrame 循环 L 约束不依赖外部资源,适合课堂演示
R 角色你是一位 精通 AI 行为模拟的 程序员 I 意图制作 带饥饿系统的 智能生态模拟器,行为随内部状态变化 C 内容1.兔子随机漫步 2.狼按饥饿追猎:饥饿0→100递增,速度1.2→4.7线性变化 3.头顶三段变色进度条(绿/黄/红) 4.兔被吃重生 5.统计+计时 E 风格深绿草地+纹理,兔子白体粉耳,狼灰体尖耳黄眼,头顶饥饿条醒目变色 S 技术HTML+Canvas+JS + 最近目标追踪 + 饥饿驱动速度系数 + 60fps L 约束无外部依赖,AI参数(饥饿增速/速度)可调,适合阅读
🚦

选项 C:城市交通大脑

🚦 试玩 Demo

车辆自动行驶 | AI 按车流量调节绿灯 | 🚑 派救护车

⬆ 北
0
⬇ 南
0
➡ 东
0
⬅ 西
0
🟢 南北绿灯 · 5s
初始化中...
🚗 通过:0
📋 最近决策:等待运行...

🧠 AI 核心逻辑(交通灯)

// AI 的脑子:排队越长,绿灯越久 绿灯秒数 = 等待的车辆数 × 0.8 + 3

👩‍🏫 大白话:每多一辆车排队,绿灯就多加 0.8 秒。1辆车≈4秒,10辆车≈11秒,最多不超过15秒。简单一个算式就实现了按需分配——不堵的方向少给绿灯,堵的方向多给,不浪费!

R 角色你是一位交通系统开发者 I 意图做一个十字路口的 AI 红绿灯模拟 C 内容四个方向来车,AI 根据排队车数调红绿灯 E 风格俯视城市街道风格 S 技术HTML + Canvas + JS,单文件 L 约束浏览器打开就能看
R 角色你是一位 智能交通系统工程师 I 意图制作 AI 自适应红绿灯的 十字路口模拟 C 内容1.四方向车随机生成 2.红绿灯控制 3.AI 按排队数调绿灯时长(车多给多) 4.救护车按钮强制绿灯 E 风格俯视深色路面,四角绿化,彩色车辆,红绿灯发光高亮 S 技术HTML+Canvas+JS + requestAnimationFrame 循环 L 约束不依赖外部资源,适合课堂演示
R 角色你是一位 城市智能交通算法专家 I 意图制作 AI 调度系统,自适应/固定切换 + 救护车优先 C 内容1.四方向车随机生成 2.AI 实时统计排队数分配绿灯(3-15s) 3.自适应/固定模式切换 4.🚑强制绿灯让行 5.车辆防撞(40px安全距离) 6.决策面板(排队数+理由+通过数) E 风格俯视深色路面,四色车(红/青/黄/紫),绿灯高亮圈,救护车红白闪烁 S 技术HTML+Canvas+JS + 流量感应算法 + 车辆防撞逻辑 + 60fps L 约束无外部依赖,AI参数(时长/倍数)可调,适合理解调度

课堂问答

🎯

奖惩区

⚖️ 课堂公约
表现优秀、积极回答 → 送奖品 | 扰乱秩序 → 小处罚

🎁 奖励抽奖

🎰

⚡ 惩罚抽奖

😈
🧪

AI 实验室 — 基础功能检查

完成基础功能后打勾 ✅,看看你的 AI 做了什么

🏓 乒乓球

AI 能自动追踪球并回击
有难度选择(球速/球数不同)
比分正常显示

🐺 生态模拟

兔子随机移动、狼自动追猎
狼有饥饿系统(饿→快,饱→慢)
兔子被吃后能重生

🚦 交通灯

AI 按车流量调节红绿灯时长
四方向车辆遵守红绿灯
救护车能优先通行
💡

AI 大发现

点击卡片展开,看看 AI 背后的有趣规律 👇

🤔 如果 AI 从来不失误,游戏还好玩吗?

不好玩!试试乒乓球困难模式——AI 有时会「走神」乱动一下,正是这种不完美让游戏有了悬念。

💡 AI 开发者需要找平衡点:太强=无敌无聊,太弱=没挑战。好的 AI 让你觉得「就差一点就赢了!」

🐺 把狼加到 5 只,观察 30 秒——发生了什么?

你会发现兔子几乎被秒杀,不停重生,生态一片混乱。这就是生态失衡——捕食者太多,猎物跟不上。

💡 真实自然界中,狼太多 → 兔子不够 → 狼饿死 → 狼减少 → 兔子恢复 → 循环。这叫捕食者-猎物动态平衡

🚦 切换「AI 模式」vs「固定模式」,哪个通过的车更多?

AI 模式更高效!固定模式不管车多车少都给 5 秒,AI 会根据排队车数动态调整——堵的方向多给绿灯,顺畅的方向少给。

💡 这就是现实世界中智能交通系统的原理!北京、上海等大城市已经在用类似技术减少堵车。

🎯 三个项目的 AI,哪个「最聪明」?哪个「最简单」?

交通灯 AI 最聪明(实时统计+动态决策),生态狼最简单(只追最近的)。但——

💡 简单≠不好。生态狼虽然逻辑简单,但加上饥饿系统后行为就很丰富:不饿时慢悠悠,饿极了疯狂追。这正是 AI 设计的精髓:用简单规则产生复杂行为