Canvas 2D 探索
Canvas 2D 程序化绘制与实时交互技术研究
项目概述
这是一个个人独立开发的技术研究项目。采用纯前端技术栈，探索 Canvas 2D 程序化绘制 在实时交互场景中的表现力与性能边界。 所有视觉元素均通过 Phaser Graphics API 以纸笔手绘风格实时生成，不使用任何外部图片素材。
项目研究重点包括：多智能体路径规划、实时碰撞处理、 基于地形数据的动态寻路算法、以及纯前端离线应用架构方案。
技术栈
研究方向
程序化绘制与实时渲染
探索在无纹理/无精灵图的情况下，通过 Canvas Graphics API 实时绘制动态元素，研究不同视口比例下的渲染效率、帧率稳定性与视觉一致性。
A* 路径规划在多智能体环境中的应用
在多智能体动态碰撞环境中实现 A* 路径规划，结合动态阻挡检测、路径重算、寻路定时器控制等机制，研究实时场景下路径规划算法的性能与鲁棒性。
视线遮挡检测算法
基于线段相交测试实现实时视线遮挡(LOS)判定，支持多遮挡物环境下的分段遮挡查询，研究其在不同密度障碍场景下的计算开销。
纯前端离线应用架构
所有计算逻辑、数据存储、渲染均在浏览器端完成，研究 PWA + Service Worker 方案下的单机离线应用实现路径，包括资源预缓存、版本管理、跨会话状态持久化。
系统架构
场景管理层
基于 Phaser Scene 的多场景路由管理，负责场景生命周期与状态传递
实时交互核心
交互逻辑（寻路/碰撞/状态更新）与渲染循环分离设计，帧增量驱动更新
地形数据层
基于网格的地形数据管理，支持动态障碍物查询、视线检测、高地/减速区域
实体管理
多智能体（Multi-Agent）注册、销毁、批量更新，A* 路径规划与碰撞推挤
测试与验证
Vitest 单元测试覆盖核心交互逻辑，验证多智能体运动和状态更新的正确性
持久化层
localStorage 状态持久化 + 版本迁移兼容 + PWA Service Worker 离线缓存
关键技术实现
- 基于 Phaser Graphics API 的全代码绘制方案，零外部图片资源
- A* 路径规划 + 路径跟随 + 动态重算定时器
- 实时视线遮挡(LOS)检测，基于线段相交测试
- 多智能体碰撞推挤与群体排布保持
- 基于网格的地形数据管理和空间查询
- PWA + Service Worker 完整离线缓存方案
- localStorage 状态持久化与版本迁移兼容
- Vitest 单元测试覆盖核心交互逻辑
- 移动端触控适配与响应式布局
- TypeScript 全量类型安全
纸上雄兵
技术研究的尽头，是把它做成一款能玩的小游戏。《纸上雄兵》是 基于上述 Canvas 2D 程序化绘制方案开发的微信小游戏——复古手绘水墨风， 火柴人实时对战的轻量策略游戏。所有画面实时生成，零美术素材。
微信内搜索 「纸上雄兵」，或扫码下方二维码即可开战。
闯关征战
50 关 PVE 主线。新手接引，层层闯关领取军饷，逐步解锁兵种与科技。
无限攻城
一命到底的极限挑战。攻城门、拆箭塔、扛守军，刷资源看你能撑几波。
雄兵逐鹿
核心玩法。攻城占地、城主争夺、属城经营、势力榜角逐——这片水墨天下由你说了算。
玩法特色
- 四兵种循环克制：矛 → 盾 → 弓 → 法 → 矛，一物降一物
- 全程序化绘制：手绘水墨风实时生成，零图片素材，打开即玩
- 世界地图 PVP：占领城池、经营属城、升级城门箭塔防守
- 轻量休闲无内购：看广告解锁，随时来一局
- 邀请好友双双领奖：分享即得兵符与墨滴
新手攻略
第一关怎么过？
开局自动部署 3 盾 1 矛——盾顶在前面吃箭，矛输出。多用盾兵克制敌方弓箭手，第一关轻松拿下。
先去哪？
先通关升级攒实力，再去世界地图打无主城（无主城难度最低），站稳脚跟后再逐鹿天下。
更新日志
- 战报修复：世界动态按时间排序、同一事件不再重复
- 分享邀请：好友通过你的分享进入，双方都可领奖
- 主菜单优化：雄兵逐鹿升级为核心入口
- 城池防守：属城可升级城门与箭塔
- 自建服务器：全面迁移独立服务器，加载速度大幅提升
- 第 1 关调整：敌方弓手亮相，开局白送盾兵当教材
- 属城保护：刚打下的城有保护期，不再秒丢
关于
该项目是个人独立开发的技术研究项目。 旨在探索 Canvas 2D 程序化绘制在实时交互场景中的应用边界， 以及无外部资源的纯前端渲染方案的可行性与表现力。 项目侧重于算法实现、渲染性能与前端架构设计的实践验证。
技术研究的成果最终长成了一款小游戏——《纸上雄兵》，欢迎到微信搜索体验。