开发流程指南
《蛙噻！好摊》开发流程文档 | 版本：v1.0
项目概述
《蛙噻！好摊》是一款以西游记为背景的放置类经营游戏，采用纯前端技术栈开发。玩家扮演取经路上的行者，通过摆摊经营积累财富。
技术栈
HTML5
页面结构与语义化标签
CSS3
样式、动画、响应式布局
JavaScript ES6+
游戏逻辑、数据处理
LocalStorage
本地数据存储
开发原则
- 轻量化：纯前端实现，无需后端服务器
- 渐进增强：核心功能优先，逐步添加高级特性
- 模块化：功能模块独立，便于维护和扩展
- 数据驱动：游戏数据与UI分离，便于调整平衡
核心系统模块
| 模块 | 功能 | 优先级 |
|---|---|---|
| 时间系统 | 游戏时间、日夜循环、季节 | 高 |
| 摆摊系统 | 摊位管理、商品交易 | 高 |
| 价格系统 | 市场价格、定价反馈 | 高 |
| 货币系统 | 金币、凭证、交易 | 高 |
| 装饰系统 | 摊位装饰、称号加成 | 中 |
| 成就系统 | 成就解锁、奖励 | 中 |
| 战斗系统 | PVE战斗、副本 | 中 |
| 成长系统 | 等级、技能、属性 | 中 |
目录结构
wabaike/
├── css/
│ └── style.css # 主样式文件
├── js/
│ ├── main.js # 主逻辑文件
│ ├── data.js # 游戏数据
│ └── utils.js # 工具函数
├── pages/
│ ├── index.html # 首页
│ ├── market.html # 摆摊系统
│ ├── game-time.html # 游戏时间
│ └── ... # 其他页面
├── data/
│ ├── items.json # 物品数据
│ ├── npcs.json # NPC数据
│ └── locations.json # 地点数据
└── index.html # 入口页面
核心文件说明
style.css
主样式文件，包含所有页面的样式定义。使用CSS变量实现主题统一：
:root {
--wiki-primary: #1a73e8;
--wiki-link: #1a73e8;
--wiki-text: #202124;
--wiki-text-secondary: #5f6368;
--wiki-border: #dadce0;
--wiki-box-bg: #f8f9fa;
--wiki-content-bg: #ffffff;
--wiki-header-bg: #f1f3f4;
}
main.js
主逻辑文件，包含通用功能和页面初始化：
// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
initSearch();
initNavigation();
loadGameData();
});
// 搜索功能
function initSearch() { ... }
// 导航高亮
function initNavigation() { ... }
// 加载游戏数据
function loadGameData() { ... }
data.js
游戏数据定义，包含所有静态数据：
// 商品数据
const ITEMS = {
item_001: { name: "精铁剑", type: "weapon", basePrice: 1000 },
item_002: { name: "布衣", type: "armor", basePrice: 200 },
// ...
};
// NPC数据
const NPCS = {
npc_001: { name: "货郎张", location: "长安城", type: "merchant" },
// ...
};
// 地点数据
const LOCATIONS = {
loc_001: { name: "长安城", type: "city", markets: ["东街", "南街", "西街", "北街"] },
// ...
};
开发阶段规划
第一阶段：基础框架
搭建项目基础框架，实现核心页面和基础功能。
- 项目目录结构搭建
- 基础CSS样式框架
- 首页和导航系统
- Wiki页面模板
- 基础JavaScript框架
第二阶段：核心玩法
实现游戏核心玩法系统。
- 时间系统（日夜循环、季节）
- 摆摊系统（摊位、上架、交易）
- 价格系统（市场价、定价反馈）
- 货币系统（金币、凭证）
- 数据存储（LocalStorage）
第三阶段：内容填充
填充游戏内容，完善游戏体验。
- 商品数据（各类物品）
- NPC数据（商人、顾客）
- 地点数据（城镇、集市）
- 装饰系统（36种装饰）
- 成就系统
第四阶段：扩展功能
添加扩展功能，丰富游戏内容。
- 战斗系统（PVE）
- 副本系统
- 任务系统
- 成长系统（等级、技能）
- 社交功能（商会）
第五阶段：优化发布
优化性能，准备发布。
- 性能优化
- 兼容性测试
- Bug修复
- 文档完善
- 发布部署
开发清单
以下是当前开发进度的详细清单：
基础框架
- 项目目录结构
- CSS样式框架
- 首页布局
- 侧边栏导航
- 顶部导航栏
- 页脚组件
Wiki页面
- 游戏介绍页
- 世界观页
- 集市页
- 摆摊系统页
- 价格机制页
- 游戏时间页
- 成就系统页
- 战斗系统页
- 成长系统页
- 货币系统页
游戏功能
- 时间系统实现
- 摆摊核心逻辑
- 价格计算算法
- 数据存储模块
- 离线收益计算
- 装饰系统
- 成就系统
数据内容
- 商品数据
- NPC数据
- 地点数据
- 装饰数据
- 成就数据
优化测试
- 响应式适配
- 性能优化
- 浏览器兼容
- Bug修复