REAL-TIME INTERACTION / CASE 01

运输船
浏览器里的实时交互实验。

把“能运行”推进到“能准确命中、有及时反馈、可以持续迭代”。一次围绕 WebGL、机器人行为与游戏状态的个人工程实践。

Three.jsWeb AudioJavaScriptVite

个人学习作品 · AI 辅助开发 · 浏览器本地单机机器人对战

运输船实际渲染画面:海面、集装箱甲板与战术角色
游戏实际渲染场景。模型与音频包含第三方素材,查看来源与许可。
TRY IT / 30 秒上手

从一场短对局开始。

推荐使用电脑键鼠。进入后默认白天与流畅画质,点击“开始游戏”后启用声音和视角控制。

  1. 移动与观察WASD 移动,鼠标转向,空格跳跃;Esc 暂停并释放鼠标。
  2. 射击与切换左键开火,右键狙击开镜,R 换弹;1–5 切换双主武器、手枪、军刀与手雷。
  3. 观察反馈比较爆头与普通命中,观察敌人转身、包抄,以及拾取补给后的生命变化。
INSIDE THE IMPLEMENTATION

复杂度藏在交互细节里。

四组能够在体验和代码中核对的实现。

01 / HIT DETECTION

让准星与命中结果一致

以准星射线判定命中,枪口射线补充近处掩体检查。曳光用于视觉反馈,命中使用即时射线,避免视觉弹道与判定混在一起。

验证:掩体遮挡、蹲姿命中区、黄金与白银爆头。
02 / PERCEPTION & PATHS

给机器人感知与记忆

区分视野、枪声、受击和最后已知位置;记忆随时间过期。路径规划配合横移、短冲刺、包抄与后撤,高连杀时提高投雷频率。

验证:背后受击、失去视线、真实地图可通行路径、错峰投雷。
03 / STATE & TIMING

用明确状态组织一场对局

五分钟比赛、十秒复活、逐级连杀奖励和补给拾取共用比赛时钟。暂停冻结计时;死亡清除限时防护,本局 MVP 荣誉保留。

验证:同帧多杀、护盾到期、21 杀 MVP、51 杀提前夺冠。
04 / RENDERING & RESOURCES

控制画面与声音的成本

特效与补给复用固定容量资源,流畅模式关闭阴影并限制像素比;声音缓存解码结果并限制并发。游戏仅在独立体验页加载。

验证:资源复用、蒙皮身体首帧可见、声音清理和载入超时。
VERIFICATION / 验证记录

把修复留成可重复的检查。

2026-09-25 版本通过 159 项本地自动化测试,覆盖移动、命中、动画、机器人、状态奖励、音频与资源释放。浏览器中检查了补给拾取、护盾挡伤和奖励界面。

这些检查用于约束逻辑回归;不同显卡、浏览器与手机仍会有体验差异,未将测试数量作为帧率或画质指标。

RUN THE CHECKScd demos/transport-ship
npm ci
npm test
npm run build
源码与完整测试随项目版本库维护
展开实际代码:连杀防护的时间管理

构建时直接读取当前游戏的 combat-rules.js。以比赛时钟 now 计算剩余时间,暂停冻结时钟;每次续时以当前剩余值为基础,最多保留 100 秒。

export function extendStreakProtection(actor, now) {
  if (!actor?.isPlayer || !actor.alive) return null;
  if (actor.killStreak === 6) {
    actor.vestUntil = now + 60;
    return { vestSeconds: 60 };
  }
  if (actor.killStreak === 7) {
    actor.shieldUntil = now + 60;
    return { shieldSeconds: 60, shieldAdded: 60 };
  }
  if (actor.killStreak > 7) {
    const before = Math.max(0, (actor.shieldUntil || 0) - now);
    const after = Math.min(100, before + 10);
    actor.shieldUntil = now + after;
    return { shieldSeconds: after, shieldAdded: Math.max(0, after - before) };
  }
  return null;
}
SCOPE & CREDITS

实现方式与当前边界

开发方式在 AI 辅助下围绕需求反复实现、修复和验证。项目保留源码、锁定依赖、测试与素材说明,便于继续迭代与审阅。

运行范围当前是浏览器本地 AI 对战,包含触屏操作;尚未实现真人联网对战、服务端权威判定、反作弊和账号存档。电脑键鼠体验更完整。

来源说明玩法与场景参考运输船射击游戏;人物模型、动画和音频遵循各自许可。此作品为个人技术演示,与原游戏品牌无隶属关系。

现在体验运输船 ↗← 返回全部作品演示