4 条提示词，全文开放

教育与儿童互动

这一类帮助家长和教育者把知识点做成儿童可以操作的学习页面或小游戏。现有内容覆盖互动学习、迷宫、像素赛车和鲨鱼抓小鱼等形式，重点不是做复杂游戏，而是让目标、年龄、反馈方式和安全边界先明确。生成后应由成年人检查文字、难度、广告和外部链接，并在真实设备上测试触控、声音和失败反馈。

返回内容中心 →

互动学习页面

1 条

互动学习页面儿童互动学习页面生成提示词展开

简介

输入孩子的年龄段和学习主题，AI 生成一个安全、友好、图文并茂、可互动的儿童学习网页（单文件 HTML），用卡通角色、明亮色彩和小奖励激发学习兴趣。

Prompt


# 角色
你是儿童教育网页设计师，懂儿童认知发展，也懂前端实现。

# 任务
根据「{{儿童年龄段}}」和「{{学习主题}}」，生成一个中文的单文件 HTML 互动学习页面。

# 设计原则
友好温暖、简单易懂、视觉趣味、安全可靠、成长激励。

# 内容与视觉要求
1. 内容策略：图文并茂、故事化呈现、分级阅读、有趣问答、积极正向引导。
2. 视觉：明亮色彩、柔和过渡、卡通风格、可爱动物角色、一致主题；清晰大字体、圆润边角、充足留白、模块化布局。
3. 交互：声音反馈、简单拖拽、成就奖励、动画过渡、直观操作；含成长进度标识。

# 技术规范
- 单一 HTML 文件，内含全部 HTML/CSS/JS，双击即可打开。
- 元素不重叠、不拥挤；移动端友好；符合该年龄段的阅读与操作能力。

# 输出格式
先用一句话说明页面设计思路，再输出完整可运行的 HTML 代码。

# 启动
先问："孩子多大？想学什么主题？"拿到后生成页面。

整理日期：2026-07-07

儿童游戏

3 条

儿童游戏儿童小游戏：迷宫挖掘游戏展开

简介

让孩子提出想法后，用 AI 生成可玩的单文件 HTML5 小游戏。

Prompt


# 角色
HTML5儿童游戏开发AI助手。

# 任务
创建一款完整、可玩、适合6岁儿童的HTML5迷宫挖掘游戏。游戏包含5个难度递增的关卡，提供清晰的视觉反馈和简单的音效，确保低挫败感和高趣味性。

# 输出格式
单一HTML文件，包含所有HTML、CSS（优先使用Tailwind CSS类）和JavaScript。代码需包含关键逻辑的注释。
详细规格 (Detailed Specifications):
1. 核心机制: * 玩家: 黄色圆形，可通过方向键或WASD键移动，可挖掘砖块。 * 环境: 二维网格迷宫。包含不可摧毁的墙壁 (1)，可挖掘的砖块 (2)，空格子 (0)。 * 收集品: 星星 (5) +10分，钻石 (6) +50分。需收集所有才能过关。 * 敌人: 绿色圆形，自动随机移动（避开墙壁），可穿过收集品。 * 进程: 玩家与敌人碰撞则游戏结束。收集完所有物品则关卡胜利，短暂延迟后进入下一关。完成5关则游戏总胜利。 * UI: 显示当前关卡、累计得分、本关剩余收集品。游戏结束/胜利时显示相应消息。提供“重新开始游戏”按钮（重置到第一关和总分）。
2. 视觉与动画: * 风格: 色彩鲜明、儿童友好的像素化/卡通风格。 * 颜色: 背景#0f0f1f, 墙壁#4a4a8a, 砖块#d2691e, 玩家#ffd700, 敌人#32cd32, 星星#ffeb3b, 钻石#00bfff。 * 形状: 玩家/敌人为带眼睛的圆形，星星为五角星，钻石为菱形。 * 动画: 玩家/敌人平滑移动（插值），砖块立即消失。 * 布局: 画布居中，UI清晰展示，整体响应式美观。
3. 音效 (Tone.js): * 关卡胜利、收集星星、收集钻石、挖掘砖块、游戏结束时播放不同音效。 * 确保音频上下文在用户首次交互后启动。
4. 关卡设计 (共5关, TILE_SIZE: 32): * 原则: 所有关卡路径清晰、可通关、低难度，适合儿童。 * 敌人速度 (enemyMoveCooldown - 值越大越慢): * 第一关: 45 * 第二关: 40 * 第三关: 31 (Math.max(15, 35 - 2*2)) * 第四关: 29 (Math.max(15, 35 - 3*2)) * 第五关: 27 (Math.max(15, 35 - 4*2)) * 地图数据 (gameLevels 数组 - 0:空, 1:墙, 2:砖, 3:玩家, 4:敌人, 5:星, 6:钻): * 第一关 (Level 1 - 15x9): javascript [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,3,2,5,2,2,2,2,2,2,2,6,2,2,1], [1,2,1,1,1,1,1,2,1,1,1,1,1,2,1], [1,2,2,2,2,2,2,4,2,2,2,2,2,5,1], [1,1,1,1,1,1,1,2,1,1,1,1,1,1,1], [1,5,2,2,2,2,2,2,2,2,2,2,2,6,1], [1,2,1,1,1,1,1,1,1,1,1,1,1,2,1], [1,2,2,6,2,2,2,2,2,2,2,5,2,2,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ]  * 第二关 (Level 2 - 19x9): javascript [  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],  [1,3,2,2,5,2,2,2,2,2,2,2,2,6,2,2,2,4,1],  [1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,1],  [1,2,2,2,2,2,5,2,2,6,2,2,5,2,2,2,2,2,1],  [1,1,1,1,1,2,1,1,1,1,1,1,1,2,1,1,1,1,1],  [1,2,2,2,2,2,2,2,4,2,2,2,2,2,2,2,2,4,1],  [1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,1],  [1,6,2,2,2,5,2,2,2,2,2,2,2,6,2,2,2,2,1],  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]   ]  * 第三关 (Level 3 - 21x9): javascript [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,3,2,2,5,2,2,4,2,2,2,1,2,2,2,6,2,2,4,2,1], [1,2,1,1,1,2,1,1,1,1,2,1,2,1,1,1,1,1,1,2,1], [1,2,2,2,2,2,2,2,2,5,2,2,2,2,6,2,2,2,2,2,1], [1,1,1,1,1,1,1,2,1,1,1,1,1,2,1,1,1,1,1,1,1], [1,2,2,6,2,2,2,2,2,2,2,4,2,2,2,5,2,2,2,2,1], [1,2,1,1,1,2,1,1,1,1,2,1,2,1,1,1,1,1,1,2,1], [1,5,2,2,2,2,4,2,2,2,2,1,2,2,2,2,2,6,2,2,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ]  * 第四关 (Level 4 - 23x9): javascript [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,3,2,2,2,5,2,2,4,2,2,2,6,2,2,2,4,2,2,5,2,2,1], [1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1], [1,1,1,2,1,1,1,5,1,1,1,4,1,1,1,6,1,1,1,2,1,1,1], [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1], [1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,6,2,2,4,2,2,2,5,2,2,2,2,2,4,2,2,2,6,2,2,2,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ]  * 第五关 (Level 5 - 25x9): javascript [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,3,2,2,2,2,5,2,2,4,2,2,2,6,2,2,2,4,2,2,2,5,2,2,1], [1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1], [1,1,1,1,1,2,1,1,5,1,1,4,1,1,6,1,1,2,1,1,1,1,1,1,1], [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1], [1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], [1,6,2,2,2,4,2,2,2,5,2,2,2,2,2,4,2,2,2,6,2,2,2,2,1], [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ]

整理日期：2026-07-07

儿童游戏儿童小游戏：像素赛车躲避游戏展开

简介

让孩子提出想法后，用 AI 生成可玩的单文件 HTML5 小游戏。

Prompt


# 角色
资深HTML5游戏开发者。

# 任务
创建一款单文件、像素风格的HTML5俯视角赛车躲避游戏，具备以下特性，确保代码清晰、可玩性高且难度递增。

# 输出格式
1. 核心玩法
玩家控制赛车在三车道公路上躲避迎面障碍物，生命耗尽则游戏结束。
2. 操控
键盘: 左右箭头键切换车道。
触摸: 屏幕底部提供左右虚拟方向按钮（⬅️、➡️）切换车道。
3. 视觉与界面
主题: 深色主题 (例如，背景 #1a202c, 容器 #2d3748)。UI元素使用Tailwind CSS。
画布:
默认尺寸 500x750px，响应式调整并保持宽高比。
启用像素化渲染 (image-rendering: pixelated)，基础像素单元 pixelSize = 10。
道路: 中央行驶区 (如 #718096)，两侧草地 (如 #16a34a，约占画布宽度12%)，中心有向下移动的像素化白色虚线 (透明度0.4)。
玩家赛车:
像素图案 (5x7像素单位): [[0,1,1,1,0], [1,1,2,1,1], [1,1,1,1,1], [0,1,1,1,0], [0,1,1,1,0], [1,0,0,0,1], [1,1,0,1,1]] (0:空, 1:主色 #3b82f6, 2:辅色 #60a5fa)。
初始位于画布底部中央。
障碍物:
至少3种像素风格类型，从顶部随机车道出现。
交通锥 (Cone): 4x4像素单位, 红/浅红 (#ef4444/#fca5a5), 图案: [[0,1,1,0],[1,2,2,1],[1,2,2,1],[1,1,1,1]]。
路障 (Barrier): 6x3像素单位, 橙/浅橙 (#f97316/#fdba74), 图案: [[1,2,1,2,1,2],[1,2,1,2,1,2],[1,1,1,1,1,1]]。
坑洞 (Pothole): 3x2像素单位, 深/浅灰 (#4a5568/#718096), 图案: [[1,1,1],[1,0,1]]。
信息栏: 画布顶部，背景 #2c5282，白色文字。显示：分数、等级、生命 (❤️/🖤)。
消息浮层: 半透明黑色背景，居中显示游戏状态信息 (开始、升级、结束)。标题用 'Press Start 2P' 字体，内容用 'Inter'。含 "开始/重新开始" 按钮。
4. 游戏机制
得分: 躲避障碍物 +10 分。
生命: 初始3点，碰撞减1。
等级: 从1开始，分数达 当前等级 * 150 时升级，浮层提示 "LEVEL X!" 约2秒。
速度与难度:
初始前进速度 (障碍物/道路线) 1.5。
每10分，速度微增 0.0025。
每次升级，速度增加 0.3。
前进速度上限 7。玩家赛车响应速度 (playerCar.speed) 也随等级略微提升并设上限。
障碍物生成:
初始间隔 2500ms。升级后缩短 150ms (最小 500ms)。
屏幕上最大数量 6 + 当前等级。
碰撞: AABB检测。后果：生命-1，移除障碍物。反馈：短暂屏幕震动 (CSS动画)。
5. 游戏状态
初始: 标题 "像素赛车"，操作说明，"开始游戏"按钮。
进行中: 正常游戏，UI实时更新。
等级提升: 短暂显示等级信息。
结束: "游戏结束!"，显示最终分数与等级，"重新开始"按钮。
6. 技术要求
单HTML文件: 包含所有HTML, CSS, JS。
CSS: Tailwind CSS (CDN) 为主，少量自定义 <style>。
字体: Google Fonts: 'Inter', 'Press Start 2P'。
JavaScript: 代码清晰、模块化、注释充分。无外部游戏引擎。
响应式: 适应桌面和移动设备。

整理日期：2026-07-07

儿童游戏儿童小游戏：鲨鱼抓小鱼展开

简介

让孩子提出想法后，用 AI 生成可玩的单文件 HTML5 小游戏。

Prompt


# 角色
你是一位专业的HTML5游戏开发AI助手。

# 任务
创建一个完整、可交互的HTML、CSS和JavaScript单文件网页游戏，名为“鲨鱼抓小鱼!”。此游戏专为6岁左右儿童设计，应包含以下核心特性和行为：

游戏概念与主题:
核心玩法：玩家通过鼠标控制鲨鱼，在2D水域中追捕并“吃掉”小鱼群。
目标用户：6岁儿童，因此视觉风格、交互和难度需适宜。
视觉与界面 (UI/UX):
整体风格: 色彩鲜艳、卡通可爱。背景为天蓝色/浅海蓝色，画布（游戏区域）为深一点的海蓝色。
角色形象:
小鱼 (Boids): 多个小型、颜色各异（主要是蓝色/青色系）的卡通鱼形，有眼睛。
鲨鱼: 单个、比小鱼明显更大的卡通鲨鱼形象（例如灰蓝色身体，红色眼睛，有嘴巴）。
画布: 响应式尺寸，适应不同屏幕。
UI元素:
醒目游戏标题：“鲨鱼抓小鱼!”
清晰的得分板，实时显示得分。
简洁的游戏玩法说明：“用鼠标控制大鲨鱼，去抓蓝色的小鱼吧！”
控制面板: 包含以下可调滑块，并实时显示其值：
小鱼数量 (NumBoids)
鲨鱼速度 (SharkSpeed)
小鱼反应速度 (FishReaction - 影响躲避强度)
“重新开始!” (Reset) 按钮。
特效: 小鱼被吃掉时，在其位置产生若干上升的小气泡动画。
小鱼 (Boids) 行为逻辑 (基于Boids算法，但需针对儿童游戏优化):
群体行为:
排斥 (Separation): 避免与附近小鱼过于拥挤，保持一定间距。
对齐 (Alignment): 倾向于与附近小鱼朝同一方向游动。
聚集 (Cohesion): 倾向于朝附近小鱼群的中心位置移动。
个体行为:
漫游 (Wander): 核心行为。每条小鱼都应有持续且显著的内在随机游动趋势，即使没有外部刺激（如鲨鱼）或群体影响，也能独立、活跃地改变方向和游动，以有效防止形成静止不动的鱼团。此行为的强度应足以打破过于稳定的群体结构。
躲避鲨鱼 (Flee): 当鲨鱼进入其感知范围时，产生强烈的躲避行为，迅速逃离。
躲避边缘 (Avoid Edges): 当接近画布边缘时，产生较强的转向力，引导其游向画布中心，防止长时间卡在边缘。
边缘传送 (Edge Wrapping): 作为辅助，如果小鱼完全移出画布，则从对应另一边重新进入。
鲨鱼行为逻辑:
控制: 由鼠标在画布内的位置实时控制其目标游动方向。
移动 (Seek): 平滑地游向鼠标指针位置。
到达行为: 当鲨鱼非常接近鼠标指针（例如小于其自身尺寸的一半）且鼠标静止时，鲨鱼应平稳减速并停止，避免在目标点来回抖动。停止时保持其朝向。
游戏机制与交互:
捕食: 当鲨鱼与小鱼发生碰撞（视觉上重叠）时，视为小鱼被“吃掉”。
计分: 每吃掉一条小鱼，得分增加。
音效:
使用 Tone.js 库。
每当鲨鱼吃掉一条小鱼时，播放一个简短、有趣的“吃掉”或“气泡”音效（例如随机的C4-F4范围内的短音符）。
音频上下文应在用户首次与页面交互（如点击）后初始化，以符合浏览器策略。
小鱼补充: 当小鱼数量因被捕食而减少到一定程度（例如少于初始数量的一半，且总数较少时），应自动、少量地补充新的小鱼，以维持游戏的可玩性。
技术实现:
使用HTML、CSS (可内联或使用Tailwind CSS CDN) 和纯JavaScript。
引入Tone.js (CDN)。
所有行为参数（如各种力的权重、感知半径、速度、转向力等）需经过精心调校，以实现生动活泼的小鱼个体运动、自然的鱼群形态，并确保上述反抱团、边缘处理和鲨鱼停止行为的有效性。

# 输出格式
生成一个独立的、功能完整的HTML文件，包含所有必要的CSS样式和JavaScript逻辑。确保代码结构清晰、注释良好（特别是关键逻辑部分）。

整理日期：2026-07-07