SHISEJI · THE CLOCKMENDER
失色纪·修钟人
水彩暗黑童话网页游戏
Vanilla JS  ·  Canvas 程序化绘制  ·  Web Audio API
❧   ✦   ❧

一、游戏概述

《失色纪·修钟人》是一款水彩暗黑童话风格的网页生存解谜游戏。游戏以"颜色即生命"为核心隐喻,玩家在一个正在褪色的异世界中挣扎求存,与时间赛跑修复停摆的古钟。

技术层面,游戏使用纯 Vanilla JavaScript 开发,无任何第三方框架依赖。全部画面由 HTML5 Canvas 路径程序化绘制,全部音效由 Web Audio API 实时合成——每一个像素、每一个音符都是代码写出来的

零外部依赖 Canvas 程序化美术 Web Audio API 音乐 PC + 移动端双平台 成就永久加成系统

二、故事背景

画师林渡在修复一座老钟时,指腹触到剥落的彩绘裂缝,被一道苍白的光吞入了另一个世界——

裂缝里渗出光来。不是暖光,是洗过太多遍的布那种苍白,是纸钱燃尽后飘起来的那种灰。光缠住他的手腕,他看见自己袖口的水彩渍正在褪色,赭石变成褐,褐变成灰,灰变成——

这里是褪色界:一个颜色正在逃离的世界。他只有三天时间,在颜色彻底流失之前,找到古钟碎片、调制润滑剂,修复那座停摆的钟——唯有钟响,才能"放还"。

三、核心玩法

▸ 三项生命数值

游戏以三种物质状态取代传统"生命条":

数值含义归零后果
色值画师的颜色浓度,即生命力立即灰化消亡
墨韵精神韧性,支撑合成与行动行动迟缓,无法合成道具
纸温身体的物质温度色值流失持续加速

▸ 昼夜循环

▸ 合成与通关路径

收集三色彩实 → 合成七彩液 → 配合澄墨水与星尘草 → 制成古钟润滑剂 → 分三次为古钟上油,钟响,归途开启。

▸ 生物图鉴

生物属性特点
鸣蛹友好发光茧体,每20秒吟唱回复附近玩家墨韵+15
灰烬鸦敌对飞扑掠夺色值,血量随天数提升30%
纸络蛛敌对吐丝减速,近身降纸温;持赤色颜料攻击触发3秒燃烧眩晕

四、叙事风格

游戏刻意拒绝情感形容词,全程使用白描物质动词构建叙事。死亡不用"你死了",而用:

皮肤变成素描纸的质地,再变成被雨水泡过的纸浆,最后连纸浆也撑不住,碎成极细的灰,被风里什么吸走了。

胜利不是凯旋——钟响了,不是庆祝的响,是"放还"的响,靛蓝从裂缝渗出,赭石漫回袖口,一切回归原来的样子,但一切已有裂痕。

失败不是结束——玩家轮廓越来越淡,成为褪色界永久的一部分,加入那圈仰头站立的透明人群像。


五、技术亮点

零框架依赖 纯 Vanilla JS,可直接在任意现代浏览器中运行,无需安装或编译
程序化美术 所有视觉元素均由 Canvas API 路径绘制,无外部图片资源
程序化音乐 Web Audio API 合成 C小调八音盒旋律,含 50-65 Hz Drone 根音,随昼夜切换
成就永久加成 解锁成就后采集速度、夜视、攻速、巧手合成等加成实际影响玩法策略
跨平台适配 PC键鼠与移动端虚拟摇杆双模式,非线性速度曲线保证精准操控
交互式结局 17节点胜利动画与8节点失败动画,包含玩家笔触交互绘制钟盘

在世界失去颜色之前,用颜色换时间
用代码写成的一首挽歌

A lament written in code — before the world loses its colors, trade colors for time.

Ctrl + P → 目标打印机选择 另存为 PDF → 纸张 A4 · 无边距