【免费下载链接】ascii-sharksascii shark components in typescript项目地址https://gitcode.com/gh_mirrors/as/ascii-sharks点击查看免费下载ascii-sharks 是一个零依赖的 ASCII 海洋模拟器它用 TypeScript 在浏览器 canvas 上把鱼群和鲨鱼渲染成一格一格的字符模拟出一片会游动、会逃散、会捕猎的字符海洋。整个项目没有任何运行时第三方库核心只有 7 个源文件两条命令即可跑起来。; %% .t;. .oooo S;:S% %8S8. ;:tt%t .. XX%%S t XSSS8SSX%XX8#. %XSX% :; ;.X8%8XX%%S%%S%SStt%tSX8S#X8t%ttt. ::% 8XXXSSt%Stttttt%8%%%88%Sttt%%%%SSSSS%tt. SXXtt%t%%%S%:;StS%ttSS%tSXSt88%8%8%tStS%%X%SS%%S%;;t .##88#...#888X88#XXXSX8SX88SX8%SS%S%%S88St%t%%%. %;%t :. .#####X#888XX##8#.X%XS%. .%t ;%%%###. SXS%% t. .%;%%%. %%XXS %t:t .SXSS ::. ooooo .S这就是 README.md 里展示的主角由# % S 8 X等字符按明暗分层拼出的鲨鱼在黑色网格上缓缓游过身后拖着青色的尾迹光点 两分钟快速上手克隆、安装并运行演示无需任何构建配置Vite TypeScript 已经写好。克隆仓库后两条命令即可看到全屏海洋git clone https://gitcode.com/gh_mirrors/as/ascii-sharks cd ascii-sharks npm install npm run dev运行后打开本地地址你会看到 4 条不同景深的 classic 鲨鱼在屏幕里巡游背景里数百条小鱼组成鱼群。互动小技巧️ 移动鼠标鱼群会把光标当作天敌四散逃开 点击页面制造一次水花附近的鱼瞬间炸开 切换鲨鱼阵容在 URL 后追加?sharks参数例如?sharksthresher,hammerhead,mako,nurse第一条最大其余依次递减不传参数则默认 4 条 classic。参数解析逻辑见 demo.ts。内置生态一览8 种鲨鱼与 5 种鱼类8 种可选择的鲨鱼种类鲨鱼种类定义在 src/world.ts 的SharkKind类型中每种都有独立的体型轮廓、皮肤色调和花纹种类特征classic经典纺锤形冷调蓝灰皮肤默认主角hammerhead宽铲形头翼眼睛长在头翼两端greathammer更宽的锤头镰刀状背鳍板岩色皮肤tiger方头重身背部带虎斑纹zebra短圆头 缎带状长尾沙色皮肤带斑点mako细长锥形吻部金属靛蓝色背部thresher上半截尾鳍长过整个身体青铜紫皮肤nurse扁宽的头和身体双背鳍靠后土黄色每种鲨鱼的体型函数背鳍位置、胸鳍弧度、尾叉形状等都在 src/renderer.ts 的SHAPES表中用体长的比例描述所以同一套渲染管线可以画出所有种类。5 种鱼群物种鱼群物种配置在 src/species.ts每种鱼有独立的巡游速度、群规模、个人空间和行为权重sardine沙丁鱼喜欢围成旋转的饵球bait ballmill值最高anchovy凤尾鱼高度一致化游出长长的缎带silverside中等一致性的稳定鱼群mackerel鲭鱼小规模、保持距离的松散群goby虾虎鱼几乎不看邻居、随机乱窜的蜂群。这些行为差异来自经典的 Couzin 模型见 src/species.ts 的注释对齐align强就形成极化鱼群和缎带弱则形成蜂群再加上切向力mill就旋转成饵球。核心原理字符网格上的鱼群与猎手鱼群带恐惧传染的 boids模拟核心是 src/world.ts 注释里写明的方案——Reynolds boids分离 / 对齐 / 内聚加上几个让它像真的的细节盲点每条鱼正后方约 127° 看不到邻居逃散不会 180° 完美掉头恐惧传染看到鲨鱼的鱼会把自己的alarm值传染给邻鱼每跳衰减 14%于是整群鱼即使只有边缘看到了猎手也会一起炸开形成真实的惊波喷泉水效应逃跑的鱼会朝鲨鱼路径的侧方分流重现自然界 bait ball 的喷泉形态空间哈希鱼被分进网格桶rebuildHash让数百条鱼的邻居查询保持 O(n)60fps 轻松运行。鲨鱼follow-the-leader 脊椎 饥饿捕猎每条鲨鱼是一根 20 节点的脊椎src/world.ts头部驱动、后续节点以关节刚度限制跟随——所以身体最多弯成 C 形永远不会折叠。行为上饥饿系统hunger随时间增长吃鱼后下降猎物选择优先盯落单的鱼——密集鱼群反而会迷惑捕食者findPrey按桶内拥挤度打分见 src/world.ts被吃的小鱼不会消失几秒后它们组成新的鱼群从屏幕边缘游回来生态保持动态平衡。渲染把世界光栅化成字符格子src/renderer.ts 的AsciiRenderer是视觉效果的关键每帧分四步铺一层黑色底 细白网格paintGrid计算尾迹场鱼和鲨鱼尾部在格网中沉积能量再扩散衰减能量高的格子亮起青色小方块——这就是游过后的水波痕迹鱼渲染成单格字符-按景深分 5 档亮度急转弯和受惊的鱼会闪银光鲨鱼逐格超采样每个格子取 5 个采样点判断覆盖率内部格子画实心色块 按明暗选:;t%SX8#字符亮处字符稀疏、暗处字符密集纹理强化光影边缘格子用.,等轻字符做抗锯齿轮廓。鲨鱼皮肤还会以错峰的时钟重新掷色产生鳞片闪光背鳍被左上方的光照亮鳃裂、眼睛、虎纹/斑点全部用字符和色块区分。集成到你的项目一行 React 组件或一个 Engine 类方式一React 组件推荐src/react.tsx 导出一个AsciiOcean组件挂载时自动创建引擎、卸载时自动清理AsciiOcean classNameocean sharks{[{ kind: hammerhead, size: 1 }]} /注意字符来自 canvas 的font-family记得给组件或父级设置等宽字体如Geist Mono、Menlo。方式二直接用 OceanEngine无框架src/index.ts 导出OceanEngine、AsciiRenderer和paintGrid。只要有一个 canvas 就能跑import { OceanEngine } from ./src; const engine new OceanEngine(canvas, [{ kind: hammerhead, size: 1 }]);OceanEngine内部已经处理了固定时间步长60Hz、resize、指针输入、页面不可见时暂停甚至系统减少动态效果偏好——开启prefers-reduced-motion时它会让生态先静置4 秒然后只渲染一帧静态画面src/engine.ts对动效敏感的用户也很友好。源码地图7 个文件的阅读路线文件职责src/index.ts对外导出入口OceanEngine / AsciiRenderer / Worldsrc/world.ts生态模拟鱼群 boids、鲨鱼追踪、进食与重生src/species.ts5 种鱼的物种参数与加权随机选择src/engine.ts引擎固定时间步、resize、指针事件、动效偏好src/renderer.ts字符渲染尾迹扩散、鲨鱼光栅化、鱼群分桶绘制src/react.tsxReact 封装组件AsciiOcean /src/math.ts工具函数clamp、smoothstep、hash3、无散度洋流辅助文件demo.tsVite 演示入口 鲨鱼阵容参数、index.html全屏 canvas Geist Mono 字体、tsconfig.json、LICENSEMIT。常见问题Q真的零依赖吗是。package.json 中运行时依赖为零typescript和vite仅是 devDependencies。Q想要更小的鱼群或单条鱼World构造函数接受可选的fishCount参数覆盖按面积计算的默认数量默认 85~340 条按画布面积自适应。Q字符显示成方块canvas 未加载等宽字体。给 canvas 或父级设置font-family: ui-monospace, Menlo, monospace即可引擎会在字体就绪后重绘。ascii-sharks 证明了字符 物理感的组合能带来意想不到的沉浸感不需要一张贴图几十个 ASCII 符号加上尾迹扩散就足以让鲨鱼游起来。如果你想给自己的站点加一段有记忆点的背景动画它是个几乎零成本的选择——MIT 协议代码量小到一晚上能读完值得克隆下来把玩 赞分享【免费下载链接】ascii-sharksascii shark components in typescript项目地址https://gitcode.com/gh_mirrors/as/ascii-sharks点击查看免费下载相关推荐把动态 ASCII 鲨鱼海洋装进 Reactascii-sharks 的 AsciiOcean 组件实战教程把动态 ASCII 鲨鱼海洋装进 Reactascii sharks 的 AsciiOcean 组件实战教程 ascii sharks 是一个零依赖的 Typ鲨鱼为何专挑孤零零的鱼ascii-sharks 猎食 AI 的转向行为与饥饿机制详解鲨鱼为何专挑孤零零的鱼ascii sharks 猎食 AI 的转向行为与饥饿机制详解 ascii sharks 是一个 零依赖的 TypeScript 生物仿ShowDoc 中的 voku/portable-ascii零扩展依赖的 PHP ASCII 转写与字符清洗库全解析ShowDoc 中的 voku/portable ascii零扩展依赖的 PHP ASCII 转写与字符清洗库全解析 导读 Portable ASCII 是一后端文档知识管理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考