当然，这个readme也是AI写的。我是蓝狗
这是一个记录 AI 辅助开发像素风格 Roguelike 游戏完整过程的项目网站。从零开始，使用 ChatGPT 和 AiStudio 完成游戏开发的全流程，并将整个开发旅程记录在这个网站上。
🎮 在线访问: https://birth.game
🎯 游戏试玩: https://birth-demo.sid.mom/5/
这个网站展示了一个疯狂的实验：能否用 AI 和 ChatGPT 完整开发一款肉鸽游戏？
从 2024 年 1 月到现在，我们完成了：
- ✅ 5 个游戏版本迭代（v0.1.0 → v0.2.3）
- ✅ 完整的游戏核心玩法（房间、敌人、Boss、道具系统）
- ✅ 跨平台支持（桌面 + 移动端）
- ✅ ~15,000 行代码（60% AI 生成，40% 人工调整）
- 像素风格的视觉设计
- 快速导航到各个板块
- 一键试玩最新版本
- 展示所有游戏版本的演进历史
- 支持按标签筛选和搜索
- 每个版本都有详细的更新说明
- 直接试玩任意历史版本
- 6 篇详细的开发博客文章
- 记录从 v0.1.0 到 v0.2.3 的开发历程
- 包含技术细节、遇到的问题和解决方案
- 展示 AI 在开发中的真实角色
- 完整的 8 步 AI 辅助开发流程
- 从需求分析到部署的全流程指导
- 每步都有具体的 Prompt 示例和技巧
- 适合想要尝试 AI 辅助开发的开发者
- 开发者简介和联系方式
- GitHub、Telegram、Bilibili 等社交链接
- Next.js 15 - React 框架，支持 SSR/SSG
- React 18 - UI 库
- TypeScript - 类型安全
- Tailwind CSS - 实用优先的 CSS 框架
- Radix UI - 无样式的可访问组件
- Lucide Icons - 图标库
- 自定义像素风格组件库
- 🌍 多语言支持 - 中文（简体/繁体）、英文、俄文
- 🎨 像素风格 UI - 完整的像素艺术设计系统
- 📱 响应式设计 - 完美适配桌面和移动设备
- ⚡ 性能优化 - 延迟加载、代码分割
- 🎯 SEO 优化 - 完整的 Meta 标签和结构化数据
- Node.js 18+
- pnpm（推荐）或 npm
pnpm install
# 或
npm installpnpm dev
# 或
npm run dev访问 http://localhost:3000 查看网站。
pnpm build
# 或
npm run buildpnpm start
# 或
npm startpixel-roguelike-website/
├── app/ # Next.js 应用目录
│ ├── layout.tsx # 根布局
│ ├── page.tsx # 首页
│ └── globals.css # 全局样式
├── components/ # React 组件
│ ├── sections/ # 页面板块组件
│ │ ├── hero-section.tsx # 首页
│ │ ├── timeline-section.tsx # 版本时间线
│ │ ├── blog-section.tsx # 开发日志
│ │ ├── tutorial-section.tsx # 教程
│ │ └── developer-section.tsx # 开发者信息
│ ├── ui/ # 基础 UI 组件
│ ├── navbar.tsx # 导航栏
│ ├── pixel-button.tsx # 像素风格按钮
│ └── pixel-card.tsx # 像素风格卡片
├── contexts/ # React Context
│ └── language-context.tsx # 多语言上下文
├── lib/ # 工具库
│ ├── data.ts # 数据源（版本、博客、教程）
│ ├── i18n.ts # 国际化翻译
│ └── utils.ts # 工具函数
├── hooks/ # 自定义 Hooks
├── public/ # 静态资源
│ └── logo.png # Logo 图片
└── package.json
- 使用 Press Start 2P 字体实现复古像素感
- 自定义像素艺术组件（按钮、卡片、输入框等）
- 一致的像素网格和动画效果
--pixel-cyan: #0ff /* 主色调 - 青色 */
--pixel-purple: #c0f /* 强调色 - 紫色 */
--pixel-yellow: #ff0 /* 警告色 - 黄色 */
--pixel-dark: #0a0a0a /* 背景色 - 深色 */
--pixel-light: #fff /* 文字色 - 白色 */网站支持 4 种语言：
- 🇨🇳 简体中文 (zh-CN)
- 🇹🇼 繁體中文 (zh-TW)
- 🇺🇸 English (en)
- 🇷🇺 Русский (ru)
所有内容（导航、标题、博客、教程等）都提供完整的多语言版本。
所有内容数据都在 lib/data.ts 中统一管理：
{
id: string
version: string
date: string // Unix 时间戳
title: MultiLang // 多语言标题
tags: string[]
summary: MultiLang // 多语言摘要
url: string // 试玩链接
}{
id: string
title: MultiLang
date: string
readingTime: number
category: "Devlog" | "Tech" | "Design"
content: MultiLang // Markdown 内容
}{
id: number
title: MultiLang
description: MultiLang
prompt: string // AI Prompt 模板
tips: MultiLang[] // 使用技巧
}展示了如何用 AI 完成：
- 📋 需求文档自动生成
- 🏗️ 项目架构设计
- 💻 代码生成和迭代
- 🐛 Bug 诊断和修复
- 📈 性能优化建议
- 从 v0.1.0 的基础框架到 v0.2.3 的移动端适配
- 每个版本都有详细的开发日志
- 真实的问题和解决方案记录
- 性能优化和架构演进
- 8 个循序渐进的开发步骤
- 可复用的 AI Prompt 模板
- 实际的开发技巧和经验
- 适合不同技术水平的开发者
- 开发时间: ~2 个月
- 代码行数: ~15,000 行
- AI 生成比例: ~60%
- 人工调整比例: ~40%
- 版本迭代: 5 个主要版本
- 支持平台: Web (桌面 + 移动)
- 支持语言: 4 种
- 博客文章: 6 篇
- 教程步骤: 8 步
欢迎提交 Issue 和 Pull Request！
如果你有任何建议或发现了 Bug，请：
- Fork 这个仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的修改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
本项目仅供学习和参考使用。
- 开发者: carzygod
- GitHub: https://github.com/carzygod
- Telegram: https://t.me/carzygod
- Bilibili: https://b23.tv/XpaUJZd
这个网站是游戏《胎渊 / BIRTH》的开发日志网站。游戏本身是一款：
- 像素风格的 Roguelike 游戏
- 使用 Phaser 3 游戏引擎开发
- 受《以撒的结合》启发
- 完全由 AI 辅助开发
试玩最新版本: https://birth-demo.sid.mom/5/
感谢以下工具和服务让这个项目成为可能：
- ChatGPT & AiStudio - AI 辅助开发
- Vercel - 网站托管
- Next.js - React 框架
- Tailwind CSS - 样式框架
- 所有提供反馈的玩家和开发者
记住: AI 不会取代开发者，但能大幅提升开发效率。关键是找到人与 AI 的最佳协作点。
Made with 💙 and AI