方块世界 (Block World)

一款原创的浏览器单人体素沙盒游戏。包含程序化无限分块世界、生存与创造模式、挖掘和建造、背包、合成、熔炼、生物、昼夜天气以及 IndexedDB 多世界存档。

技术栈

类别	技术
前端框架	Next.js 16 + React 19
3D 渲染	Three.js
构建工具	Vite 8 + vinext
样式	Tailwind CSS 4
部署平台	Cloudflare Workers
数据库	Cloudflare D1 + Drizzle ORM
对象存储	Cloudflare R2
Web Worker	世界生成 / 资源包解析
语言	TypeScript 5.9

项目结构

├── app/
│   ├── page.tsx              # Next.js 入口页面
│   ├── layout.tsx            # 根布局
│   ├── globals.css           # 全局样式 (Tailwind)
│   ├── chatgpt-auth.ts       # 认证逻辑
│   └── game/
│       ├── GameApp.tsx        # 游戏 React 组件
│       ├── engine.ts          # Three.js 渲染引擎
│       ├── world.ts           # 世界生成（噪声算法）
│       ├── world.worker.ts    # 世界生成 Web Worker
│       ├── registry.ts        # 方块/物品/生物注册表
│       ├── mechanics.ts       # 物理 & 游戏机制
│       ├── inventory.ts       # 背包系统
│       ├── stations.ts        # 工作台/熔炉/箱子
│       ├── storage.ts         # IndexedDB 存档
│       ├── types.ts           # 类型定义 & 常量
│       ├── textureManager.ts  # 纹理图集管理
│       ├── gameAssets.ts      # 内置资源加载
│       ├── resourcePack.ts    # 资源包管理
│       └── resourcePack.worker.ts  # 资源包解析 Worker
├── worker/
│   └── index.ts              # Cloudflare Worker 入口
├── db/
│   ├── index.ts              # 数据库连接
│   └── schema.ts             # Drizzle 表结构
├── build/
│   └── sites-vite-plugin.ts  # 自定义 Vite 插件
├── tests/                    # 测试文件
├── public/                   # 静态资源
├── drizzle.config.ts         # Drizzle Kit 配置
├── vite.config.ts            # Vite 配置
└── package.json

本地运行

需要 Node.js 22.13 或更高版本。

npm install
npm run dev

打开终端显示的本地地址即可游玩。首次进入世界时，浏览器会在后台生成周围区块。

生产构建可使用：

npm run build
npm run start

操作

• W A S D：移动
• 鼠标：观察方向
• 方向键：在浏览器不支持鼠标锁定时转动视角
• 左键按住：挖掘或攻击
• 右键：放置方块
• Space：跳跃或飞行上升
• Shift：疾跑
• Ctrl：下蹲或飞行下降
• 1–9 / 滚轮：切换快捷栏
• E：行囊
• C：工作台
• F：熔炉
• Q：食用手中食物
• R：创造模式飞行
• Esc：暂停并释放鼠标

如果浏览器禁止鼠标锁定，游戏会自动进入兼容操作：WASD 仍可移动，按住左键拖动可转动视角并继续挖掘，方向键也可以转动视角。

资源包

在“设置 → 资源包”中可导入现代 Java 版资源包 .zip。资源包仅保存在浏览器本机的 IndexedDB 中，不会上传；缺失的方块、物品、HUD、生物或声音会逐项回退到原创默认素材。请只导入你有权使用的资源。

验证

npm test
npm run lint
npm run typecheck

游戏名称、界面、像素纹理、菜单背景和音效均为本项目原创内容，不包含 Minecraft 官方资源。

部署到 Cloudflare

本项目面向 Cloudflare Workers 部署，使用 D1 数据库和 R2 对象存储。

环境准备

1. 安装 Wrangler CLI
2. 登录 Cloudflare 账号：npx wrangler login
3. 创建 D1 数据库和 R2 存储桶，在 .openai/hosting.json 中配置绑定名称

部署命令

# 生成 Drizzle 数据库迁移
npm run db:generate

# 生产构建
npm run build

# 部署到 Cloudflare Workers
npx wrangler deploy

环境变量

变量	说明
WRANGLER_LOG_PATH	Wrangler 日志路径（默认 .wrangler/logs）
MINIFLARE_REGISTRY_PATH	Miniflare 注册表路径
CODEX_SANDBOX	沙盒环境标识（seatbelt 时启用轮询 HMR）