东汉末年,群雄并起。从桃园村的一介白身,到五丈原上胜天半子——在浏览器里走完三国五十年。
《烽烟九州》是一款运行在网页里的 2D 多人在线角色扮演游戏(MMORPG)。打开浏览器、注册账号、创建角色,就能和其他玩家进入同一片无缝的三国大世界:做任务、下副本、打首领、练专业、逛拍卖行。
游戏里没有一张外部图片、一段音频文件——地形、人物、怪物、图标、技能特效、音效和配乐,全部由代码在运行时生成。

目录
故事取材于三国历史与《三国演义》。玩家从公元 184 年的黄巾之乱开始,跟随刘备、曹操、孙权、诸葛亮等人物,亲历虎牢关、官渡、赤壁、定军山、南中,直到公元 234 年的五丈原。
世界不是一关一关切换的,而是一张 384×320 格的无缝大地图。历史的先后被铺在了地理上:从东边的桃园村出发,向北是讨董战场,向西是官渡,向南渡过长江是赤壁,再往西南进入汉中与南中。走得越远,时代越晚,敌人越强。
每进入一个新的时期,屏幕上会出现该时期的名称与年代。
先注册一个账号(每个账号可以创建 4 个角色),然后进入角色创建界面。

创建角色时可以选择:
每个职业都有自己独立的甲胄、冠帽和兵器造型,右侧的预览会实时转身、行走。

刷新页面后会自动登录,直接来到角色选择界面。

每个职业 8 个技能,从 1 级到 18 级逐步学会,全游戏共 48 个玩家技能。
| 职业 | 定位 | 资源 | 兵器 | 特点 |
|---|---|---|---|---|
| 猛将 | 坦克 · 近战 | 怒气 | 长刀 | 身披重铠。挨打和攻击都会积攒怒气,能嘲讽、减伤、群体眩晕 |
| 豪侠 | 近战输出 | 气力 | 双剑 | 身法如电。气力自动恢复,擅长潜行、突进、流血与爆发 |
| 神射 | 远程物理 | 专注 | 长弓 | 百步穿杨。靠速射积攒专注,用减速、定身、后跃风筝敌人 |
| 谋士 | 法术输出 | 谋略 | 羽扇 | 运筹帷幄。火攻、落石、借东风、引天雷,范围伤害最强 |
| 医者 | 治疗 | 谋略 | 药杖 | 悬壶济世。单体治疗、持续回复、护盾、驱散、群体治疗 |
| 方士 | 诅咒 · 召唤 | 谋略 | 符剑 | 太平道术。持续伤害、吸取生命、定身,还能召唤纸符兵作战 |
技能一览
| 时期 | 年代 | 等级 | 主要区域 | 首领与名将 |
|---|---|---|---|---|
| 黄巾之乱 | 184 | 1–10 | 桃园村、黑风山寨、黄巾营寨、太平祭坛、巢湖水寨 | 张宝、张角 |
| 讨伐董卓 | 190 | 10–20 | 联军大营、卧虎林、虎牢关、西凉军营、相国行营、飞将校场 | 华雄、董卓、吕布 |
| 官渡之战 | 200 | 20–27 | 许都、白马、延津、官渡大营、乌巢、袁绍大营 | 颜良、文丑、袁绍 |
| 赤壁之战 | 208 | 27–34 | 长坂坡、柴桑、赤壁、乌林曹营、华容道 | 蔡瑁、张辽、许褚 |
| 三分天下 | 219–234 | 34–40 | 汉中、定军山、南中、银坑洞、五丈原 | 夏侯渊、孟获 |
一切从桃园村开始。刘备、关羽、张飞就站在村北的桃林里,村中有村长、铁匠、行商、神医华佗和拍卖行的牙人。头顶有金色“!”的人物有任务可接。

沿官道向西来到许都,荀彧与郭嘉在此坐镇。北渡黄河是白马与延津,颜良、文丑各据一方;再往北是囤粮的乌巢和袁绍的中军大营。

许都是第二座主城,有更高等级的铁匠、药师和拍卖行。

在长坂坡帮赵云杀散追兵,渡江到柴桑见诸葛亮与孙权,然后草船借箭、助黄盖行苦肉计,最后在乌林的曹军大营决战。图中红色的扇形是敌人技能的地面预警——站在里面会挨打,要及时走开。

西入汉中,随黄忠上定军山;南下南中,七擒孟获,这里有藤甲兵、蛮族巫师和战象;最后北上五丈原,与姜维一起面对司马懿。


全游戏共 51 个任务,沿着五个时期连成主线,并有若干支线;65 种敌人,其中精英 14 种、首领 15 种。
战斗是即时的:选中目标,按数字键放技能。
Tab 切换最近的敌人)。击败敌人后,金钱和任务计数自动获得,装备与物品留在尸体上。有战利品的尸体会闪烁金光,走近后出现“F 拾取”提示,按 F 或点击尸体打开拾取窗口。
战利品是每人独立的:组队时每名队员在同一具尸体上各有自己的一份,互不争抢。尸体保留 90 秒。

服务器会按你的屏幕实际能看到的范围同步周围的人和怪。屏幕越大、镜头拉得越远,看到的就越多。

等级上限 40。经验来自打怪和任务;组队打怪有额外的经验加成。
装备有 6 个部位:武器、头部、胸甲、腿部、足部、饰品。品质分为寻常(白)、精良(绿)、稀世(蓝)、传世(紫),以及橙色的套装。属性词缀随机生成,并且只会掉落适合你职业的属性。
天赋从 10 级开始,每升一级得 1 点,满级共 31 点。每个职业有三层共 9 项天赋,每项 5 级;第二层需要先投入 5 点,第三层需要 10 点。天赋可以花钱重置。

副本入口是野外的石碑。每支队伍进入的是自己独立的一份副本,不会和别的队伍抢怪。副本内阵亡会在入口复活。
| 副本 | 规模 | 等级 | 首领 |
|---|---|---|---|
| 太平道地宫 | 5 人 | 10 | 管亥、张梁 |
| 郿坞 | 5 人 | 19 | 李傕、郭汜 |
| 乌巢粮仓 | 5 人 | 27 | 眭元进、淳于琼 |
| 赤壁连环船 | 5 人 | 34 | 文聘、曹仁 |
| 夷陵 | 5 人 | 38 | 朱然、陆逊 |
| 上方谷 | 5 人 | 40 | 司马昭、司马懿 |
| 铜雀台 | 10 人团队 | 40 | 徐晃、夏侯惇、曹丕 |

六个 5 人副本都有英雄难度:需要 40 级,里面的敌人全部提升到 40 级以上,首领必定掉落一件本职业的英雄套装。

铜雀台是 10 人团队副本,入口在许都城外,有三位首领,掉落更强的团队套装。队伍最多可以组到 10 人。


每个职业有两套套装,各 4 件(头、胸、腿、足),集齐 2 件和 4 件分别激活一条效果。
| 职业 | 英雄副本套 | 团队副本套 | 2 件 | 4 件 |
|---|---|---|---|---|
| 猛将 | 虎贲 | 龙骧 | 体质提高 | 受到伤害降低,造成伤害提高 |
| 豪侠 | 游侠 | 青釭 | 敏捷提高 | 暴击与伤害提高 |
| 神射 | 射声 | 穿云 | 敏捷提高 | 出手速度与伤害提高 |
| 谋士 | 卧龙 | 天机 | 智力提高 | 暴击与伤害提高 |
| 医者 | 青囊 | 杏林 | 智力提高 | 治疗效果与资源恢复提高 |
| 方士 | 太平 | 黄天 | 智力提高 | 吸血、伤害与召唤物威力提高 |
团队套装的效果是英雄套装的 1.5 倍。鼠标移到套装部件上,可以看到已集齐的件数和每条效果是否激活。

共四种专业,都可以学,技能上限 100。
采集
五档材料对应五个时期,越靠后的地区材料越高级,需要的采集技能也越高。野外共有 260 个资源点,走到旁边按 F 采集,45 秒后重生。

制造


选中其他玩家后,头像下方会出现 组队 / 交易 / 切磋 / 入会 四个按钮。
聊天有五个频道:附近、天下、队伍、公会、密语。
组队:最多 10 人。同队成员共享击杀的经验与任务计数。
公会:花 100 钱创建,可以邀请成员、使用公会频道。公会名会显示在角色名字下方。

交易:面对面交换物品和金钱。任何一方改动后,双方都要重新确认,防止被换包。

切磋:一对一比试,点到为止——打到只剩一点血时自动结束,不会真的阵亡。

拍卖行:桃园村、许都、柴桑、汉中都有。以一口价寄售物品,成交后抽佣 5%。卖家不在线也没关系,货款会在下次登录时到账;48 小时没卖出去的物品自动退回。

坐骑:20 级解锁,按 Z 上马,移动速度提高 60%。受到攻击或出手时会下马,战斗中和副本里不能骑。

成就共 26 个,覆盖升级、击败首领、完成任务、练专业、集齐套装、赢得切磋、创建公会等。其中 17 个附带称号,例如击败吕布得“战神”、通关上方谷得“卧龙传人”、专业满级得“大匠”。称号可以在成就窗口里佩戴,显示在名字下方给所有人看。

界面采用漆器黑、青铜、朱砂、绢帛的配色,标题用楷体。
所有弹窗都可以按住标题栏拖动,点击窗口会把它提到最前,双击标题回到默认位置。窗口的位置会被记住,下次打开还在原处。

| 按键 | 功能 |
|---|---|
W A S D |
移动 |
| 鼠标左键 | 选中目标;点 NPC 交谈;点闪光的尸体拾取 |
Tab |
切换最近的敌人 |
1–8 |
施放技能 |
Q / E |
使用疗伤药 / 回气药 |
F |
与最近的 NPC 交谈、采集资源、拾取尸体 |
Z |
上马 / 下马 |
B |
角色与行囊 |
L |
任务 |
N |
天赋 |
P |
专业 |
Y |
成就与称号 |
G |
公会 |
M |
九州舆图 |
H |
帮助 |
Enter |
聊天(以 ! 开头发到天下频道) |
| 滚轮 | 缩放镜头 |
Esc |
关闭窗口 / 取消目标 |
聊天指令:/invite 名字 邀请组队、/leave 离队、/w 名字 内容 密语、/p 内容 队伍频道、/g 内容 公会频道、/duel 名字 切磋、/trade 名字 交易、/who 查看在线玩家。
在手机或平板上会自动出现虚拟摇杆和“选敌”按钮,点按可以选中、交谈、拾取,界面会按窄屏重新排布。

游戏附带一个网页版地图编辑器,可以直接修改这张大世界:
点“保存并热加载”后,所有在线玩家会立刻看到新的地图,不需要重启服务器。

| 项目 | 说明 |
|---|---|
| 语言 | 前后端、编辑器、测试全部使用 TypeScript,约 5600 行 |
| 客户端 | Canvas 2D 绘制画面,网页元素做界面 |
| 服务端 | Node.js,WebSocket 通信。所有战斗与掉落都由服务器计算,客户端只负责显示和发送操作 |
| 同步 | 服务器每秒模拟 20 次,每秒向每个玩家发送约 10 次周围的变化 |
| 美术 | 全部由代码逐像素绘制:16 种地块、6 职业人物(4 方向 × 4 帧)、65 种敌人、物品与技能图标 |
| 特效 | 粒子系统,15 类技能特效,按技能配色 |
| 音频 | 浏览器实时合成的音效,以及五声音阶的随机古筝配乐 |
| 存档 | 账号、角色、公会、拍卖行、邮件都保存在服务器的文件里 |
| 内容 | 数量 |
|---|---|
| 职业 / 玩家技能 / 天赋 | 6 / 48 / 54 |
| 敌人(其中精英 / 首领) | 65(14 / 15) |
| 任务 | 51 |
| 区域 | 29 |
| 野外怪物 / 资源点 | 315 / 260 |
| 副本 | 7(6 个 5 人,1 个 10 人) |
| 套装 | 12 套 |
| 配方 | 50 |
| 成就 / 称号 | 26 / 17 |
游戏有 40 项自动测试、一套机器人联机压测,以及一套在真实浏览器里从注册一路玩到团队副本的全流程检查。本文的截图就是由这套全流程检查自动生成的。
如实说明,这些地方还比较粗糙:
完整的清单见 PLAN.md。
需要先安装 Node.js。
npm install
npm run dev
然后在浏览器打开:
注册账号,创建角色,去桃林里找刘备。
“今天下英雄,唯使君与操耳。”