“所有可见之物，都不过是纸糊的面具。但在大自然的每一件事物中——比如在鲸鱼那无法穿透的行动中，在它那铁一般的面孔上——都有某种未知但理性的东西，其背后的恶意，艺术无法模仿，人力无法抵达。……白鲸就是那道墙，那堵推在我面前的墙。有时我觉得墙的那边空无一物。但这就够了。他驱使着我，他让我精疲力竭；我在他身上看到一种残暴的力量，一种以不可理解的恶意为支撑的智慧。那种我最为憎恨的、不可理解的东西，才是白鲸的真相。” —— 赫尔曼·梅尔维尔《白鲸》
参考 datawhale_easy-vibe 提供的资料与教程设计的鲸鱼迁徙日记网页游戏。感谢 [[Datawhale]] 的组织的组队学习活动以及丰富、科学、用心的学习资料。
发布地址：
https://datawhale-vibecoding01-tianchen.space.z.ai
如果有更多时间的话，无论从游戏关卡设计，还是美术风格上，都有很大优化的空间。🎉 完成比完美更重要。
🐋 截图
🐋 鲸鱼迁徙日记 - 游戏指南
一个基于 AI 的互动网页游戏，玩家帮助鲸鱼完成从北极到南极的史诗迁徙旅程。
🎮 快速开始
- 输入鲸鱼名字 - 在主界面给你的鲸鱼起个名字
- 查看迁徙路线 - 了解从北极到南极的5个海域
- 开始探索 - 点击"开始探索"进入海域游戏
- 控制鲸鱼 - 使用方向键或WASD移动，收集食物，躲避障碍
- 做出选择 - 每个海域结束后，选择影响故事的发展
- 完成迁徙 - 到达南极，查看完整的迁徙日记
🕹️ 操作说明
键盘控制
- ↑/W - 向上游动
- ↓/S - 向下游动
- ←/A - 向左游动
- →/D - 向右游动
触屏控制
- 点击虚拟方向按钮控制鲸鱼移动
🌊 海域介绍
1. 北极海域 🧊
- 环境：冰山耸立，海水纯净
- 任务：收集磷虾，躲避冰山
- 特色：遇到北极熊和海豹
2. 北大西洋 🌊
- 环境：冷暖交汇，海浪起伏
- 任务：躲避渔网，遇见海豚
- 特色：与海豚群合作捕食
3. 赤道海域 🌴
- 环境：水温升高，珊瑚绚烂
- 任务：应对高温，发现热带鱼
- 特色：五彩斑斓的热带鱼群
4. 南大洋 🌪️
- 环境：风暴频发，波涛汹涌
- 任务：穿越风暴，遇见企鹅
- 特色：南大洋的独特生态
5. 南极海域 🐧
- 环境：冰原广袤，极光绚烂
- 任务：与鲸鱼群汇合
- 特色：迁徙的终点，家园的温暖
🎯 游戏目标
主要目标
- 安全到达南极
- 完成所有海域挑战
- 解锁海洋生物图鉴
- 获得成就徽章
状态管理
- ❤️ 生命值：碰撞障碍物会减少
- 🍽️ 食物：收集金色食物补充
- ⚡ 能量：影响移动和决策
🤖 AI特色功能
故事生成
- 每个海域都有AI生成的独特环境描述
- 根据你的选择动态调整故事发展
- 遇到海洋生物时的智能对话
图像生成
- 每个海域的专属插画
- 选择后的"记忆碎片"图像
- 完成迁徙后的"迁徙长卷"
🏆 成就系统
可获得成就
- 🌟 完美迁徙 - 所有选择都正确
- 🦸 冒险家 - 选择冒险路线
- 🔬 生物学家 - 解锁所有海洋生物
- 📖 故事家 - 完成多次迁徙
- 🎯 神射手 - 高分完成游戏
- 💎 收藏家 - 收集所有记忆碎片
海洋生物图鉴
- 🐬 海豚 - 北大西洋的友善伙伴
- 🐧 企鹅 - 南大洋的可爱居民
- 🐋 座头鲸 - 南极的同类群体
- 🐠 热带鱼 - 赤道的色彩精灵
💡 游戏技巧
海域游戏
- 优先收集食物维持状态
- 观察障碍物移动规律
- 利用空隙安全通过
选择策略
- 休息选择：恢复状态但耗时
- 冒险选择：风险高但回报大
- 探索选择：发现隐藏内容
重复游玩
- 不同选择创造不同故事
- 尝试解锁所有成就
- 完善海洋生物图鉴
📱 响应式设计
- 桌面端：键盘控制，大屏幕体验
- 移动端：触控按钮，随时游玩
- 平板端：自适应布局，最佳体验
- 性能优化：图像懒加载，缓存机制
- 无障碍：语义化 HTML，键盘导航
🔧 技术特性
- AI驱动：实时生成故事和图像
- 状态保存：游戏进度自动保存
- 性能优化：图像懒加载，流畅体验
- 无障碍：支持键盘导航
🎨 视觉体验
- 海洋配色：深蓝、浅蓝、白色主题
- 水彩风格：AI生成的精美插画
- 流畅动画：自然的过渡效果
- 响应式：适配各种屏幕尺寸
🛠 技术栈
- 前端：Next. js 15 + TypeScript + Tailwind CSS
- 状态管理：Zustand
- UI 组件：shadcn/ui
- AI 集成：z-ai-web-dev-sdk
- 图像处理：Canvas API + 优化图像组件
📖 故事特色
每个玩家的旅程都是独特的：
- AI 根据选择生成个性化故事
- 实时创作海域环境描述
- 动态生成角色对话
- 最终整合成完整日记
🔮 未来功能
- 多人模式：与朋友一起迁徙
- 季节变化：不同季节的海洋景观
- 音效系统：鲸鱼叫声和海浪声
- 更多海域：扩展迁徙路线
准备好开始你的鲸鱼迁徙之旅了吗？ 🌊✨
记住：每一次选择都是独一无二的，每个故事都值得珍藏！
🐋 提示词
请帮我制作一个名为"鲸鱼迁徙日记"的网页游戏，具体需求如下：
游戏背景与目标
玩家需要帮助一只鲸鱼完成从北极到南极的史诗迁徙旅程。沿途会经历不同的海洋环境，遇到各种海洋生物，玩家的选择会影响故事的发展。最终将生成一本独特的"迁徙日记"，包含文字故事和完整的长卷插画。
核心玩法
- 迁徙地图 ：显示从北极到南极的迁徙路线，包含多个关键海域（北极海域、北大西洋、赤道海域、南大洋、南极海域）
- 海域探索 ：每个海域是一个小关卡，玩家需要控制鲸鱼完成简单的任务（如躲避障碍、收集食物、与海洋生物互动）
- 选择系统 ：在每个海域结束后，玩家面临选择（如停留休息时间、选择路线、是否与某生物互动），这些选择影响后续故事和难度
- 日记生成 ：完成整个迁徙后，自动生成一本包含完整故事和插画的"迁徙日记"
AI 能力集成
-
故事生成 ：
- 每进入一个新海域，LLM 生成该海域的环境描述（100-150 字）
- 遇到海洋生物时，LLM 生成互动对话或知识科普（50-100 字）
- 根据玩家的选择，LLM 动态调整后续故事发展
- 迁徙结束后，LLM 将所有片段整合成一篇完整的"迁徙日记"（500-800 字）
-
图像生成 ：
- 根据当前海域和故事实时生成背景插画
- 每个海域结束后生成该海域的"记忆碎片"插画
- 迁徙结束后生成完整的"迁徙长卷"（横向卷轴，包含所有海域的场景）
界面设计
-
主界面 ：
- 标题"鲸鱼迁徙日记"，配以鲸鱼游动的动画
- "开始迁徙"按钮
- "查看日记"按钮（用于查看已完成的迁徙记录）
-
游戏界面 ：
- 顶部：当前海域名称、进度条（显示迁徙进度）
- 中间：游戏画面（鲸鱼在海洋中游动，背景根据海域变化）
- 底部：操作提示（方向键或点击控制移动）
- 侧边：故事文本框（实时显示 LLM 生成的环境描述和对话）
-
选择界面 ：
- 显示当前海域的插画
- 显示 LLM 生成的情境描述
- 提供 2-3 个选项按钮，每个选项有简短说明
- 显示选择后的即时反馈
-
日记界面 ：
- 纵向滚动显示完整的迁徙日记
- 每个海域配以对应的插画
- "保存为图片"按钮
- "分享"按钮
- "重新开始"按钮
游戏机制细节
-
海域关卡 ：
- 北极海域：冰山障碍，收集磷虾
- 北大西洋：躲避渔网，遇到海豚同伴
- 赤道海域：高温挑战，遇到热带鱼群
- 南大洋：风暴挑战，遇到企鹅
- 南极海域：终点，与鲸鱼群汇合
-
选择系统示例 ：
- “在北大西洋停留 3 天休息” vs “继续赶路”（影响体力值）
- “与海豚一起捕食” vs “独自捕食”（影响食物储备）
- “绕过风暴” vs “穿越风暴”（影响风险和奖励）
-
多结局设计 ：
- 完美结局：所有选择都正确，鲸鱼健康到达，日记充满正能量
- 普通结局：部分选择错误，鲸鱼到达但有些疲惫
- 挑战结局：选择冒险路线，经历更多故事但风险更高
技术要求
- 使用 HTML 5 Canvas 或 SVG 实现鲸鱼游动动画
- 使用 CSS 3 实现流畅的界面过渡效果
- 集成 LLM API（如智谱 GLM）进行文本生成
- 集成图像生成 API（如智谱文生图）进行插画生成
- 使用 localStorage 保存迁徙记录
- 响应式设计，支持桌面和移动端
视觉风格
- 整体色调：深蓝、浅蓝、白色（海洋主题）
- 鲸鱼造型：简洁可爱，有游动动画
- 插画风格：水彩或手绘风格，温馨治愈
- 字体：清晰易读，适合阅读长文本
交互体验
- 鲸鱼游动流畅自然
- 按钮点击有反馈动画
- 文本逐步显示（打字机效果）
- 插画加载时有过渡动画
- 选择后立即显示反馈
附加功能
- 成就系统 ：解锁"完美迁徙"、"冒险家"等成就
- 图鉴系统 ：解锁遇到的海洋生物知识卡片
- 季节变化 ：根据迁徙时间，背景显示不同季节的海洋
- 音效 ：鲸鱼叫声、海浪声、点击音效（可选）
性能优化
- 图像生成时显示加载动画
- 文本生成时显示"正在记录日记…"提示
- 缓存已生成的图像，避免重复生成
- 使用懒加载优化长日记页面
请生成这个游戏的完整代码，包括所有功能。代码应该结构清晰、注释完整，可以直接运行。如果需要调用 API，请使用占位符并在注释中说明如何替换为真实 API 密钥。
Q.E.D.