📖 游戏简介
这是一款完全基于原生HTML/CSS/JavaScript开发的《龙族》同人打字游戏，无需任何框架依赖。玩家将化身卡塞尔学院的混血种学员，在青铜柱林立的地下实验室中，通过键盘输入精准召唤「君焰」「时间零」等经典言灵，阻止四大龙王的苏醒。游戏体积不足20KB，却还原了小说中80%的言灵战斗体验。
✨ 项目核心特色（与原作深度绑定）
1️⃣ 言灵系统：1:1还原小说设定
- 君焰（ぐんえん）：楚子航标志性言灵，输入时屏幕边缘会燃起暗红色火焰，错误输入将触发「暴血」警告
- 时间零（タイムゼロ）：校长昂热的言灵，成功输入后游戏界面会呈现胶片定格效果，倒计时暂停2秒
- 镰鼬（かまいたち）：恺撒的言灵，需连续输入3个关联符文（「风」→「速」→「镰」）才能触发群体攻击
- 戒律（ケール）：守夜人的防御言灵，展开圆形领域，低于释放者血统的混血种和龙类都无法释放言灵
2️⃣ 龙血沸腾机制：数据驱动的沉浸体验
// 龙血沸腾核心算法（game.js 156-168行）
function activateBloodBoiling() {
bloodBoiling = true;
gameArea.classList.add('blood-boiling');
// 10秒内所有言灵伤害×2，输入判定宽容度+30%
setTimeout(() => {
bloodBoiling = false;
dragonBlood = 0;
gameArea.classList.remove('blood-boiling');
}, 10000);
}
当连续正确输入达到5次，青铜柱纹路会从青色变为赤红色，触发「血之哀」状态——这正是小说中描述的混血种临界状态。
3️⃣ 视觉美学：青铜与龙文的碰撞
- 动态背景：采用CSS
@keyframes实现的龙文投影效果，随输入速度改变旋转频率 - 言灵特效：纯CSS实现的粒子破碎效果（无Canvas），不同言灵对应不同元素粒子（火/冰/雷/光）
- 响应式设计：在手机端自动切换为竖屏布局，虚拟键盘弹出时自动调整输入区域位置
🛠️ 创作历程：一个人的卡塞尔工程日志
🔍 灵感起源（2023.10.01）
重读《龙族Ⅲ黑月之潮》时，被楚子航在涩谷街头释放「君焰」的场景震撼——如果能亲手输入言灵符文召唤这股力量会怎样？当晚用记事本写下第一版游戏流程图，核心就是「文字输入=言灵释放」的映射关系。
💻 技术攻坚（2023.10.02-10.07）
- 输入判定系统：最初用
keyup事件导致输入延迟，最终采用input事件+防抖处理实现实时匹配 - 青铜柱动画：尝试过3D CSS但性能不佳，改为2D分层动画+
transform: perspective()模拟深度 - 移动端适配：虚拟键盘遮挡输入框的问题，通过监听
resize事件动态调整游戏区域高度解决
📝 迭代记录
- v0.1：仅实现「君焰」「时间零」两个言灵，无视觉特效
- v0.3：加入龙血沸腾机制，青铜柱背景，游戏规则模态框
- v0.5：完善四大言灵体系，优化输入反馈，增加「龙王苏醒」进度条
- v1.0：部署掘金平台，添加游戏规则说明，优化移动端体验
🚧 未完成的遗憾
- 原计划实现「言灵·莱茵」的全屏动画，但因CSS性能问题暂时搁置
- 角色选择系统已写好框架，但需要更多美术资源支持
🎮 游戏体验
立即觉醒你的龙族血统 （建议使用Chrome浏览器获得最佳体验，移动端支持虚拟键盘）
📌 开发手记：作为《龙族》十年老粉，这个项目既是技术练习，也是对青春的致敬。代码全部开源在项目仓库，欢迎 fellow 混血种提交PR，一起完善这个卡塞尔学院的数字训练场！ github.com/LZY-Ricardo…
